이번 기술 블로그에서는 자바스크립트와 CSS Grid를 활용하여 이미지 갤러리의 확대 및 축소 기능을 구현하는 방법에 대해 알아보겠습니다.

CSS Grid를 사용한 이미지 갤러리 구성하기

우선 CSS Grid를 사용하여 이미지 갤러리를 생성해야 합니다. CSS Grid는 간단한 마크업으로 유연한 레이아웃을 만들 수 있게 해주는 CSS 모듈입니다. 아래는 예시로 3x3 그리드로 구성된 이미지 갤러리의 HTML과 CSS 코드입니다.

<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">
  <img src="image6.jpg" alt="Image 6">
  <img src="image7.jpg" alt="Image 7">
  <img src="image8.jpg" alt="Image 8">
  <img src="image9.jpg" alt="Image 9">
</div>

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

.gallery img {
  width: 100%;
  height: auto;
}

위 코드를 실행하면 3x3 그리드로 이미지 갤러리가 구성됩니다. 이제 자바스크립트를 사용하여 이미지 확대/축소 기능을 추가해보겠습니다.

자바스크립트를 사용한 이미지 확대/축소 기능 구현하기

이미지 갤러리의 이미지를 클릭하면 해당 이미지가 확대되는 기능을 구현해보겠습니다. 이를 위해 자바스크립트 이벤트 핸들러를 사용합니다. 아래는 해당 기능을 구현한 예시 코드입니다.

<div class="gallery">
  <img src="image1.jpg" alt="Image 1" onclick="zoomImage(this)">
  <!-- 나머지 이미지들도 동일하게 onclick 속성 추가 -->
  ...
</div>

...

function zoomImage(img) {
  // 이미지 확대 코드 작성
  img.style.transform = "scale(1.5)";
}

function resetZoom() {
  // 이미지 축소 코드 작성
  const images = document.querySelectorAll(".gallery img");
  images.forEach(img => {
    img.style.transform = "scale(1)";
  });
}

위의 예시 코드에서는 onclick 속성을 사용하여 이미지를 클릭하면 zoomImage 함수가 실행되도록 했습니다. 해당 함수는 클릭된 이미지의 크기를 확대하는 기능을 구현하고 있습니다. resetZoom 함수는 이미지를 원래 크기로 축소하는 기능을 구현합니다.

이제 이미지 갤러리에서 이미지를 클릭하면 해당 이미지가 확대될 것입니다. 다시 클릭하면 이미지가 축소됩니다. 필요에 따라 CSS를 수정하여 더 디테일한 효과를 만들 수도 있습니다.

마무리

이제 자바스크립트와 CSS Grid를 사용하여 이미지 갤러리의 확대/축소 기능을 구현하는 방법에 대해 알아보았습니다. 이를 통해 사용자들은 원하는 이미지를 클릭하여 더 자세히 볼 수 있게 될 것입니다. 필요에 따라 추가적인 기능을 구현하거나 디자인을 변경해보세요.

#javascript #cssgrid