HTML 독학 가이드 5 - 리스트와 테이블
쇼핑 목록, 할 일 목록, 메뉴 리스트… 웹에서 목록은 정말 많이 쓰여요. 그리고 데이터를 표로 정리하면 훨씬 보기 좋죠. HTML로 리스트와 테이블 만드는 건 정말 쉬워요!
순서 없는 리스트 (Unordered List)
불릿 포인트(●)로 표시되는 목록이에요.
기본 사용법
<ul>
<li>사과</li>
<li>바나나</li>
<li>딸기</li>
</ul>실행 결과:
- 사과
- 바나나
- 딸기
<ul>: unordered list (순서 없는 리스트)<li>: list item (항목)
중첩 리스트
리스트 안에 리스트를 넣을 수 있어요.
<ul>
<li>과일
<ul>
<li>사과</li>
<li>바나나</li>
</ul>
</li>
<li>채소
<ul>
<li>당근</li>
<li>브로콜리</li>
</ul>
</li>
</ul>실행 결과:
- 과일
- 사과
- 바나나
- 채소
- 당근
- 브로콜리
순서 있는 리스트 (Ordered List)
숫자로 표시되는 목록이에요.
기본 사용법
<ol>
<li>집에서 출발</li>
<li>지하철 타기</li>
<li>회사 도착</li>
</ol>실행 결과:
- 집에서 출발
- 지하철 타기
- 회사 도착
1, 2, 3으로 자동 번호가 붙어요.
시작 번호 변경
<ol start="5">
<li>다섯 번째</li>
<li>여섯 번째</li>
<li>일곱 번째</li>
</ol>실행 결과:
- 다섯 번째
- 여섯 번째
- 일곱 번째
5부터 시작해요.
역순 번호
<ol reversed>
<li>세 번째</li>
<li>두 번째</li>
<li>첫 번째</li>
</ol>실행 결과:
- 세 번째
- 두 번째
- 첫 번째
3, 2, 1로 표시돼요.
번호 스타일 변경
<!-- 알파벳 소문자 -->
<ol type="a">
<li>첫 번째</li>
<li>두 번째</li>
</ol>
<!-- 알파벳 대문자 -->
<ol type="A">
<li>첫 번째</li>
<li>두 번째</li>
</ol>
<!-- 로마 숫자 소문자 -->
<ol type="i">
<li>첫 번째</li>
<li>두 번째</li>
</ol>
<!-- 로마 숫자 대문자 -->
<ol type="I">
<li>첫 번째</li>
<li>두 번째</li>
</ol>실행 결과:
알파벳 소문자:
- 첫 번째
- 두 번째
알파벳 대문자:
- 첫 번째
- 두 번째
로마 숫자 소문자:
- 첫 번째
- 두 번째
로마 숫자 대문자:
- 첫 번째
- 두 번째
정의 리스트 (Description List)
용어와 설명을 함께 표시해요.
<dl>
<dt>HTML</dt>
<dd>웹 페이지의 구조를 만드는 마크업 언어</dd>
<dt>CSS</dt>
<dd>웹 페이지의 스타일을 꾸미는 언어</dd>
<dt>JavaScript</dt>
<dd>웹 페이지에 동작을 추가하는 프로그래밍 언어</dd>
</dl>실행 결과:
- HTML
- 웹 페이지의 구조를 만드는 마크업 언어
<dt><strong>CSS</strong></dt>
<dd>웹 페이지의 스타일을 꾸미는 언어</dd>
<dt><strong>JavaScript</strong></dt>
<dd>웹 페이지에 동작을 추가하는 프로그래밍 언어</dd><dl>: description list<dt>: description term (용어)<dd>: description definition (설명)
테이블 (Table)
데이터를 표 형태로 정리해요.
기본 구조
<table>
<tr>
<th>이름</th>
<th>나이</th>
</tr>
<tr>
<td>홍길동</td>
<td>25</td>
</tr>
<tr>
<td>김철수</td>
<td>30</td>
</tr>
</table>실행 결과:
| 이름 | 나이 |
|---|---|
| 홍길동 | 25 |
| 김철수 | 30 |
<table>: 테이블 시작<tr>: table row (행)<th>: table header (제목 셀)<td>: table data (데이터 셀)
테두리 추가
<table border="1">
<tr>
<th>제목1</th>
<th>제목2</th>
</tr>
<tr>
<td>데이터1</td>
<td>데이터2</td>
</tr>
</table>참고: CSS로 테두리를 만드는 게 더 좋아요.
thead, tbody, tfoot
테이블을 구조화할 수 있어요.
<table>
<thead>
<tr>
<th>상품명</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td>노트북</td>
<td>1,000,000원</td>
</tr>
<tr>
<td>마우스</td>
<td>20,000원</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>합계</td>
<td>1,020,000원</td>
</tr>
</tfoot>
</table>셀 병합
colspan - 가로 병합
<table border="1">
<tr>
<th colspan="2">이름</th>
</tr>
<tr>
<td>홍</td>
<td>길동</td>
</tr>
</table>실행 결과:
| 이름 | |
|---|---|
| 홍 | 길동 |
2개의 열을 합쳐요.
rowspan - 세로 병합
<table border="1">
<tr>
<td rowspan="2">홍길동</td>
<td>나이: 25</td>
</tr>
<tr>
<td>직업: 개발자</td>
</tr>
</table>실행 결과:
| 홍길동 | 나이: 25 |
| 직업: 개발자 |
2개의 행을 합쳐요.
실전 예제
할 일 목록
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>할 일 목록</title>
</head>
<body>
<h1>오늘 할 일</h1>
<ol>
<li>아침 먹기</li>
<li>운동하기
<ul>
<li>스트레칭 10분</li>
<li>런닝 30분</li>
</ul>
</li>
<li>업무 처리
<ol type="a">
<li>이메일 확인</li>
<li>회의 참석</li>
<li>보고서 작성</li>
</ol>
</li>
<li>저녁 먹기</li>
<li>독서 1시간</li>
</ol>
</body>
</html>실행 결과:
오늘 할 일
- 아침 먹기
- 운동하기
- 스트레칭 10분
- 런닝 30분
- 업무 처리
- 이메일 확인
- 회의 참석
- 보고서 작성
- 저녁 먹기
- 독서 1시간
메뉴 리스트
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>식당 메뉴</title>
</head>
<body>
<h1>메뉴판</h1>
<h2>한식</h2>
<ul>
<li>김치찌개 - 8,000원</li>
<li>된장찌개 - 7,000원</li>
<li>불고기 - 15,000원</li>
</ul>
<h2>중식</h2>
<ul>
<li>짜장면 - 6,000원</li>
<li>짬뽕 - 7,000원</li>
<li>탕수육 - 18,000원</li>
</ul>
</body>
</html>실행 결과:
메뉴판
한식
- 김치찌개 - 8,000원
- 된장찌개 - 7,000원
- 불고기 - 15,000원
중식
- 짜장면 - 6,000원
- 짬뽕 - 7,000원
- 탕수육 - 18,000원
성적표
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>성적표</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>2025년 1학기 성적표</h1>
<table>
<thead>
<tr>
<th>과목</th>
<th>중간고사</th>
<th>기말고사</th>
<th>평균</th>
</tr>
</thead>
<tbody>
<tr>
<td>국어</td>
<td>85</td>
<td>90</td>
<td>87.5</td>
</tr>
<tr>
<td>수학</td>
<td>90</td>
<td>88</td>
<td>89</td>
</tr>
<tr>
<td>영어</td>
<td>80</td>
<td>85</td>
<td>82.5</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">총 평균</th>
<td>86.3</td>
</tr>
</tfoot>
</table>
</body>
</html>실행 결과:
2025년 1학기 성적표
| 과목 | 중간고사 | 기말고사 | 평균 |
|---|---|---|---|
| 국어 | 85 | 90 | 87.5 |
| 수학 | 90 | 88 | 89 |
| 영어 | 80 | 85 | 82.5 |
| 총 평균 | 86.3 | ||
시간표
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>시간표</title>
</head>
<body>
<h1>주간 시간표</h1>
<table border="1">
<tr>
<th>시간</th>
<th>월</th>
<th>화</th>
<th>수</th>
</tr>
<tr>
<td>1교시</td>
<td>국어</td>
<td>수학</td>
<td>영어</td>
</tr>
<tr>
<td>2교시</td>
<td>수학</td>
<td>영어</td>
<td>과학</td>
</tr>
<tr>
<td>3교시</td>
<td colspan="3">체육</td>
</tr>
</table>
</body>
</html>실행 결과:
주간 시간표
| 시간 | 월 | 화 | 수 |
|---|---|---|---|
| 1교시 | 국어 | 수학 | 영어 |
| 2교시 | 수학 | 영어 | 과학 |
| 3교시 | 체육 | ||
자주 하는 실수
1. li를 ul/ol 밖에 쓰기
<!-- 틀림 -->
<li>항목1</li>
<li>항목2</li>
<!-- 맞음 -->
<ul>
<li>항목1</li>
<li>항목2</li>
</ul>2. 테이블 구조 틀리기
<!-- 틀림: tr 없이 td 사용 -->
<table>
<td>데이터</td>
</table>
<!-- 맞음 -->
<table>
<tr>
<td>데이터</td>
</tr>
</table>3. colspan/rowspan 계산 실수
<!-- 틀림: 3열인데 colspan="4" -->
<table>
<tr>
<td colspan="4">제목</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<!-- 맞음 -->
<table>
<tr>
<td colspan="3">제목</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>다음 단계
다음 글에서는 폼과 입력 요소를 배웁니다. 사용자 입력을 받는 입력창, 버튼, 체크박스 등을 만드는 방법을 알아볼 거예요.
리스트와 테이블은 정보를 구조화하는 핵심 요소예요. 잘 활용하세요!
HTML 독학 가이드 시리즈:
← 블로그 목록으로