5일 차: 리스트와 표 만들기
학습 목표: HTML에서 리스트(ul, ol, li 태그)와 표(table, tr, td 태그)를 이해하고 사용하는 방법 배우기
1. 리스트 (Lists)
리스트는 항목들을 정리하고 나열하는 데 사용돼. HTML에는 두 가지 주요 리스트 유형이 있어: 순서 없는 리스트(unordered list)와 순서 있는 리스트(ordered list).
순서 없는 리스트 (ul)
순서 없는 리스트는 항목들이 순서 없이 나열될 때 사용돼. 각 항목은 보통 점(bullet)으로 표시돼.
예제:
html
<! DOCTYPE html>
<html>
<head>
<title>Unordered List </title>
</head>
<body>
<h1>My Favorite Foods </h1>
<ul>
<li>Pizza</li>
<li>Burger</li>
<li>Ice Cream </li>
<li>Sushi</li>
</ul>
</body>
</html>
설명:
<ul>: 순서 없는 리스트를 나타내는 태그.
<li>: 리스트의 각 항목을 나타내는 태그.
순서 있는 리스트 (ol)
순서 있는 리스트는 항목들이 순서대로 나열될 때 사용돼. 각 항목은 숫자로 표시돼.
예제:
html
<!DOCTYPE html>
<html>
<head>
<title>Ordered List </title>
</head>
<body>
<h1>Steps to Bake a Cake </h1>
<ol>
<li>Preheat the oven to 350°F (175°C). </li>
<li>Mix the ingredients. </li>
<li>Pour the batter into a pan. </li>
<li>Bake for 30 minutes. </li>
<li>Let it cool. </li>
</ol>
</body>
</html>
설명:
<ol>: 순서 있는 리스트를 나타내는 태그.
<li>: 리스트의 각 항목을 나타내는 태그.
2. 중첩 리스트 (Nested Lists)
리스트는 중첩할 수 있어. 즉, 하나의 리스트 항목 안에 또 다른 리스트를 포함할 수 있어.
예제:
html
<!DOCTYPE html>
<html>
<head>
<title>Nested Lists </title>
</head>
<body>
<h1>My Weekly Routine </h1>
<ul>
<li>Monday
<ul>
<li>Go to school </li>
<li>Do homework </li>
<li>Play soccer </li>
</ul>
</li>
<li>Tuesday
<ul>
<li>Go to school </li>
<li>Music lessons </li>
<li>Read a book </li>
</ul>
</li>
</ul>
</body>
</html>
설명:
<ul> 태그 안에 또 다른 <ul> 태그나 <ol> 태그를 포함시켜 중첩 리스트를 만들 수 있어.
3. 표 (Tables)
표는 데이터를 행(row)과 열(column)로 정리해서 보여줄 때 사용돼. 표는 여러 태그를 사용해서 구성돼: <table>, <tr>, <th>, <td>.
기본 표 예제:
html
<!DOCTYPE html>
<html>
<head>
<title>Basic Table </title>
</head>
<body>
<h1>Class Schedule </h1>
<table border="1">
<tr>
<th>Day</th>
<th>Subject</th>
<th>Time</th>
</tr>
<tr>
<td>Monday</td>
<td>Math</td>
<td>10:00 AM</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Science</td>
<td>11:00 AM</td>
</tr>
</table>
</body>
</html>
설명:
<table>: 표를 나타내는 태그.
<tr>: 표의 행(row)을 나타내는 태그.
<th>: 표의 헤더 셀을 나타내는 태그. 기본적으로 굵은 글씨와 가운데 정렬됨.
<td>: 표의 데이터 셀을 나타내는 태그.
테이블 속성들:
border: 테이블의 테두리를 지정해. 값은 픽셀 단위로 나타내며, border="1"은 1픽셀 두께의 테두리를 의미해.
4. 테이블에 스타일 추가하기
CSS를 사용해서 테이블의 스타일을 변경할 수 있어. 예를 들어, 테이블의 배경색, 테두리 스타일 등을 변경할 수 있어.
예제:
html
<!DOCTYPE html>
<html>
<head>
<title>Styled Table </title>
<style>
table {
width: 50%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Styled Class Schedule </h1>
<table>
<tr>
<th>Day</th>
<th>Subject</th>
<th>Time</th>
</tr>
<tr>
<td>Monday</td>
<td>Math</td>
<td>10:00 AM</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Science</td>
<td>11:00 AM</td>
</tr>
</table>
</body>
</html>
설명:
border-collapse: collapse;: 테이블 셀 사이의 테두리를 합쳐서 하나로 보이게 함.
th, td: 테이블 헤더와 데이터 셀에 적용되는 스타일.
padding: 셀 안의 여백을 설정.
text-align: 텍스트 정렬 방식(왼쪽, 오른쪽, 가운데 등).
5. 복잡한 표 만들기
테이블은 더 복잡하게 구성할 수도 있어. 예를 들어, 여러 행을 합치거나(rowspan), 여러 열을 합칠 수(colspan) 있어.
예제:
html
<!DOCTYPE html>
<html>
<head>
<title>Complex Table </title>
<style>
table {
width: 50%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Complex Class Schedule </h1>
<table>
<tr>
<th>Day</th>
<th>Morning</th>
<th>Afternoon</th>
</tr>
<tr>
<td>Monday</td>
<td>Math</td>
<td rowspan="2">Science</td>
</tr>
<tr>
<td>Tuesday</td>
<td>History</td>
</tr>
<tr>
<td>Wednesday</td>
<td colspan="2">PE</td>
</tr>
</table>
</body>
</html>
설명:
rowspan="2": 셀을 두 행에 걸쳐 합침.
colspan="2": 셀을 두 열에 걸쳐 합침.
6. 실습과 응용
이제 위에서 배운 내용을 토대로 연습해보자.
실습 1: 순서 없는 리스트 만들기
html
<! DOCTYPE html>
<html>
<head>
<title> Unordered List Practice </title>
</head>
<body>
<h1> My Favorite Movies </h1>
<ul>
<li> Inception </li>
<li> Interstellar </li>
<li> The Dark Knight</li>
<li>The Matrix </li>
</ul>
</body>
</html>
실습 2: 순서 있는 리스트 만들기
html
<! DOCTYPE html>
<html>
<head>
<title> Ordered List Practice </title>
</head>
<body>
<h1> My Morning Routine </h1>
<ol>
<li> Wake up </li>
<li> Brush teeth </li>
<li> Have breakfast </li>
<li> Go to school </li>
</ol>
</body>
</html>
실습 3: 기본 표 만들기
html
<! DOCTYPE html>
<html>
<head>
<title> Basic Table Practice </title>
</head>
<body>
<h1> Fruit Prices </h1>
<table border="1">
<tr>
<th> Fruit </th>
<th> Price per kg </th>
</tr>
<tr>
<td> Apple </td>
<td>$2 </td>
</tr>
<tr>
<td> Banana </td>
<td>$1 </td>
</tr>
</table>
</body>
</html>
이렇게 해서 오늘의 학습을 마쳤어. 오늘은 리스트와 표를 배웠어. 리스트는 데이터를 나열하는 데, 표는 데이터를 행과 열로 정리해서 보여주는 데 사용해. 내일은 HTML에서 폼(form)을 만드는 방법을 배워보자. 오늘도 잘했어!