이미지 갤러리를 만들 때 CSS Grid를 사용하면 이미지를 유연하게 배치할 수 있습니다. 그러나 기본적으로 CSS Grid는 이미지를 수평 또는 수직으로 배치하는 기능만 제공합니다. 이번 블로그 포스트에서는 자바스크립트를 사용하여 CSS Grid 이미지 갤러리에 정렬 기능을 추가하는 방법을 알아보겠습니다.

CSS Grid 이미지 갤러리 구조

먼저, CSS Grid를 사용하여 이미지 갤러리를 구성하는 방법을 알아보겠습니다. 다음은 예시로 사용할 갤러리 구조입니다.

<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <img src="image4.jpg" alt="Image 4">
  <img src="image5.jpg" alt="Image 5">
  <!-- 추가 이미지들 -->
</div>

CSS로는 다음과 같이 이미지 갤러리를 CSS Grid로 배치할 수 있습니다.

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

위 코드는 3개의 열을 가진 그리드를 생성하고, 각 열의 너비를 동일하게 설정합니다. 그리드 간격도 10px로 지정하였습니다.

자바스크립트를 활용한 정렬 기능 추가

이제 자바스크립트를 사용하여 CSS Grid 이미지 갤러리에 정렬 기능을 추가해보겠습니다.

먼저, 사용자에게 정렬 옵션을 선택하게 할 수 있는 UI를 구현해야 합니다. 다음은 예시로 사용할 정렬 옵션 선택 HTML 코드입니다.

<div class="options">
  <label>
    <input type="radio" name="sort" value="none" checked>
    None
  </label>
  <label>
    <input type="radio" name="sort" value="random">
    Random
  </label>
  <label>
    <input type="radio" name="sort" value="latest">
    Latest
  </label>
</div>

각각의 라디오 버튼에는 정렬 옵션에 해당하는 값을 가지고 있습니다. 사용자가 선택한 정렬 옵션 값을 저장할 변수도 필요합니다.

let sortOption = 'none';

정렬 옵션 값이 변경될 때마다 그리드를 다시 배치하는 함수를 만들어야 합니다.

function rearrangeGrid() {
  const gallery = document.querySelector('.gallery');
  const images = Array.from(gallery.querySelectorAll('img'));

  // 정렬 옵션 별로 이미지를 재배치합니다.
  if (sortOption === 'random') {
    images.sort(() => Math.random() - 0.5);
  } else if (sortOption === 'latest') {
    images.sort((a, b) => new Date(b.getAttribute('data-date')) - new Date(a.getAttribute('data-date')));
  }

  // 이미지를 갤러리에 다시 추가합니다.
  images.forEach(image => gallery.appendChild(image));
}

위 함수는 정렬 옵션에 따라 이미지를 재배치하는 역할을 합니다. 정렬 옵션이 ‘random’인 경우에는 배열을 무작위로 섞을 수 있습니다. ‘latest’인 경우에는 이미지에 data-date 속성을 추가하고, 해당 속성을 기준으로 날짜를 비교하여 정렬합니다.

정렬 옵션을 변경할 때마다 rearrangeGrid 함수가 호출되도록 이벤트를 추가해야 합니다.

const sortOptions = document.querySelectorAll('input[name="sort"]');
sortOptions.forEach(option => option.addEventListener('change', (event) => {
  sortOption = event.target.value;
  rearrangeGrid();
}));

위 코드는 정렬 옵션에 change 이벤트를 추가하고, 선택된 정렬 옵션 값을 변경한 후 rearrangeGrid 함수를 호출합니다.

마치며

이제 자바스크립트를 사용하여 CSS Grid 이미지 갤러리에 정렬 기능을 추가하는 방법을 알아보았습니다. 정렬 옵션을 사용자가 선택하면 그리드가 다시 배치되어 이미지가 정렬되게 됩니다. 자유롭게 이 코드를 활용해보세요!

#javascript #CSSGrid #이미지갤러리 #정렬기능