HTML에는 3가지 유형의 목록 요소가 있습니다.
- 순서 없는 목록(가장 일반적)
- 순서가 있는 목록
- 설명 목록
순서 없는 목록
정렬되지 않은 목록은 <ul>로 정의됩니다. 요소 및 내부의 각 목록 항목은 <li>로 정의됩니다. 요소:
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>결과:
- 애플
- 바나나
- 주황색
기본적으로 정렬되지 않은 목록은 원형 글머리 기호로 스타일이 지정되지만 CSS로 사용자 지정할 수 있습니다.
순서 목록
순서가 지정된 목록은 <ol>로 정의됩니다. 요소 및 내부의 각 목록 항목은 <li>로 정의됩니다. 요소:
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ol>결과:
- 애플
- 바나나
- 주황색
기본적으로 정렬된 목록은 숫자로 표시되지만 CSS로 사용자 정의할 수 있습니다.
설명 목록
설명 목록은 순서가 지정된 목록 및 순서가 지정되지 않은 목록과 매우 다르게 작동합니다.
작동 방식은 다음과 같습니다.
<dl>요소는 설명 목록을 정의하며 상위 요소입니다.<dt>요소는 설명 목록 내에서 용어(이름)를 정의합니다(<dl>의 자식입니다). 요소).<dd>요소는 설명 목록 용어(<dt>)에 대한 설명, 정의 또는 값을 제공합니다. ) 바로 앞에 왔고<dl>의 자식이기도 합니다. 요소).
예:
<dl>
<dt>African Elephant</dt>
<dd>The worlds largest living land animal.</dd>
<dt>Giraffe</dt>
<dd>The tallest living animal on Earth.</dd>
<dt>Blue Whale</dt>
<dd>The largest animal ever (as we know it).</dd>
</dl>결과:
- 아프리카 코끼리
- 세계에서 가장 큰 살아있는 육상 동물.
- 기린
- 지구상에서 가장 키가 큰 살아있는 동물.
- 대왕고래
- 지금까지 알려진 것 중 가장 큰 동물입니다.
설명 목록은 현대 HTML에서 거의 사용되지 않습니다. 제가 본 가장 일반적인 사용 사례는 일종의 용어집을 만들거나 메타데이터를 표시하는 것입니다. 그러나 HTML에서 이를 수행하는 다른 많은 방법이 있습니다.