4. 목록과 테이블
4.1 순서 있는 목록
순서 있는 목록 (ol) 태그
<ol>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ol>
<ol type="A">
<li>알파벳 A</li>
<li>알파벳 B</li>
</ol>
<ol start="5">
<li>5번부터 시작</li>
<li>6번 항목</li>
</ol>
실제 브라우저에서 보여지는 모습:
- 첫 번째 항목
- 두 번째 항목
- 세 번째 항목
- 알파벳 A
- 알파벳 B
- 5번부터 시작
- 6번 항목
4.2 순서 없는 목록
순서 없는 목록 (ul) 태그
<ul>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</ul>
<ul style="list-style-type: square;">
<li>사각형 불릿</li>
<li>사각형 불릿</li>
</ul>
4.3 중첩 목록
목록 안에 목록 넣기
<ul>
<li>메뉴 1
<ul>
<li>서브메뉴 1-1</li>
<li>서브메뉴 1-2</li>
</ul>
</li>
<li>메뉴 2
<ul>
<li>서브메뉴 2-1</li>
<li>서브메뉴 2-2</li>
</ul>
</li>
</ul>
4.4 기본 테이블
테이블 기본 구조
<table border="1">
<tr>
<th>제목 1</th>
<th>제목 2</th>
</tr>
<tr>
<td>내용 1</td>
<td>내용 2</td>
</tr>
</table>
4.5 테이블 확장
테이블의 다양한 속성
<table border="1">
<caption>학생 성적표</caption>
<thead>
<tr>
<th>이름</th>
<th>국어</th>
<th>영어</th>
<th>수학</th>
</tr>
</thead>
<tbody>
<tr>
<td>홍길동</td>
<td>90</td>
<td>85</td>
<td>95</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">평균: 90점</td>
</tr>
</tfoot>
</table>
실제 브라우저에서 보여지는 모습:
학생 성적표
| 이름 |
국어 |
영어 |
수학 |
| 홍길동 |
90 |
85 |
95 |
| 평균: 90점 |
4.6 실습 과제
다음 요구사항을 만족하는 웹 페이지를 만들어보세요:
- 제목: "나의 일주일 계획표"
- 요일별 할 일 목록 (순서 있는 목록 사용)
- 주간 식단표 (테이블 사용)
- 주간 목표 (순서 없는 목록 사용)
- 각 섹션에 적절한 제목 사용
예시 결과:
나의 일주일 계획표
요일별 할 일
- 월요일
- 화요일
주간 식단표
| 요일 |
아침 |
점심 |
저녁 |
| 월요일 |
샐러드 |
비빔밥 |
닭가슴살 |
| 화요일 |
토스트 |
김치찌개 |
샐러드 |
주간 목표
- HTML 기초 완성하기
- 매일 30분 운동하기
- 영어 단어 50개 외우기
4.7 퀴즈
다음 문제를 풀어보세요:
- 순서 있는 목록을 만들 때 사용하는 태그는 무엇인가요?
- 순서 없는 목록을 만들 때 사용하는 태그는 무엇인가요?
- 테이블의 행을 만들 때 사용하는 태그는 무엇인가요?
- 테이블의 제목 셀을 만들 때 사용하는 태그는 무엇인가요?
- 테이블에서 여러 열을 합칠 때 사용하는 속성은 무엇인가요?
정답:
- <ol> 태그
- <ul> 태그
- <tr> 태그
- <th> 태그
- colspan