[코드공유] 필터 갤러리(반응형) 만들기

[코드공유] 필터 갤러리(반응형) 만들기

필터 갤러리를 만드는 코드를 공유하고자 한다.

필터는 내가 원하는 부분만을 찾기 위한 장치이기에

필터에 해당되는 이미지를 보게 해주는 코드를 만들 예정이다.

도움이 되었다면 공감 혹은 덧글 남겨주면 좋겠다.

첨부파일

filter-gallery.zip

7.74MB

참고자료

↓↓↓↓

결과물

새로 고침 할 때마다 배열을 섞기 때문에 매번 다르게 정렬된다

각 필터에 들어가면 각 필터에 해당되는 자료들만 나타나게 된다.

HTML 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>filter-gallery[Responsive]</title>
    <link rel="stylesheet" href="./css/style.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
    <div class="wrapper">
        <ul>
            <li class="list active" data-filter="all">All</li>
            <li class="list" data-filter="action">Action</li>
            <li class="list" data-filter="animation">Animation</li>
            <li class="list" data-filter="comedy">Comedy</li>
            <li class="list" data-filter="drama">Drama</li>
            <li class="list" data-filter="thriller">Thriller</li>
            <li class="list" data-filter="horror">Horror</li>
            <li class="list" data-filter="romance">Romance</li>
        </ul>
        <div class="poster">
            <!-- 
            <div class="itemBox" data-item="action"><img src="./img/킹스맨.jpg" alt="킹스맨"></div>
            <div class="itemBox" data-item="horror"><img src="./img/클로젯.jpg" alt="클로젯"></div>
            <div class="itemBox" data-item="action"><img src="./img/원티드.jpg" alt="원티드"></div>
            <div class="itemBox" data-item="drama"><img src="./img/워낭소리.jpg" alt="워낭소리"></div>
            <div class="itemBox" data-item="thriller"><img src="./img/어스.jpg" alt="어스"></div>
            <div class="itemBox" data-item="thriller"><img src="./img/암수살인.jpg" alt="암수살인"></div>
            <div class="itemBox" data-item="horror"><img src="./img/숨바꼭질.jpg" alt="숨바꼭질"></div>
            <div class="itemBox" data-item="drama"><img src="./img/뷰티인사이드.jpg" alt="뷰티인사이드"></div>
            <div class="itemBox" data-item="comedy"><img src="./img/미스터빈.jpg" alt="미스터빈"></div>
            <div class="itemBox" data-item="animation"><img src="./img/날씨의아이.jpg" alt="날씨의아이"></div>
            <div class="itemBox" data-item="animation"><img src="./img/겨울왕국.jpg" alt="겨울왕국"></div>
            <div class="itemBox" data-item="comedy"><img src="./img/극한직업.jpg" alt="극한직업"></div>
            -->
        </div>
    </div>
    <script src="./js/filter.js"></script>
</body>
</html>

HTML 관전 포인트

1)제이쿼리 사용 2)li에 data-filter을 이용하여 필터 만들어주기 3).poster의 자식인 .itemBox들 주석처리

1) 좀더 편한 접근을 위하여 제이쿼리를 사용하였다.

필수는 아니며 영상을 참고하면 자바스크립트만으로 구성할 수 있다.

2)data-filter을 이용하여 각각의 li에게 정보값을 넣어 주었다.

3).poster의 자식인 .itemBox들 주석처리

유지보수의 편리성과 동적인 효과를 위해서 주석처리 하였다.

CSS 코드

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.wrapper{
    padding: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 40 auto;
}

.wrapper ul{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.wrapper ul li{
    list-style: none;
    background: #eee;
    padding: 12px 20px;
    margin: 5px;
    letter-spacing: 1px;
    cursor: pointer;
}

.wrapper ul li.active{
    background: rgb(25, 93, 172);
    color: #fff;
}

.poster{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.poster .itemBox{
    position: relative;
    width: 200px;
    height: 266px;
    margin: 5px;
    display: block;
    box-shadow: 0px 0px 7px rgba(0,0,0,0.3);
    transition: 0.5s;
    cursor: pointer;
}

.poster .itemBox:hover{
    transform: scale(1.1);
    transition: 0.5s;
    z-index: 9;
}

.poster .itemBox.hide{
    display: none;
}

.poster .itemBox img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

CSS 관전 포인트

1)* 초기화 2)hover효과 3)object-fit

1)* 초기화

작업을 할 때마다 해주는 것이지만 처음은 *로 모든것을 초기화 해주는 것이 좋다

2)hover효과

동적인 효과를 주기위하여 hover를 설정하였다.

transition으로 효과가 발생하고서 변하는 시간을 설정하여 애니메이션 느낌을 주었고

tranform: scale()로 크기를 설정하여 동적인 효과를 강조하였다.

3)object-fit

object-fit 설정을 하여 영화 포스터들이 컨텐츠 영역에 알맞게 하였다.

JS 코드

//영화 정보 셋팅 [DB대신 json파일 임시 생성]
let arryPoster =   [{'name' : '미션임파서블', 'item': 'action'},
                    {'name' : '원티드', 'item': 'action'},
                    {'name' : '킹스맨', 'item': 'action'},
                    {'name' : '겨울왕국', 'item': 'animation'},
                    {'name' : '날씨의아이', 'item': 'animation'},
                    {'name' : '주토피아', 'item': 'animation'},
                    {'name' : '토이스토리4', 'item': 'animation'},
                    {'name' : '극한직업', 'item': 'comedy'},
                    {'name' : '미스터빈', 'item': 'comedy'},
                    {'name' : '스파이', 'item': 'comedy'},
                    {'name' : '뷰티인사이드', 'item': 'drama'},
                    {'name' : '워낭소리', 'item': 'drama'},
                    {'name' : '타이타닉', 'item': 'drama'},
                    {'name' : '겟아웃', 'item': 'thriller'},
                    {'name' : '암수살인', 'item': 'thriller'},
                    {'name' : '어스', 'item': 'thriller'},
                    {'name' : '호라이즌라인', 'item': 'thriller'},
                    {'name' : '숨바꼭질', 'item': 'horror'},
                    {'name' : '컨저링', 'item': 'horror'},
                    {'name' : '클로젯', 'item': 'horror'},
                    {'name' : '말할수없는비밀', 'item': 'romance'},
                    {'name' : '미비포유', 'item': 'romance'},
                    {'name' : '이프온리', 'item': 'romance'},
                    {'name' : '장난스런키스', 'item': 'romance'}]

//배열 담을 배열
let showingArry = [];                

// 배열 섞기 함수
const shuffleArray = array => {
    for (var i = 0; i < array.length; i++) {
        var j = Math.floor(Math.random() * (i + 1));
        const temp = array[i];     //빈 곳에  배열i를 저장
        array[i] = array[j];       //배열 j를 배열 i에 저장
        array[j] = temp;           //상수 x를 배열 j에 저장
    }
    return array;
};

for(let i =0; i<arryPoster.length; i++){
    let posters = `<div class="itemBox" data-item="${arryPoster[i].item}"><img src="./img/${arryPoster[i].name}.jpg" alt="${arryPoster[i].name}"></div>`
    showingArry.push(posters);
}

shuffleArray(showingArry);


$(document).ready(function(){
    //섞은 배열을 출력하기
    $('.poster').append(showingArry);

    let list = $(".list");
    let itemBox = $(".itemBox");

    list.on('click',function(){
        list.removeClass('active');
        $(this).addClass('active');
        let dataFilter = $(this).attr('data-filter');
        console.log(showingArry);

        itemBox.each(function(){
            $(this).addClass('hide');
            $(this).removeClass('active');
            if($(this).attr('data-item') == dataFilter || dataFilter == 'all'){
                $(this).addClass('active');
                $(this).removeClass('hide');
            }
        })
    })
    
})

JS 관전 포인트

1)array 2)push 3)배열 섞는 함수 4)append 5)click 6)attr

1)array

배열을 이용하여 데이터를 저장하였다.

제대로 만들려면 DB를 이용하여 데이터를 저장하고 불러와야 하지만

최대한 간단히 만들고자 배열을 이용하여 배열에 데이터를 저장하고 불러옴으로

코드를 구현하였다.

2)push

push는 자료를 배열에 집어넣는 함수 이다

push를 이용하여 코드를 최소화 하였다.

HTML 코드부분의 주석처리를 한 이유가

push함수 사용하기 때문이다.

let posters 변수를 배열에 넣어 불러올 생각이다.

3)배열 섞는 함수

배열 섞는 함수를 만들어서 배열을 섞을 예정이다.

매번 새로고침 할 때마다 다르게 보인다.

4)제이쿼리 append

append()는 해당 요소의 자식으로 ()안에 있는 것을 생성해준다 (동적생성)

5)제이쿼리 click

on('click')을 통해서 클릭을 하게 하였고

클릭을 이벤트로 hide와 active를 줌으로 이벤트를 제어했다.

2021.04.09 - [웹언어/jQuery] - [jQuery] 제이쿼리 click

[jQuery] 제이쿼리 click

jquery .click() .click(function(){})은 요소를 "마우스로 클릭했을 때"를 조건으로 기능을 수행하는 매소드입니다. 사용법 1 요소에 .click(function(){})을 붙인 뒤 클릭 한다 //클릭문 $(요소).click(funct..

jh91.tistory.com

6)제이쿼리 attr

li의 정보값과 itemBox의 data-item의 정보값을 읽으려면

attr을 이용하여 정보값에 접근해야 된다.

attr에 대한 자세한 내용은 이전 글을 참고하면 된다.

2021.03.29 - [웹언어/jQuery] - [jQuery] 제이쿼리 attr

[jQuery] 제이쿼리 attr

jquery .attr() attr()은 attribute의 값을 가져오거나 속성을 추가하는 메소드 입니다. 사용법 1 요소의 속성의 값을 가져올 때 $(요소).attr(가져올 속성의 값); //ex ) $('div').attr('id'); == div의 id값을..

jh91.tistory.com

참고 영상을 보고 만들어도 되고 내가 공유한 코드를 가지고 사용해도 된다.

저작자표시 변경금지

'웹언어 > 코드공유' 카테고리의 다른 글

[코드공유] 아날로그 시계 만들기 (14)	2021.05.08

[코드공유] 필터 갤러리(반응형) 만들기