이름이 제시토프(Isotope)인 라이브러리는 웹 페이지에서 요소들의 필터링, 정렬, 비동기 레이아웃 등 다양한 기능을 제공하는 매우 유용한 도구입니다. 이제 레시피 목록을 필터링하는 방법을 알아보겠습니다.

먼저, HTML 코드에서 레시피를 나타내는 각 요소를 마크업하겠습니다. 다음은 예시입니다:

<div class="recipe" data-category="breakfast">
  <h3>Eggs Benedict</h3>
  <p>Delicious breakfast dish with poached eggs and hollandaise sauce.</p>
</div>

<div class="recipe" data-category="lunch">
  <h3>Caesar Salad</h3>
  <p>Classic salad with romaine lettuce, croutons, and Caesar dressing.</p>
</div>

<div class="recipe" data-category="dinner">
  <h3>Spaghetti Bolognese</h3>
  <p>Traditional Italian pasta dish with meat-based sauce.</p>
</div>

각 레시피는 recipe 클래스를 가지고 있으며, data-category 속성을 통해 카테고리를 정의합니다.

이제 JavaScript 코드에서 Isotope 라이브러리를 초기화하고 필터링 기능을 구현해보겠습니다. 다음은 예시입니다:

// Isotope 초기화
var $grid = $('.recipes').isotope({
  itemSelector: '.recipe',
  layoutMode: 'fitRows'
});

// 필터링 버튼 이벤트 처리
$('.filters').on('click', '.filter', function() {
  var filterValue = $(this).attr('data-filter');
  $grid.isotope({ filter: filterValue });
});

위의 코드에서 .recipes 클래스를 갖는 부모 요소를 가져와 Isotope을 초기화합니다. 이때, itemSelector 속성은 필터링할 개별 요소를 선택합니다. layoutMode 속성은 레시피들을 어떤 방식으로 배치할지를 결정합니다(여기서는 세로로 쌓는 fitRows를 사용했습니다).

마지막으로, 필터링을 처리하는 이벤트를 등록합니다. .filters 클래스를 갖는 부모 요소에서 .filter 클래스를 가진 버튼을 클릭하면 해당 버튼의 data-filter 속성 값을 가져와 필터링을 수행합니다.

다음은 필터링 버튼을 추가하는 예시입니다:

<div class="filters">
  <button class="filter" data-filter="breakfast">Breakfast</button>
  <button class="filter" data-filter="lunch">Lunch</button>
  <button class="filter" data-filter="dinner">Dinner</button>
</div>

이제 각 버튼을 클릭하면 해당 카테고리에 해당하는 레시피들만 보여지게 됩니다. Isotope은 필터링과 관련된 애니메이션과 부드러운 화면 전환이 자동으로 처리되므로 사용자에게 향상된 경험을 제공합니다.

더 자세한 정보는 공식 Isotope 문서를 참조하시기 바랍니다. Isotope 문서

이제 웹 페이지의 레시피 목록을 Isotope을 통해 필터링할 수 있는 기능을 구현했습니다. 이를 통해 사용자는 원하는 카테고리의 레시피를 쉽게 탐색할 수 있습니다.