이미지 갤러리에 필터링 기능을 추가하여 사용자가 원하는 조건에 따라 이미지를 필터링할 수 있는 기능을 구현해보겠습니다. 이때, CSS Grid를 사용하여 이미지를 그리드 형태로 배치할 것이므로, 자바스크립트를 활용하여 필터링 기능을 추가하겠습니다.

HTML 구조 설정하기

먼저, HTML 구조를 설정해야 합니다. CSS Grid를 사용하여 이미지를 배치하기 위해 <div> 요소를 사용하겠습니다.

<div class="gallery">
  <div class="item">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="item">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div class="item">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <!-- 추가적인 이미지 요소 추가 -->
</div>

CSS Grid 스타일 적용하기

다음으로, CSS Grid를 사용하여 이미지를 그리드 형태로 배치하도록 스타일을 적용해보겠습니다.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 10px;
}

.item {
  width: 100%;
}

필터링 기능 추가하기

이제 자바스크립트를 사용하여 필터링 기능을 추가해보겠습니다. 필터링 기능은 사용자가 선택된 필터링 옵션에 따라 이미지를 숨기거나 보여주도록 작성될 것입니다.

const filterButtons = document.querySelectorAll('.filter-button');
const items = document.querySelectorAll('.item');

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

    items.forEach(item => {
      if (item.classList.contains(filterValue) || filterValue === 'all') {
        item.style.display = 'block';
      } else {
        item.style.display = 'none';
      }
    });
  });
});

위의 코드에서는 필터링 버튼(.filter-button)과 이미지 요소(.item)를 선택하고, 각 필터링 버튼의 클릭 이벤트에 대한 리스너를 추가합니다. 리스너 함수 내에서는 선택된 필터링 값에 따라 이미지 요소를 보여주거나 숨깁니다.

예제 코드 실행하기

위의 코드를 HTML 파일에 추가 후, 웹 브라우저에서 실행해보세요. 필터링 버튼을 클릭하여 이미지를 필터링해볼 수 있습니다.

이미지 갤러리에 필터링 기능을 추가하여 사용자가 원하는 이미지를 빠르고 쉽게 찾을 수 있도록 도와줄 수 있습니다. CSS Grid와 자바스크립트를 이용하여 유연하고 반응형인 이미지 갤러리를 구현할 수 있으니, 이를 참고하여 웹 애플리케이션에 필요한 갤러리 기능을 개발해보세요.

#webdevelopment #javascript