자바스크립트에서 JSON 데이터를 이용하여 사진 갤러리 생성하기

15 Sep 2023

vuejs

사진 갤러리는 웹 사이트에서 이미지를 보여주고 관리하기 위한 중요한 기능 중 하나입니다. 이 기사에서는 자바스크립트와 JSON 데이터를 이용하여 동적인 사진 갤러리를 만드는 방법을 알려드리겠습니다.

1. JSON 데이터 작성하기

먼저, JSON 형식의 데이터를 작성해야 합니다. 각 이미지는 URL, 제목, 설명 등과 같은 속성을 갖고 있어야 합니다. 아래는 예시입니다.

const galleryData = [
  {
    "url": "https://example.com/image1.jpg",
    "title": "이미지 1",
    "description": "첫 번째 이미지입니다."
  },
  {
    "url": "https://example.com/image2.jpg",
    "title": "이미지 2",
    "description": "두 번째 이미지입니다."
  },
  // 추가적인 이미지 데이터...
];

2. HTML 구조 생성하기

갤러리를 보여줄 HTML 구조를 생성해야 합니다. 각 이미지를 보여줄 컨테이너와 이미지 정보를 표시할 요소들을 포함해야 합니다. 아래는 예시입니다.

<div id="gallery">
  <!-- 이미지 컨테이너 -->
  <div class="image-container">
    <img src="" alt="" class="image">
    <h3 class="title"></h3>
    <p class="description"></p>
  </div>
  
  <!-- 추가적인 이미지 컨테이너들... -->
</div>

3. 자바스크립트로 갤러리 생성하기

이제, 자바스크립트를 사용하여 JSON 데이터를 이용하여 갤러리를 생성할 수 있습니다. 아래는 예시 코드입니다.

const galleryContainer = document.getElementById("gallery");

for (let i = 0; i < galleryData.length; i++) {
  const imageData = galleryData[i];

  const imageContainer = document.createElement("div");
  imageContainer.classList.add("image-container");

  const imageElement = document.createElement("img");
  imageElement.src = imageData.url;
  imageElement.alt = imageData.title;
  imageElement.classList.add("image");
  
  const titleElement = document.createElement("h3");
  titleElement.textContent = imageData.title;
  titleElement.classList.add("title");
  
  const descriptionElement = document.createElement("p");
  descriptionElement.textContent = imageData.description;
  descriptionElement.classList.add("description");

  imageContainer.appendChild(imageElement);
  imageContainer.appendChild(titleElement);
  imageContainer.appendChild(descriptionElement);

  galleryContainer.appendChild(imageContainer);
}

이런 식으로 각 이미지 데이터를 사용하여 동적으로 사진 갤러리를 생성할 수 있습니다. 이제 웹 사이트에 이 코드를 적용하면 JSON 데이터로 갤러리를 만들 수 있게 됩니다!