[javascript] Isotope을 이용하여 웹 포트폴리오를 필터링하는 방법은 무엇인가요?

01 Dec 2023

javascript

Isotope은 HTML 요소들을 동적으로 정렬, 필터링 및 재배치할 수 있는 자바스크립트 라이브러리입니다. 웹 포트폴리오에 Isotope을 이용하면 사용자가 원하는 기준에 따라 프로젝트를 필터링하여 효과적으로 보여줄 수 있습니다.

먼저, Isotope을 사용하기 위해 Isotope 라이브러리 파일을 다운로드하고 웹 페이지에 포함시킵니다. 다음으로, 필터링할 요소들을 포함하는 HTML 마크업을 작성합니다. 각 요소는 필터링을 위해 클래스나 데이터 속성으로 그룹화되어야 합니다.

예를 들어, 포트폴리오 아이템을 필터링할 때 카테고리를 기준으로 필터링한다고 가정해 보겠습니다. 각 포트폴리오 아이템에는 해당 카테고리를 표시하는 클래스가 추가되어야 합니다.

<div class="portfolio-item web">...</div>
<div class="portfolio-item illustration">...</div>
<div class="portfolio-item photography">...</div>

다음으로, 필터링 옵션을 표시하기 위한 버튼을 추가합니다.

<button data-filter=".web">Web</button>
<button data-filter=".illustration">Illustration</button>
<button data-filter=".photography">Photography</button>
<button data-filter="*">All</button>

마지막으로, 자바스크립트를 사용하여 Isotope을 초기화하고 필터링 기능을 추가합니다.

var $grid = $('.portfolio').isotope({
  itemSelector: '.portfolio-item',
  layoutMode: 'fitRows'
});

// 필터링 버튼 클릭 시 필터링 기능 활성화
$('.filter-buttons').on('click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $grid.isotope({ filter: filterValue });
});

위의 코드에서 $('.portfolio')는 포트폴리오 컨테이너 요소의 선택자입니다. itemSelector는 포트폴리오 아이템 요소의 선택자이며, layoutMode는 아이템을 배치할 레이아웃 모드를 정의합니다.

$('.filter-buttons').on('click', 'button', function() { ... })에서는 필터링 버튼 클릭 시 필터링 기능을 활성화합니다. 클릭된 버튼의 data-filter 속성 값을 가져와 filter 메서드를 사용하여 포트폴리오를 필터링합니다.

이렇게 하면 Isotope을 이용하여 웹 포트폴리오를 필터링할 수 있습니다. Isotope을 사용하면 필터링 애니메이션 등 추가적인 기능도 사용할 수 있으므로 자세한 내용은 Isotope 공식 문서를 참고하시기 바랍니다.

참고 문헌:

Isotope 공식 문서