HTML 리스트

HTML 리스트

리스트(list)란 여러 요소들을 일렬로 나열한 목록이나 명단을 의미합니다. HTML에서는 이러한 리스트를 표현하기 위해 다음과 같은 리스트를 제공하고 있습니다.

1. 순서가 없는 리스트(unordered list)
2. 순서가 있는 리스트(ordered list)
3. 정의 리스트(definition list)

순서가 없는 리스트(ul)

순서가 없는 리스트는 <ul>태그로 시작하며, 여기에 포함되는 각각의 리스트 요소는 <li>태그로 시작합니다. 각각의 리스트 요소 앞에는 기본 마커(marker)로 검정색의 작은 원(bullet)이 위치합니다.

<ul>
    <li>사과</li>
    <li>멜론</li>
    <li>바나나</li>
</ul>

CSS의 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는 마커(marker)를 다른 모양으로 변경할 수 있습니다.

 

- disc : 검정색 작은 원 모양 (기본설정)

- circle : 흰색 작은 원 모양

- square : 사각형 모양

순서가 있는 리스트(ol)

순서가 있는 리스트는 <ol>태그로 시작하며, 여기에 포함되는 각각의 리스트 요소는 <li>태그로 시작합니다. 각각의 리스트 요소 앞에는 기본 마커로 아라비아 숫자가 위치합니다.

<ol>
    <li>사과</li>
    <li>멜론</li>
    <li>바나나</li>
</ol>

CSS의 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는 마커(marker)를 다른 모양으로 변경할 수 있습니다.

 

- decimal : 숫자 (기본설정)

- upper-alpha : 영문 대문자

- lower-alpha : 영문 소문자

- upper-roman : 로마 숫자 대문자

- lower-roman : 로마 숫자 소문자

정의 리스트(dl)

정의 리스트(description list)는 용어와 그에 대한 정의를 모아놓은 리스트로 <dl>태그로 시작합니다. <dt>태그에는 용어의 이름이 들어가고, <dd>태그에는 해당 용어에 대한 정의가 들어갑니다.

<dl>
    <dt>호박</dt>
    <dd>- 박과의 한해살이 덩굴성 채소</dd>
    <dt>상추</dt>
    <dd>- 국화과의 한해살이 또는 두해살이풀</dd>
</dl>