[HTML] HTML 요소 : 리스트

리스트는 HTML에서 여러 항목을 나열할 때 사용하는 요소 종류는 크게 세 가지가 있다.

 

# 순서가 없는 리스트 ul(unordered list)

- 항목 앞에 ●(기본값), ○, ■ 같은 기호(불릿)가 붙는다.

<ul>
	<li>사과</li>
	<li>바나나</li>
	<li>포도</li>
</ul>

• 사과
• 바나나
• 포도

 

- css에서 list-style-type을 사용하면 기호 모양을 바꿀 수 있다.

ul {
    list-style-type: disc; /* ● 기본값 */
    list-style-type: circle; /* ○ 모양 기호 */
    list-style-type: square; /* ■ 모양 기호 */
    list-style-type: none; /* 기호 제거 */
}

 

---

# 순서가 있는 리스트 ol(ordered list)

- 순서(1,2,3,...) 를 매겨서 리스트의 항목을 표시

<ol>
    <li>첫 번째</li>
    <li>두 번째</li>
    <li>세 번째</li>
</ol>

1. 첫 번째
2. 두 번째
3. 세 번째

 

- type 속성으로 번호 스타일 변경 가능

<!-- type 속성의 값 종류
1 : 기본값 숫자
A : 대문자 알파벳
a : 소문자 알파벳
I : 대문자 로마 숫자
i : 소문자 로마 숫자
-->
<ol type="A">
    <li>항목 1</li>
    <li>항목 2</li>
</ol>

1. 항목 1
2. 항목 2

 

적용이 안돼 찾아보니

HTML5 에서는 <ol type="A">와 같은 type 속성이 더 이상 표준으로 사용되지 않는다고 한다.

해결방법은 CSS의 list-style-type을 사용하여 번호 스타일을 지정하면 된다!

<!-- list-style-type 속성 설명
upper-alpha: 대문자 알파벳
lower-alpha: 소문자 알파벳
upper-roman: 대문자 로마 숫자
lower-roman: 소문자 로마 숫자
-->
<ol style="list-style-type: upper-alpha;">
    <li>항목 1</li>
    <li>항목 2</li>
</ol>

 

- start 속성으로 시작 번호 지정

<ol start="5">
    <li>다섯 번째</li>
    <li>여섯 번째</li>
</ol>

5. 다섯 번째
6. 여섯 번째

 

- reversed 속성으로 역순 표시

<ol reversed>
    <li>첫 번째</li>
    <li>두 번째</li>
</ol>

1. 첫 번째
2. 두 번째

---

# 서술 리스트(description list)

- 어떤 용어와 그 설명을 묶을 때 사용

- dt 요소 : 용어/이름을 나열, 자동 줄바꿈

- dd 요소 : 용어/이름에 대한 설명을 제공할 때 사용, 자동 줄바꿈, 들여쓰기

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language의 약자</dd>

    <dt>CSS</dt>
    <dd>웹 페이지의 스타일을 지정하는 언어</dd>
</dl>

HTML

HyperText Markup Language의 약자

CSS

웹 페이지의 스타일을 지정하는 언어

---

# li(list item) 요소

- ul, ol 요소 내에서 공통으로 사용되는 자식 요소

- 리스트에서 각 항목의 내용을 표시할 때 사용

- 들여쓰기, 자동 줄바꿈, 종료태그 없이 사용 가능

- ol 요소에서 value="숫자" 로 항목 번호를 중간에 바꿀 수 있다.

<ol start="3">
    <li>세 번째 항목</li>  
    <li value="10">네 번째 항목</li>
    <li>다섯 번째 항목</li>          
</ol>

3. 세 번째 항목
10. 네 번째 항목
11. 다섯 번째 항목