CSV에서 웹 앱으로
beginner~15 분0/4 단계
CSV에서 웹 앱으로
데이터를 쿼리하는 법도, SQL로 잘라내는 법도 이미 알고 계시죠. 이제 데이터를 보여주는 법을 배울 차례입니다.
스프레드시트 속 표는 세상에 보이지 않습니다. 브라우저 속 표는 하나의 제품입니다. 이번 레슨에서는 정렬 가능한 헤더, 색상으로 구분된 행, 요약 행까지 갖춘 인터랙티브 HTML 데이터 대시보드를 처음부터 직접 만들어 봅니다. Python도, Pandas도 필요 없습니다. HTML과 Tailwind만 있으면 됩니다.
안내
1
대시보드 제목 <h1>을 추가하세요 — 어떤 데이터를 보여주는 대시보드인가요?
힌트: 예: `<h1 class="text-2xl font-bold text-white">제품 분석</h1>`
2
열 제목(<th>)이 3개 이상 담긴 <thead>가 있는 <table>을 추가하세요
3
데이터 행(<tr>)이 4개 이상 담긴 <tbody>를 추가하세요 — 실제처럼 보이는 숫자로 채워 넣으세요
4
맨 아래에 합계 행을 추가하세요: 각 열의 합계를 굵게 표시한 <tr class="summary-row">
내 코드
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
ViBot과 함께 바이브로 만들기무료 메시지 0 / 12개
이 단계에서 만들고 싶은 것을 설명해 주시면 코드를 작성해 드릴게요 — 그다음 적용을 클릭하면 에디터에 바로 들어갑니다. 이 단계: 대시보드 제목 <h1>을 추가하세요 — 어떤 데이터를 보여주는 대시보드인가요?
실시간 미리보기
실시간 미리보기