이번 포스트에서는 CSS Grid를 활용하여 이미지 갤러리를 만들고, 자바스크립트를 사용하여 필터링 기능을 추가해보겠습니다. 필터링 기능은 사용자가 특정 카테고리를 선택하면 해당하는 이미지만 보여주는 기능입니다.

필요한 기술 스택

• HTML
• CSS
• JavaScript

이미지 갤러리 기본 구조

먼저, 이미지 갤러리를 구성하기 위한 기본적인 HTML 구조를 작성해보겠습니다. 이 갤러리는 grid-container라는 클래스로 정의된 div 요소에 이미지들이 포함됩니다.

<div class="grid-container">
  <div class="grid-item category1">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="grid-item category2">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div class="grid-item category1">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <!-- ... -->
</div>

CSS Grid를 사용한 이미지 갤러리 스타일링

이미지 갤러리에 CSS Grid를 적용하여 그리드 레이아웃을 만들어보겠습니다. 여러분은 필요에 따라 그리드 아이템의 크기, 간격, 행과 열의 개수 등을 조정할 수 있습니다.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.grid-item {
  width: 100%;
  height: auto;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

필터링 기능 추가하기

이제 필터링 기능을 추가해보겠습니다. 우선, 필터링을 위한 버튼을 작성하고, 해당 버튼이 클릭되었을 때 자바스크립트 함수를 호출하는 이벤트 핸들러를 할당합니다.

<button onclick="filterItems('category1')">Category 1</button>
<button onclick="filterItems('category2')">Category 2</button>

자바스크립트 함수 filterItems는 category라는 매개변수를 받아서 해당하는 그리드 아이템만 보여주도록 스타일을 변경합니다. 그리고 선택되지 않은 카테고리에 속하는 그리드 아이템은 숨깁니다.

function filterItems(category) {
  const gridItems = document.querySelectorAll('.grid-item');
  
  gridItems.forEach((item) => {
    if (item.classList.contains(category)) {
      item.style.display = "block";
    } else {
      item.style.display = "none";
    }
  });
}

이렇게 필터링 기능이 추가된 이미지 갤러리를 구현할 수 있습니다. 사용자가 카테고리 버튼을 클릭하면 해당하는 이미지만 보여지게 됩니다.

위의 예제는 간단하게 동작하기 위한 예시입니다. 실제로는 데이터베이스와 연동하여 동적으로 이미지를 가져오고, 필터링할 수 있는 카테고리를 동적으로 생성하는 것이 일반적입니다.

이제 여러분은 자바스크립트와 CSS Grid를 활용하여 필터링 기능이 있는 이미지 갤러리를 구현할 수 있게 되었습니다. 이를 응용하여 다양한 프로젝트에서 이미지 필터링 기능을 적용해보세요!

해시태그

#JavaScript #CSSGrid