이미지 갤러리는 웹사이트에서 많이 사용되는 기능 중 하나입니다. 이번 글에서는 자바스크립트와 CSS Grid를 조합하여 이미지 갤러리를 만드는 방법을 알아보겠습니다.

CSS Grid란?

CSS Grid는 웹 디자인을 위한 레이아웃 시스템으로, 요소를 그리드 형태로 배치할 수 있게 해줍니다. 그리드는 행(row)과 열(column)로 구성되어 있으며, 각 그리드 셀(cell)은 필요한 영역을 가질 수 있습니다.

이미지 갤러리 레이아웃 설정하기

먼저 HTML 파일에 이미지 갤러리를 표시할 요소를 만들어야 합니다. 다음과 같이 <div> 태그를 사용하여 그리드 컨테이너를 만들어주세요.

<div class="gallery-container">
  <!-- 이미지 갤러리를 표시할 요소들 -->
</div>

그리고 CSS 파일에서 .gallery-container에 대한 스타일을 설정해주세요. 다음은 예시입니다.

.gallery-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3개의 열을 가진 그리드 */
  grid-gap: 10px; /* 그리드 셀 사이의 간격 */
}

위 코드에서는 grid-template-columns 속성을 사용하여 3개의 열을 가진 그리드를 생성하고, grid-gap 속성을 사용하여 그리드 셀 사이의 간격을 지정하였습니다.

자바스크립트를 사용하여 이미지 불러오기

이제 자바스크립트를 사용하여 이미지를 불러와서 갤러리에 추가해보겠습니다.

const galleryContainer = document.querySelector('.gallery-container');

// 이미지 URL 배열
const imageUrls = [
  'img1.jpg',
  'img2.jpg',
  'img3.jpg',
  // 추가 이미지 URL
];

// 이미지 불러와서 갤러리에 추가
imageUrls.forEach((imageUrl) => {
  const img = document.createElement('img');
  img.src = imageUrl;
  galleryContainer.appendChild(img);
});

위 코드에서는 document.querySelector() 메서드를 사용하여 .gallery-container 요소를 선택하고, document.createElement() 메서드를 사용하여 <img> 태그를 생성한 후, src 속성을 설정하여 이미지를 불러옵니다. 마지막으로 appendChild() 메서드를 사용하여 이미지를 갤러리에 추가합니다.

완성된 이미지 갤러리

이제 이미지를 불러오는 기능을 추가한 이미지 갤러리가 완성되었습니다. 화면에 그리드로 배치된 이미지들이 보일 것입니다.

이 작은 예시에서 우리는 자바스크립트와 CSS Grid를 사용하여 이미지 갤러리를 만들었습니다. 이것은 물론 간단한 예시일 뿐이지만, 이 원리를 활용하여 더 다양한 기능과 디자인을 추가할 수 있습니다.

#WebDevelopment #JavaScript