정보를 정리하는 두 가지 방법#
정보를 전달할 때 문장으로만 늘어놓으면 읽기가 어렵습니다.
"오늘 마트에서 사과, 바나나, 우유, 계란, 두부를 사야 합니다."
이걸 목록으로 정리하면 훨씬 보기 쉽죠.
오늘 살 것:
- 사과
- 바나나
- 우유
- 계란
- 두부
HTML에는 이런 목록과 표를 만드는 전용 태그들이 있습니다.
순서 없는 목록 — <ul>과 <li>#
ul은 unordered list(순서 없는 목록) 의 줄임말입니다. li는 list item(목록 항목) 입니다.
HTML
<ul>
<li>사과</li>
<li>바나나</li>
<li>딸기</li>
</ul>브라우저에서 보면 각 항목 앞에 ● 같은 점(bullet)이 생깁니다.
순서가 없는 목록에 씁니다. 예를 들어:
- 장보기 목록
- 기능 소개
- 메뉴 항목
순서 있는 목록 — <ol>과 <li>#
ol은 ordered list(순서 있는 목록) 의 줄임말입니다.
HTML
<h2>라면 끓이는 방법</h2>
<ol>
<li>냄비에 물 550ml를 붓습니다.</li>
<li>물이 끓으면 면과 스프를 넣습니다.</li>
<li>4분 30초 더 끓입니다.</li>
<li>그릇에 담아 완성!</li>
</ol>브라우저에서 보면 각 항목 앞에 1, 2, 3... 번호가 자동으로 붙습니다.
순서가 의미 있는 경우에 씁니다. 예를 들어:
- 요리 순서
- 설치 방법
- 순위
목록 안에 목록 — 중첩 목록#
목록 안에 또 다른 목록을 넣을 수 있습니다.
HTML
<ul>
<li>프론트엔드
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>백엔드
<ul>
<li>Node.js</li>
<li>Python</li>
</ul>
</li>
</ul>안쪽 목록은 자동으로 들여쓰기되어 계층 구조가 잘 보입니다.
표 — <table>#
표는 여러 태그의 조합으로 만들어집니다.
HTML
<table>
<thead>
<tr>
<th>이름</th>
<th>과목</th>
<th>점수</th>
</tr>
</thead>
<tbody>
<tr>
<td>홍길동</td>
<td>수학</td>
<td>95</td>
</tr>
<tr>
<td>김철수</td>
<td>영어</td>
<td>88</td>
</tr>
</tbody>
</table>| 태그 | 역할 |
|---|---|
<table> | 표 전체를 감싸는 태그 |
<thead> | 표의 머리 행(header) 그룹 |
<tbody> | 표의 본문 데이터 그룹 |
<tr> | table row — 가로 행 하나 |
<th> | table header — 머리 칸 (굵게, 가운데 정렬) |
<td> | table data — 데이터 칸 |
표 구조를 그림으로 이해하기#
Text
<table>
┌──────────────────────────────┐
│ <thead> │
│ <tr> [<th>] [<th>] [<th>] │ ← 머리 행 (굵게)
│ </thead> │
│ <tbody> │
│ <tr> [<td>] [<td>] [<td>] │ ← 데이터 행
│ <tr> [<td>] [<td>] [<td>] │ ← 데이터 행
│ </tbody> │
└──────────────────────────────┘
</table>
셀 병합 — colspan, rowspan#
엑셀에서 셀을 합치는 것처럼 HTML 표에서도 셀을 병합할 수 있습니다.
HTML
<table>
<tr>
<th colspan="3">2026년 성적표</th> <!-- 3칸을 하나로 -->
</tr>
<tr>
<td>1학기</td>
<td>2학기</td>
<td>평균</td>
</tr>
<tr>
<td rowspan="2">국어</td> <!-- 아래 행과 합침 -->
<td>90</td>
<td>85</td>
</tr>
</table>colspan="n": 오른쪽으로 n칸 병합rowspan="n": 아래로 n행 병합
직접 해보기 ✏️#
아래 두 가지를 HTML로 만들어 보세요.
1. 나의 취미 목록
- 좋아하는 것 3가지를 순서 없는 목록으로
- 올해 도전하고 싶은 것 3가지를 순서 있는 목록으로
2. 나의 시간표 (일부)
| 교시 | 월요일 | 화요일 | 수요일 |
|---|---|---|---|
| 1교시 | 국어 | 수학 | 영어 |
| 2교시 | 체육 | 과학 | 음악 |
이 표를 HTML <table> 태그로 만들어 보세요.
정리#
| 태그 | 용도 |
|---|---|
<ul><li> | 순서 없는 목록 (●) |
<ol><li> | 순서 있는 목록 (1, 2, 3) |
<table> | 표 전체 |
<tr> | 가로 행 |
<th> | 머리 칸 |
<td> | 데이터 칸 |
colspan | 가로 셀 병합 |
rowspan | 세로 셀 병합 |
다음 편에서는 사용자 입력을 받는 폼(<form>)과 버튼(<button>)을 만들어 봅니다.
