목록과 표로 정보 정리하기 — ul, ol, table

정보를 정리하는 두 가지 방법

정보를 전달할 때 문장으로만 늘어놓으면 읽기가 어렵습니다.

"오늘 마트에서 사과, 바나나, 우유, 계란, 두부를 사야 합니다."

이걸 목록으로 정리하면 훨씬 보기 쉽죠.

오늘 살 것:

사과

바나나

우유

계란

두부

HTML에는 이런 목록과 표를 만드는 전용 태그들이 있습니다.

순서 없는 목록 — `<ul>`과 `<li>`

ul은 unordered list(순서 없는 목록) 의 줄임말입니다. li는 list item(목록 항목) 입니다.

<ul>
  <li>사과</li>
  <li>바나나</li>
  <li>딸기</li>
</ul>

브라우저에서 보면 각 항목 앞에 ● 같은 점(bullet)이 생깁니다.

순서가 없는 목록에 씁니다. 예를 들어:

장보기 목록
기능 소개
메뉴 항목

순서 있는 목록 — `<ol>`과 `<li>`

ol은 ordered list(순서 있는 목록) 의 줄임말입니다.

<h2>라면 끓이는 방법</h2>
<ol>
  <li>냄비에 물 550ml를 붓습니다.</li>
  <li>물이 끓으면 면과 스프를 넣습니다.</li>
  <li>4분 30초 더 끓입니다.</li>
  <li>그릇에 담아 완성!</li>
</ol>

브라우저에서 보면 각 항목 앞에 1, 2, 3... 번호가 자동으로 붙습니다.

순서가 의미 있는 경우에 씁니다. 예를 들어:

요리 순서
설치 방법
순위

목록 안에 목록 — 중첩 목록

목록 안에 또 다른 목록을 넣을 수 있습니다.

<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>`

표는 여러 태그의 조합으로 만들어집니다.

<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 — 데이터 칸

표 구조를 그림으로 이해하기

<table>
  ┌──────────────────────────────┐
  │ <thead>                      │
  │  <tr>  [<th>] [<th>] [<th>] │  ← 머리 행 (굵게)
  │ </thead>                     │
  │ <tbody>                      │
  │  <tr>  [<td>] [<td>] [<td>] │  ← 데이터 행
  │  <tr>  [<td>] [<td>] [<td>] │  ← 데이터 행
  │ </tbody>                     │
  └──────────────────────────────┘
</table>

셀 병합 — colspan, rowspan

엑셀에서 셀을 합치는 것처럼 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>)을 만들어 봅니다.

정보를 정리하는 두 가지 방법

순서 없는 목록 — <ul>과 <li>

순서 있는 목록 — <ol>과 <li>