53 lines
1.6 KiB
Markdown
53 lines
1.6 KiB
Markdown
# 목록
|
|
|
|
HTML에서 목록을 표현하는 데 사용되는 태그들은 웹 페이지의 가독성을 높이고 정보를 체계적으로 구성하는 데 중요한 역할을 합니다.
|
|
|
|
목록 안에 다른 목록을 중첩하여 복잡한 구조를 만들 수 있습니다.
|
|
|
|
## 순서 없는 목록 (Unordered List) - ul, li
|
|
목록의 항목들 간에 특별한 순서가 없을 때 사용합니다. 각 항목 앞에 불렛(bullet) 마커가 표시됩니다.
|
|
|
|
```html
|
|
<ul>
|
|
<li>첫 번째 항목</li>
|
|
<li>두 번째 항목</li>
|
|
<li>세 번째 항목</li>
|
|
</ul>
|
|
```
|
|
|
|
* `<li>` 태그는 `<ul>` 또는 `<ol>` 태그 안에서만 사용되며, 각 목록 항목을 나타냅니다.
|
|
|
|
## 순서 있는 목록 (Ordered List) - ol, li
|
|
목록의 항목들 간에 순서가 있을 때 사용합니다. 각 항목 앞에 숫자나 알파벳 등이 자동으로 부여됩니다.
|
|
```html
|
|
<ol>
|
|
<li>첫 번째 항목</li>
|
|
<li>두 번째 항목</li>
|
|
<li>세 번째 항목</li>
|
|
</ol>
|
|
```
|
|
|
|
## 목록에 스타일 적용하기
|
|
```css
|
|
ul {
|
|
list-style-type: square; /* 마커를 네모로 변경 */
|
|
}
|
|
ol {
|
|
list-style-position: inside; /* 숫자를 항목 안쪽으로 이동 */
|
|
}
|
|
```
|
|
|
|
## 정의 목록 (Definition List) - dl, dt, dd
|
|
용어와 설명을 짝으로 나타낼 때 사용합니다.
|
|
```html
|
|
<dl>
|
|
<dt>HTML</dt>
|
|
<dd>HyperText Markup Language의 약자로 웹 페이지를 만드는 언어입니다.</dd>
|
|
<dt>CSS</dt>
|
|
<dd>Cascading Style Sheets의 약자로 웹 페이지의 스타일을 정의하는 언어입니다.</dd>
|
|
</dl>
|
|
```
|
|
* `<dt>` 태그는 정의 목록에서 용어를 나타내고, `<dd>` 태그는 해당 용어에 대한 설명을 나타냅니다.
|
|
|
|
|