자바스크립트에서 JSON 데이터를 이용하여 색상 선택기 생성하기

15 Sep 2023

javascript

이번 포스트에서는 자바스크립트를 사용하여 JSON 데이터를 활용하여 색상 선택기를 생성하는 방법에 대해 알아보겠습니다.

준비물

HTML 파일
CSS 파일
JavaScript 파일

JSON 데이터 준비하기

우선 색상 선택기에 사용할 JSON 데이터를 준비해야 합니다. 이 데이터는 색상의 이름과 해당 색상의 코드를 포함해야 합니다. 아래와 같이 JSON 형식으로 데이터를 작성해보겠습니다.

[
  {
    "name": "레드",
    "code": "#FF0000"
  },
  {
    "name": "그린",
    "code": "#00FF00"
  },
  {
    "name": "블루",
    "code": "#0000FF"
  }
]

이 데이터는 색상의 이름과 해당 색상의 코드를 담고 있습니다. 이제 이 데이터를 자바스크립트에서 활용해보겠습니다.

색상 선택기 생성하기

HTML 파일을 열고 다음과 같이 기본적인 구조를 작성합니다.

<!DOCTYPE html>
<html>
  <head>
    <title>색상 선택기</title>
    <!-- CSS 파일 링크 추가 -->
  </head>
  <body>
    <h1>색상 선택기</h1>
    <div id="color-selector"></div>

    <!-- JavaScript 파일 링크 추가 -->
  </body>
</html>

이제 자바스크립트 파일을 생성하고 다음과 같이 코드를 작성합니다.

// JSON 데이터 가져오기
const dataUrl = '경로/데이터.json';

// 색상 선택기 생성 함수
function createColorSelector(data) {
  const colorSelector = document.getElementById('color-selector');
  
  // 각각의 색상에 대해 반복
  data.forEach(color => {
    const colorDiv = document.createElement('div');
    
    // 색상 이름을 나타내는 텍스트 생성
    const colorName = document.createElement('p');
    colorName.textContent = color.name;
    
    // 색상에 따른 배경색 설정
    colorDiv.style.backgroundColor = color.code;
    
    // 색상 이름과 색상을 컨테이너에 추가
    colorDiv.appendChild(colorName);
    colorSelector.appendChild(colorDiv);
  });
}

// JSON 데이터 가져와서 색상 선택기 생성
fetch(dataUrl)
  .then(response => response.json())
  .then(data => createColorSelector(data))
  .catch(error => console.log(error));

위 코드에서는 fetch를 사용하여 JSON 데이터를 가져온 후 해당 데이터를 이용하여 색상 선택기를 동적으로 생성합니다. 색상에 따른 배경색을 적용하고 색상 이름을 나타내는 텍스트를 추가합니다.

결과 확인하기

웹 브라우저에서 HTML 파일을 열어 결과를 확인해보세요. JSON 데이터의 각 색상에 대한 색상 이름과 배경색이 동적으로 생성되어 색상 선택기가 완성됩니다.

이제 여러분은 자바스크립트와 JSON 데이터를 활용하여 색상 선택기를 만들 수 있게 되었습니다!

#색상선택기 #JSON #자바스크립트