[html] 웹 사이트 이미지 갤러리

26 Dec 2023

html

이번에는 HTML, CSS 및 JavaScript를 사용하여 웹 사이트에 이미지 갤러리를 추가하는 방법에 대해 알아보겠습니다.

1. HTML 구조

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

2. CSS 스타일링

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.image {
  width: 200px;
  margin: 10px;
}

3. JavaScript

// 이미지 클릭시 확대 효과
const images = document.querySelectorAll('.image');

images.forEach(image => {
  image.addEventListener('click', () => {
    image.classList.toggle('enlarged');
  });
});

이렇게 하면 이미지 갤러리를 구현할 수 있습니다. 위 코드를 수정하여 원하는 이미지를 추가하고 스타일을 변경할 수 있습니다.

참고:

MDN Web Docs