웹 페이지의 포트폴리오 필터 제어하기: Isotope 사용

Isotope은 웹 페이지에서 동적으로 포트폴리오 필터를 구현하는 데 사용되는 강력한 라이브러리입니다. 이 라이브러리를 사용하면 사용자가 원하는 카테고리에 따라 필터링 된 포트폴리오 아이템을 표시할 수 있습니다.

1. Isotope 설치

먼저, Isotope 라이브러리를 다운로드하거나 CDN을 통해 가져와야 합니다. 다음은 CDN을 통해 Isotope을 가져오는 예시입니다:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>

그리고 Isotope을 사용하기 위해 jQuery도 필요합니다. jQuery도 다운로드하거나 CDN을 통해 가져올 수 있습니다.

2. HTML 구조 설정

Isotope을 사용하려는 웹 페이지의 HTML 구조를 설정해야 합니다. 일반적으로는 <div> 요소로 포트폴리오 컨테이너를 만들고, 이 컨테이너 내부에 포트폴리오 아이템들을 구성합니다. 각 포트폴리오 아이템에는 카테고리에 대한 클래스를 할당해야 합니다.

아래는 간단한 예시입니다:

<div class="portfolio-container">
  <div class="portfolio-item category1"></div>
  <div class="portfolio-item category2"></div>
  <div class="portfolio-item category1"></div>
  <div class="portfolio-item category3"></div>
  ...
</div>

3. 필터 버튼 추가하기

Isotope을 사용하여 웹 페이지의 포트폴리오 필터를 제어하기 위해 필터 버튼을 추가해야 합니다. 이 버튼을 클릭하면 해당 카테고리에 따라 포트폴리오 아이템을 필터링할 수 있습니다.

버튼을 추가하기 위해 HTML에서 다음과 같은 구조를 사용합니다:

<div class="filter-buttons">
  <button data-filter="*">All</button>
  <button data-filter=".category1">Category 1</button>
  <button data-filter=".category2">Category 2</button>
  <button data-filter=".category3">Category 3</button>
  ...
</div>

4. Isotope 초기화하기

Isotope을 초기화하고 웹 페이지에서 포트폴리오 필터를 사용할 수 있도록 JavaScript 코드를 작성해야 합니다. 이 코드는 Isotope의 함수를 사용하여 컨테이너와 필터 버튼을 연결합니다. 아래는 초기화하는 JavaScript 코드 예시입니다:

$(document).ready(function() {
  $('.portfolio-container').isotope({
    itemSelector: '.portfolio-item',
    layoutMode: 'fitRows'
  });

  $('.filter-buttons button').click(function() {
    var filterValue = $(this).attr('data-filter');
    $('.portfolio-container').isotope({ filter: filterValue });

    // 필터링된 버튼 스타일 변경
    $('.filter-buttons button').removeClass('active');
    $(this).addClass('active');
  });
});

여기서 portfolio-container는 포트폴리오 아이템을 감싸는 컨테이너의 클래스이고, portfolio-item은 포트폴리오 아이템의 클래스입니다. filterValue를 사용하여 선택한 버튼의 카테고리 값을 가져옵니다.

5. 스타일링

마지막으로, 필터 버튼 및 포트폴리오 아이템의 스타일링을 CSS를 사용하여 설정해야 합니다. 이 부분은 사용자의 환경에 따라 다르게 구성될 수 있습니다.

이제 웹 페이지에서 포트폴리오 필터를 제어하기 위해 Isotope을 사용할 수 있습니다. 사용자가 원하는 카테고리를 선택하면 필터링된 포트폴리오 아이템만 표시됩니다.

더 자세한 정보와 예제 코드는 Isotope 공식 문서를 참조하세요.