CSS 막대 차트 만들기
CSS 막대 차트 만들기
모든 시각화에 무거운 차트 라이브러리가 필요한 것은 아닙니다. 많은 대시보드에서는 스타일이 적용된 div 몇 개만으로도 선명하고 빠르게 로드되며 완전히 내 뜻대로 제어할 수 있는 막대 차트를 만들 수 있습니다.
이번 레슨에서는 순수 HTML과 Tailwind만으로 세로 막대 차트를 만듭니다. 각 막대는 값에 비례하는 높이를 가진 색칠된 div일 뿐이고, 범례가 색상과 그 의미를 이어줍니다.
애널리스트에게 이 기법은 금과 같습니다. 의존성 없이 어떤 보고서에든 깔끔한 차트를 넣을 수 있고, 모든 픽셀이 데이터와 어떻게 대응하는지 정확히 이해할 수 있으니까요. 이제 막대를 그려 봅시다.
안내
보는 사람이 막대가 무엇을 나타내는지 알 수 있도록 "분기별 매출"이라는 h1 차트 제목을 추가하세요.
힌트: `<h1 class="text-3xl font-bold mb-2">분기별 매출</h1>`을 사용하세요.
어디에 작성하나요?
<!-- 여기에 막대 차트 시각화를 만들어 보세요 -->11번째 줄에 작성하세요 — 그 주석 아래, 이미 추가한 코드 다음입니다.
items-end를 사용해 막대들이 기준선 위에 놓이는 flex 행으로 차트 영역을 만드세요.
bg-purple-500 색상을 사용해, 인라인 height 스타일이 있는 div로 색칠된 막대를 추가하세요.
"최고 기록 분기" 라벨을 포함해 색상의 의미를 설명하는 범례를 추가하세요.
내 코드
이 단계에서 만들고 싶은 것을 설명해 주시면 코드를 작성해 드릴게요 — 그다음 적용을 클릭하면 에디터에 바로 들어갑니다. 이 단계: 보는 사람이 막대가 무엇을 나타내는지 알 수 있도록 "분기별 매출"이라는 h1 차트 제목을 추가하세요.