웹 애플리케이션을 개발할 때 도표는 매우 유용한 요소입니다. 도표는 데이터 시각화에 도움을 주며, 사용자에게 정보를 명확하게 전달하는 데 도움을 줍니다. 이번 블로그 포스트에서는 자바스크립트와 CSS Grid를 사용하여 웹 애플리케이션의 도표를 구현하는 방법을 알아보겠습니다.

1. HTML 마크업

먼저, 도표를 표현하기 위한 HTML 마크업을 작성해야 합니다. 간단한 테이블 형식의 도표를 만들어 보겠습니다.

<table id="chart">
  <tr>
    <th>월</th>
    <th>매출</th>
  </tr>
  <tr>
    <td>1월</td>
    <td>100</td>
  </tr>
  <tr>
    <td>2월</td>
    <td>200</td>
  </tr>
  <tr>
    <td>3월</td>
    <td>150</td>
  </tr>
</table>

2. CSS Grid 스타일링

CSS Grid를 사용하여 도표를 스타일링하겠습니다. 도표 전체를 감싸는 컨테이너에 그리드를 적용하고, 테이블의 열과 행에 대한 스타일을 정의합니다.

#chart {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;
}

#chart th {
  background-color: #f2f2f2;
  padding: 10px;
}

#chart td {
  padding: 10px;
}

3. 자바스크립트 동적으로 데이터 삽입

마지막으로, 자바스크립트를 사용하여 도표에 데이터를 동적으로 삽입하는 코드를 작성합니다. 예를 들어, 서버로부터 매월의 매출 데이터를 받아와 도표에 반영할 수 있습니다.

const data = [
  { month: '1월', sales: 100 },
  { month: '2월', sales: 200 },
  { month: '3월', sales: 150 }
];

const chart = document.getElementById('chart');

data.forEach(item => {
  const row = document.createElement('tr');
  const monthCell = document.createElement('td');
  monthCell.textContent = item.month;
  const salesCell = document.createElement('td');
  salesCell.textContent = item.sales;

  row.appendChild(monthCell);
  row.appendChild(salesCell);
  chart.appendChild(row);
});

결론

자바스크립트와 CSS Grid를 사용하여 도표를 구현하는 방법을 알아보았습니다. 이를 응용하여 다양한 유형의 도표를 만들 수 있으며, 데이터 시각화에 큰 도움이 될 것입니다. 자세한 내용은 관련 문서를 참고하시기 바랍니다.

#javascript #cssgrid