[javascript] Isotope을 사용하여 웹 포트폴리오 필터를 맞춤 설정하는 방법은 무엇인가요?

01 Dec 2023

javascript

보통 웹 포트폴리오에는 다양한 카테고리나 필터링 기능이 포함되어 있습니다. Isotope 라이브러리는 이러한 필터를 구현하는 데 도움이 되는 강력한 도구입니다. 이제 Isotope을 사용하여 웹 포트폴리오 필터를 맞춤 설정하는 방법을 알아보겠습니다.

먼저, Isotope 라이브러리를 다운로드하고 웹 페이지에 추가해야 합니다. 이를 위해 HTML 파일의 <head> 섹션에 다음 코드를 추가하세요.

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

그 다음, 포트폴리오 항목을 표시할 <div> 요소를 만들고 필터 버튼을 추가하세요. 예를 들어, 다음과 같이 작성할 수 있습니다.

<div id="portfolio">
   <button class="filter-button" data-filter="*">All</button>
   <button class="filter-button" data-filter=".web">Web</button>
   <button class="filter-button" data-filter=".mobile">Mobile</button>
   <button class="filter-button" data-filter=".graphic">Graphic</button>
</div>

이제 JavaScript 코드를 사용하여 Isotope을 초기화하고 필터링을 설정해야 합니다. <script> 태그 안에 다음 코드를 추가하세요.

$(document).ready(function() {
   var $container = $('#portfolio');
   $container.isotope({
      filter: '*',
      animationOptions: {
         duration: 500,
         easing: 'linear',
         queue: false
      }
   });

   $('.filter-button').click(function() {
      var filterValue = $(this).attr('data-filter');
      $container.isotope({
         filter: filterValue,
         animationOptions: {
            duration: 500,
            easing: 'linear',
            queue: false
         }
      });
   });

   $('.filter-button').removeClass('active');
   $(this).addClass('active');
});

위의 코드는 페이지가 로드될 때 Isotope을 초기화하고, 필터 버튼을 클릭했을 때 필터링을 처리합니다. “filter-button” 클래스를 가진 버튼을 클릭하면 해당 필터 값을 사용하여 Isotope이 포트폴리오 항목을 적절하게 필터링하고 애니메이션을 적용합니다.

이제 포트폴리오 항목을 <div>로 감싸고 적절한 클래스를 설정하여 각 항목에 필터를 할당하세요. 예를 들어, 다음과 같이 작성할 수 있습니다.

<div class="portfolio-item web">
   <!-- 웹 포트폴리오 항목의 내용 -->
</div>

<div class="portfolio-item mobile">
   <!-- 모바일 포트폴리오 항목의 내용 -->
</div>

<div class="portfolio-item graphic">
   <!-- 그래픽 디자인 포트폴리오 항목의 내용 -->
</div>

위의 코드에서 “web”, “mobile”, “graphic” 등의 클래스는 필터 버튼과 일치해야 합니다.

이제 웹 포트폴리오에 Isotope 필터를 맞춤 설정했습니다. 사용자는 필터 버튼을 클릭하여 원하는 카테고리의 항목만 볼 수 있습니다.

자세한 내용은 Isotope 공식 문서를 참조하세요. https://isotope.metafizzy.co/

이를 통해 웹 포트폴리오를 효과적으로 필터링하고 사용자에게 원하는 콘텐츠를 제공할 수 있습니다.