이미지 갤러리는 웹사이트에서 많이 사용되는 기능 중 하나입니다. 이번에는 자바스크립트를 사용하여 CSS Grid를 활용한 이미지 갤러리에 필터링 기능을 추가해보겠습니다.

필터링 기능 구현하기

HTML 구조 설정하기

먼저, 이미지들을 담을 div 요소를 생성하고, 이미지들을 figure 요소로 감싸주는 구조를 만듭니다. 각 이미지에는 data-category 속성을 추가하여 이미지가 속하는 카테고리를 지정합니다.

<div class="gallery">
    <figure data-category="nature">
        <img src="image1.jpg" alt="Nature Image">
    </figure>
    <figure data-category="city">
        <img src="image2.jpg" alt="City Image">
    </figure>
    <figure data-category="nature">
        <img src="image3.jpg" alt="Nature Image">
    </figure>
    <!-- 추가 이미지들 -->
</div>

필터링 버튼 추가하기

다음으로, 필터링 기능을 제어할 버튼들을 추가합니다. 각 버튼에는 필터링할 카테고리를 나타내는 data-filter 속성을 추가합니다.

<button class="filter-button" data-filter="all">All</button>
<button class="filter-button" data-filter="nature">Nature</button>
<button class="filter-button" data-filter="city">City</button>
<!-- 추가 버튼들 -->

자바스크립트로 필터링 기능 구현하기

이제 자바스크립트를 사용하여 필터링 기능을 구현해보겠습니다. 필터링 버튼을 클릭했을 때, 해당 카테고리에 속하는 이미지만 보여지도록 스타일을 변경하는 기능을 추가합니다.

const buttons = document.querySelectorAll('.filter-button');
const gallery = document.querySelector('.gallery');

buttons.forEach(button => {
  button.addEventListener('click', () => {
    const filter = button.dataset.filter;

    gallery.childNodes.forEach(child => {
      const category = child.dataset.category;

      if (filter === 'all' || filter === category) {
        child.style.display = 'block';
      } else {
        child.style.display = 'none';
      }
    });
  });
});

완성된 필터링 기능 확인하기

위의 코드를 HTML 파일에 추가하고, 웹 브라우저에서 확인해보면 이미지 갤러리에 필터링 기능이 추가된 것을 확인할 수 있습니다. 필터링 버튼을 클릭하여 원하는 카테고리의 이미지들만 보여지도록 할 수 있습니다.

커스텀 CSS 스타일링이나 다양한 기능을 추가하여 좀 더 풍부한 이미지 갤러리를 구현할 수도 있습니다.

#webdevelopment #javascript