HTML 목록: 초보자를 위한 종합 가이드
안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 HTML 목록의 fascinling한 세계로 뛰어들어 보겠습니다. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 여러분을 이 여정을 안내하게 되어 기쁩니다. 목록은 웹 디자인의 미시적인 영웅들입니다. 그들은 혼란 속에 질서를 더하고 정보를 쉽게 이해할 수 있게 합니다. 그麼, 손을 걷어붙이고 목록 만들기 시작해 보겠습니다!
HTML에서의 목록
목록은 웹 페이지에서 정보를 조직하는 데 필수적인 부분입니다. 그들은 사용자가 쉽게 읽고 이해할 수 있도록 내용을 구조화하는 데 도움을 줍니다. HTML에서는 세 가지 주요 목록 유형이 있습니다:
- 비정렬 목록 (ul)
- 정렬 목록 (ol)
- 설명 목록 (dl)
이 각각을 자세히 탐구해 보겠습니다.
비정렬 목록
비정렬 목록은 여러분의 장보기 목록과 같습니다. 순서는 중요하지 않지만, 항목들은 중요합니다. 그들은 일반적으로 부호로 표시됩니다.
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>이 코드는 다음과 같이 렌더링됩니다:
- Apples
- Bananas
- Cherries
<ul> 태그는 비정렬 목록을 생성하며, 각 <li> 태그는 목록 항목을 나타냅니다.
정렬 목록
정렬 목록은 지시 사항과 같습니다. 순서가 중요합니다. 그들은 일반적으로 숫자로 표시됩니다.
<ol>
<li>Wake up</li>
<li>Brush teeth</li>
<li>Have breakfast</li>
</ol>이는 다음과 같이 표시됩니다:
- Wake up
- Brush teeth
- Have breakfast
<ol> 태그는 정렬 목록을 생성하며, <li> 태그는 각 항목을 나타냅니다.
설명 목록
설명 목록은 사전과 같습니다. 그들은 용어와 그 정의를 쌍으로 나열합니다.
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>이는 다음과 같이 렌더링됩니다:
HTML : HyperText Markup Language
CSS : Cascading Style Sheets
여기서 <dl> 태그는 설명 목록을 생성하며, <dt>는 용어를 정의하고, <dd>는 설명을 제공합니다.
HTML 목록 예제
이제 기본 내용을 다루었으므로, 몇 가지 더 많은 예제를 보아서 이해를固화해 보겠습니다.
할 일 목록
<h2>My To-Do List</h2>
<ul>
<li>Finish HTML tutorial</li>
<li>Practice coding</li>
<li>Take a coffee break</li>
<li>Start CSS tutorial</li>
</ul>이 코드는 비정렬 목록을 사용하여 간단한 할 일 목록을 생성합니다. 특정 순서가 필요하지 않을 때 완벽합니다.
레시피 지시
<h2>How to Make a PB&J Sandwich</h2>
<ol>
<li>Get 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>
<li>Enjoy your sandwich!</li>
</ol>이 정렬 목록은 순서가 중요한 단계별 지시에 완벽합니다.
HTML 중첩 목록
때로는 목록 안에 또 다른 목록을 만들어야 할 때가 있습니다. 이때 중첩 목록이 유용합니다.
<h2>Web Development Learning Path</h2>
<ol>
<li>Learn HTML
<ul>
<li>Tags</li>
<li>Attributes</li>
<li>Lists</li>
</ul>
</li>
<li>Learn CSS
<ul>
<li>Selectors</li>
<li>Properties</li>
<li>Box Model</li>
</ul>
</li>
<li>Learn JavaScript</li>
</ol>이 코드는 주요 주제들이 정렬 목록에 있고, 하위 주제들이 중첩된 비정렬 목록으로 나열됩니다.
<div> 태그로 그룹화
<div> 태그는 목록과 다른 요소들을 그룹화하고 스타일링하는 데 유용한 컨테이너입니다.
<div class="list-container">
<h3>My Favorite Fruits</h3>
<ul>
<li>Mangoes</li>
<li>Strawberries</li>
<li>Pineapples</li>
</ul>
</div>이 코드는 제목과 목록을 함께 그룹화하여 스타일링이나 조작을 쉽게 할 수 있게 합니다.
CSS를 사용하여 HTML 목록 스타일링
CSS는 목록의 외관을 변환할 수 있습니다. 간단한 예제를 보겠습니다:
<style>
ul.fancy {
list-style-type: square;
color: blue;
}
ol.fancy {
list-style-type: upper-roman;
color: green;
}
</style>
<ul class="fancy">
<li>Fancy unordered item 1</li>
<li>Fancy unordered item 2</li>
</ul>
<ol class="fancy">
<li>Fancy ordered item 1</li>
<li>Fancy ordered item 2</li>
</ol>이 CSS는 비정렬 목록의 부호를 사각형으로 바꾸고 색상을 파랑으로, 정렬 목록의 부호를 상단 로마 숫자로 바꾸고 색상을 녹색으로 변경합니다.
HTML 목록의 마커 타입
HTML은 목록에 다양한 마커 타입을 제공합니다. 다음 표는 요약입니다:
| 목록 유형 | 마커 속성 | 설명 |
|---|---|---|
| 비정렬 | disc | 기본. 채워진 원 |
| 비정렬 | circle | 공 Hollow 원 |
| 비정렬 | square | 채워진 사각형 |
| 정렬 | decimal | 기본. 숫자 (1, 2, 3) |
| 정렬 | lower-alpha | 소문자 (a, b, c) |
| 정렬 | upper-alpha | 대문자 (A, B, C) |
| 정렬 | lower-roman | 소문자 로마 숫자 (i, ii, iii) |
| 정렬 | upper-roman | 대문자 로마 숫자 (I, II, III) |
이를 CSS를 사용하여 적용할 수 있습니다:
<style>
ul.custom { list-style-type: square; }
ol.custom { list-style-type: lower-roman; }
</style>
<ul class="custom">
<li>Custom unordered item</li>
</ul>
<ol class="custom">
<li>Custom ordered item</li>
</ol>그리고 이렇게 되었습니다, 여러분! 우리는 HTML 목록의 세계를 여행했고, 기본에서 몇 가지 화려한 스타일까지 다루었습니다. 연습이 완벽을 만들어 준다는 것을 기억하세요, 그러니 다양한 목록 유형과 스타일을 실험해 보지 마세요. 누가 알겠습니까? 여러분이 HTML 목록의 미켈란젤로가 될지도 모릅니다!
행복한 코딩을 기원하며, 여러분의 목록이 항상 완벽하게 들여쓰기를 하기를 바랍니다!
Credits: Image by storyset