CSS Grid는 강력한 기능을 가진 CSS 레이아웃 시스템으로, 웹 개발자들에게 많은 편의를 제공합니다. 이번에는 CSS Grid를 사용하여 게시판에 필터링 기능을 추가하는 방법에 대해 알아보겠습니다. 자바스크립트를 사용하여 필터링하는 기능을 구현할 것이므로, 기본적인 자바스크립트 지식이 필요합니다.

필터링 기능 구현하기

먼저, HTML과 CSS 코드를 작성하여 게시판을 만듭니다. 게시물들을 그리드 형태로 표시하고, 필터링 옵션을 선택할 수 있는 필터링 영역을 추가합니다.

<div class="grid-container">
  <div class="filter-container">
    <label for="filter">필터링 옵션:</label>
    <select id="filter">
      <option value="all">전체</option>
      <option value="web">웹 개발</option>
      <option value="mobile">모바일 개발</option>
      <option value="data">데이터 분석</option>
    </select>
  </div>

  <div class="post">...</div>
  <div class="post">...</div>
  <div class="post">...</div>
  ...
</div>

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

.filter-container {
  margin-bottom: 20px;
}

.post {
  /* 게시물 스타일 */
}

이제 자바스크립트 코드를 작성하여 필터링 기능을 추가합니다. 필터링 옵션의 변경을 감지하고, 선택된 게시물들을 해당 옵션에 맞게 보여줄 것입니다.

const filterOption = document.getElementById('filter');
const posts = Array.from(document.querySelectorAll('.post'));

filterOption.addEventListener('change', () => {
  const selectedOption = filterOption.value;

  posts.forEach(post => {
    if (selectedOption === 'all') {
      post.style.display = 'block'; // 모든 게시물을 보여줍니다.
    } else if (post.dataset.category === selectedOption) {
      post.style.display = 'block'; // 선택된 카테고리에 해당하는 게시물만 보여줍니다.
    } else {
      post.style.display = 'none'; // 나머지는 숨깁니다.
    }
  });
});

위의 자바스크립트 코드는 필터링 옵션 변경 시 이벤트를 감지하고, 선택된 옵션에 해당하는 게시물만 보여주도록 처리합니다. 각 게시물은 data-category 속성으로 카테고리를 지정하여 해당 카테고리를 확인합니다.

결과 확인하기

이제 웹 브라우저에서 결과를 확인해보세요. 필터링 옵션을 선택할 때마다 해당 카테고리에 해당하는 게시물들만 보이게 됩니다.

이처럼, 자바스크립트와 CSS Grid를 함께 사용하여 게시판에 필터링 기능을 추가할 수 있습니다. CSS Grid의 강력한 레이아웃 기능과 자바스크립트의 동적인 특성을 조합하여 다양한 웹 애플리케이션을 구현할 수 있습니다.

더 자세한 내용은 #CSSGrid #자바스크립트 해시태그를 참고하세요.