이미지 뷰어는 웹 애플리케이션에서 사용자가 이미지를 볼 수 있도록 도와주는 중요한 기능입니다. 이번에는 자바스크립트와 CSS Grid를 활용하여 웹 애플리케이션의 이미지 뷰어를 구현하는 방법을 알아보겠습니다.

CSS Grid 소개

CSS Grid는 웹 페이지를 그리드 형태로 나누고 배치하는 데 사용되는 CSS 레이아웃 시스템입니다. 이를 통해 유연하고 강력한 레이아웃을 만들 수 있습니다. Grid 컨테이너와 그리드 아이템으로 구성되며, 각 아이템의 위치와 크기를 조절할 수 있습니다.

이미지 뷰어 구현하기

이미지 뷰어를 구현하기 위해 다음과 같은 단계를 따라갈 수 있습니다:

1. HTML 구조 생성하기: <div> 요소를 이용하여 이미지를 감싸고, 이미지 뷰어의 기능을 수행할 버튼을 추가합니다.

<div class="image-viewer">
  <img src="image.jpg" alt="Image">
  <button class="prev-button">Previous</button>
  <button class="next-button">Next</button>
</div>

1. CSS Grid 속성 적용하기: Grid 컨테이너에 display: grid 속성을 적용하고, 그리드 아이템을 정렬합니다.

.image-viewer {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 50px;
  gap: 10px;
}

.prev-button, .next-button {
  grid-row: 2;
}

1. 자바스크립트로 버튼 기능 추가하기: 이미지 뷰어의 버튼을 클릭할 때마다 이전 또는 다음 이미지를 표시하는 기능을 추가합니다.

const images = ["image1.jpg", "image2.jpg", "image3.jpg"];
let currentIndex = 0;

const imageView = document.querySelector(".image-viewer");
const prevButton = document.querySelector(".prev-button");
const nextButton = document.querySelector(".next-button");

prevButton.addEventListener("click", () => {
  currentIndex = (currentIndex - 1 + images.length) % images.length;
  imageView.querySelector("img").src = images[currentIndex];
});

nextButton.addEventListener("click", () => {
  currentIndex = (currentIndex + 1) % images.length;
  imageView.querySelector("img").src = images[currentIndex];
});

이제 웹 애플리케이션에 이미지 뷰어가 구현되었습니다. CSS Grid를 사용하여 이미지와 버튼을 그리드 형태로 배치하고, 자바스크립트를 이용하여 이전/다음 이미지를 표시하는 기능을 구현했습니다.

이와 같이 자바스크립트와 CSS Grid를 활용하여 웹 애플리케이션의 이미지 뷰어를 구현할 수 있습니다. 이를 통해 사용자들은 웹 페이지에서 편리하게 이미지를 확인할 수 있습니다.

#javascript #CSSGrid