3일 차: 목록 태그 배우기
학습 목표: 순서 있는 목록(ol)과 순서 없는 목록(ul), 그리고 항목 태그(li)를 이해하고 사용하기
1. 순서 없는 목록 (ul)
순서 없는 목록은 항목들이 순서 없이 나열될 때 사용돼. 순서 없는 목록은 보통 점(bullet)으로 표시돼.
예제:
html
<! DOCTYPE html>
<html>
<head>
<title>Unordered List </title>
</head>
<body>
<h1>My Favorite Fruits </h1>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
<li>Date</li>
</ul>
</body>
</html>
설명:
<ul>: 순서 없는 목록을 나타내는 태그.
<li>: 목록의 각 항목을 나타내는 태그.
2. 순서 있는 목록 (ol)
순서 있는 목록은 항목들이 순서대로 나열될 때 사용돼. 순서 있는 목록은 숫자로 표시돼.
예제:
html
<!DOCTYPE html>
<html>
<head>
<title>Ordered List </title>
</head>
<body>
<h1>Steps to Make a Sandwich </h1>
<ol>
<li>Take two slices of bread. </li>
<li>Spread peanut butter on one slice. </li>
<li>Spread jelly on the other slice. </li>
<li>Put the slices together. </li>
</ol>
</body>
</html>
설명:
<ol>: 순서 있는 목록을 나타내는 태그.
<li>: 목록의 각 항목을 나타내는 태그.
3. 중첩 목록
목록을 중첩해서 사용할 수도 있어. 이는 하나의 목록 항목 안에 또 다른 목록을 포함시키는 것을 의미해.
예제:
html
<!DOCTYPE html>
<html>
<head>
<title>Nested List </title>
</head>
<body>
<h1>My To-Do List </h1>
<ul>
<li>Morning Routine
<ul>
<li>Wake up </li>
<li>Brush teeth </li>
<li>Have breakfast </li>
</ul>
</li>
<li>Work Tasks
<ol>
<li> Check emails </li>
<li>Attend meeting </li>
<li>Write report </li>
</ol>
</li>
<li>Evening Routine
<ul>
<li>Have dinner </li>
<li>Read a book </li>
<li>Go to bed </li>
</ul>
</li>
</ul>
</body>
</html>
설명:
<ul> 태그 안에 또 다른 <ul> 태그나 <ol> 태그를 포함시켜 중첩 목록을 만들 수 있어.
중첩 목록은 목록 항목 안에 또 다른 목록을 포함시키는 것을 의미해.
4. 목록의 스타일 변경하기
HTML 목록의 기본 스타일은 브라우저마다 다를 수 있지만, CSS(Cascading Style Sheets)를 사용해서 목록의 스타일을 변경할 수 있어.
예제:
html
<!DOCTYPE html>
<html>
<head>
<title>Styled List </title>
<style>
ul.custom-bullets {
list-style-type: square;
}
ol.custom-numbers {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<h1>Custom Styled Lists </h1>
<ul class="custom-bullets">
<li>Item 1 </li>
<li>Item 2 </li>
<li>Item 3 </li>
</ul>
<ol class="custom-numbers">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
</body>
</html>
설명:
list-style-type: 목록의 스타일을 지정하는 CSS 속성.
square: 순서 없는 목록에서 점 대신 네모를 사용.
upper-roman: 순서 있는 목록에서 숫자 대신 로마 숫자를 사용.
5. 연습과 응용
이제 위에서 배운 내용을 토대로 연습해보자.
실습 1: 순서 없는 목록 만들기
html
<!DOCTYPE html>
<html>
<head>
<title>Unordered List Practice </title>
</head>
<body>
<h1>My Favorite Books </h1>
<ul>
<li>Harry Potter </li>
<li>Lord of the Rings </li>
<li>To Kill a Mockingbird </li>
</ul>
</body>
</html>
실습 2: 순서 있는 목록 만들기
html
<!DOCTYPE html>
<html>
<head>
<title>Ordered List Practice </title>
</head>
<body>
<h1>My Daily 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>Nested List Practice </title>
</head>
<body>
<h1>My Weekend Plan </h1>
<ul>
<li>Saturday
<ul>
<li>Morning: Jogging </li>
<li>Afternoon: Coding practice </li>
<li>Evening: Movie night </li>
</ul>
</li>
<li>Sunday
<ul>
<li>Morning: Sleep in </li>
<li>Afternoon: Family time </li>
<li>Evening: Homework </li>
</ul>
</li>
</ul>
</body>
</html>
6. 복습과 정리
오늘은 HTML의 목록 태그에 대해 배웠어. 순서 없는 목록(ul)과 순서 있는 목록(ol), 그리고 목록 항목(li)을 사용하여 다양한 형태의 목록을 만들 수 있어. 또한, 목록을 중첩해서 더 복잡한 구조를 만들 수도 있어. CSS를 사용해서 목록의 스타일을 변경할 수도 있지. 이제 연습을 통해 배운 내용을 복습해보자. 다양한 목록을 만들어보고, 스타일을 적용해 보는 것도 좋은 연습이 될 거야. 내일은 링크와 이미지를 추가하는 방법을 배워보자. 이렇게 해서 오늘의 학습을 마쳤어. 오늘도 잘했어! 다음에도 재미있게 HTML을 배워보자.