사진 갤러리는 웹 페이지에서 이미지를 보여주고 상호작용할 수 있는 기능을 제공합니다. 이제 자바스크립트를 사용하여 간단한 사진 갤러리를 구현하는 방법에 대해 알아보겠습니다.

HTML 구조 설정하기

먼저, HTML 구조를 설정해야 합니다. 각 사진은 <img> 태그를 사용하여 표시됩니다. 이미지를 나열하기 위해 <div>를 사용할 수 있습니다. 예를 들면 다음과 같습니다:

<div id="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <!-- 추가 이미지 -->
</div>

CSS 스타일링 추가하기

갤러리에 스타일을 적용해 이미지들이 잘 보이도록 만들어야 합니다. 다음은 간단한 CSS 스타일을 추가하는 방법입니다:

#gallery {
  display: flex;
  flex-wrap: wrap;
}

#gallery img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  margin: 10px;
}

자바스크립트로 사진 갤러리 기능 추가하기

이제 자바스크립트를 사용해 사진 갤러리에 상호작용할 수 있는 기능을 추가해봅시다. 우선, this 키워드를 사용하여 현재 클릭된 이미지에 대한 정보를 얻을 수 있습니다.

const images = document.querySelectorAll('#gallery img');

function handleClick() {
  console.log(this.src);
  // 클릭된 이미지의 소스 URL을 출력
}

images.forEach((image) => {
  image.addEventListener('click', handleClick);
});

위의 코드를 사용해 개별 이미지를 클릭할 때 해당 이미지의 URL을 콘솔에 출력할 수 있습니다.

추가 기능 구현하기

사진 갤러리에는 추가 기능을 구현할 수 있습니다. 예를 들어, 클릭한 이미지를 크게 표시하는 모달 창을 추가할 수 있습니다. 이를 위해 자바스크립트에서 동적으로 DOM 요소를 생성해야 합니다.

function handleClick() {
  const modal = document.createElement('div');
  modal.classList.add('modal');
  
  const clickedImage = document.createElement('img');
  clickedImage.src = this.src;
  clickedImage.alt = this.alt;

  modal.appendChild(clickedImage);
  document.body.appendChild(modal);
  
  // 모달 창 닫기
  modal.addEventListener('click', () => modal.remove());
}

handleClick() 함수 내에서는 새로운 <div> 요소와 클릭된 이미지를 포함하는 <img> 요소를 생성합니다. 그런 다음, 모달 창 닫기 이벤트를 추가해 모달 창을 닫을 수 있습니다.

마무리

이제 자바스크립트를 사용하여 사진 갤러리를 구현하는 방법을 알게 되었습니다. 위의 예시 코드를 기반으로 원하는 기능을 추가하거나 스타일을 변경해보세요. 사진 갤러리는 사용자들에게 시각적인 향상을 제공하며 상호작용할 수 있는 웹 경험을 제공합니다.

키워드: 사진 갤러리, 자바스크립트, this, 이미지 클릭 이벤트