5장: 리스트와 테이블
5.1 리스트
HTML에서는 순서가 있는 리스트와 순서가 없는 리스트를 만들 수 있습니다. 각각 `<ol>` 태그와 `<ul>` 태그를 사용합니다.
5.1.1 순서 있는 리스트 (`<ol>`)
순서 있는 리스트는 번호가 매겨진 항목들을 포함합니다. `<ol>` 태그를 사용하고, 각 항목은 `<li>` 태그로 감쌉니다.
**[HTML 코드 입력]**
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>순서 있는 리스트 예제</title>
</head>
<body>
<ol>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ol>
</body>
</html>
5.1.2 순서 없는 리스트 (`<ul>`)
순서 없는 리스트는 번호 대신 불릿 포인트가 매겨진 항목들을 포함합니다. `<ul>` 태그를 사용하고, 각 항목은 `<li>` 태그로 감쌉니다.
**[HTML 코드 입력]**
```html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>순서 없는 리스트 예제</title>
</head>
<body>
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ul>
</body>
</html>
5.2 테이블
HTML 테이블은 행과 열로 이루어진 데이터 표를 나타내는 데 사용됩니다. `<table>`, `<tr>`, `<th>`, `<td>` 태그를 사용하여 테이블을 구성합니다.
5.2.1 테이블 기본 구조
테이블의 기본 구조는 다음과 같습니다:
- `<table>`: 테이블을 정의합니다.
- `<tr>`: 행을 정의합니다.
- `<th>`: 헤더 셀을 정의합니다.
- `<td>`: 데이터 셀을 정의합니다.
**[HTML 코드 입력]**
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테이블 예제</title>
</head>
<body>
<table border="1">
<tr>
<th>이름</th>
<th>나이</th>
<th>직업</th>
</tr>
<tr>
<td>홍길동</td>
<td>30</td>
<td>개발자</td>
</tr>
<tr>
<td>이영희</td>
<td>25</td>
<td>디자이너</td>
</tr>
</table>
</body>
</html>
### 연습 문제
1. 순서 있는 리스트(`<ol>`)와 순서 없는 리스트(`<ul>`)를 각각 하나씩 작성해 보세요.
2. `<table>` 태그를 사용하여 간단한 테이블을 만들어 보세요. 예를 들어, 이름, 나이, 직업을 포함하는 테이블을 작성해 보세요.
댓글
댓글 쓰기