HTML - 리스트(List)

HTML 리스트는 관련된 항목들을 그룹화하는 데 사용되는 기능입니다. HTML에서는 세 가지 종류의 리스트를 제공합니다. 

1. 순서 없는 리스트(Unordered List) : 순서 없는 리스트는 <ul> 태그로 시작하며, 각 항목은 <li> 태그로 시작합니다. 기본적으로 항목은 작은 검은색 원으로 표시 됩니다.
ex)

<ul>
  <li>항목</li>
  <li>항목</li>
  <li>항목</li>
  <li>항목</li>
</ul>

 

2. 순서 있는 리스트(Ordered List) : 순서 있는 리스트는 <ol> 태그로 시작하며 , 각 항목은 <li> 태그로 시작합니다. 기본적으로 항목은 숫자로 표시되고 리스트의 번호 매기기 방식 type 속성으로 제어할 수 있습니다.
ex)

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

3. 설명 리스트(Description List) : 설명 리스트는 용어와 해당 용어의 설명으로 구성됩니다. <dl> 태그는 설명 리스트를 정의하며 <dt> 태그는 용어(이름)을 정의, <dd> 태그는 각 용어에 대한 설명을 제공합니다.
ex)

<dl>
  <dt>커피</dt>
  <dd>- 검은색 뜨거운 음료</dd>
  <dt>우유</dt> 
    <dd>- 흰색 차가운 음료</dd>
</dl>

 

순서 있는 리스트(Ordered List)의 type 속성에 대한 사용 예시를 보여드리겠습니다.

• 숫자로 번호 매기기 (기본 값)

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

 

1. Coffee
2. Tea
3. Milk

• 대문자 알파벳으로 번호 매기기

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

1. Coffee
2. Tea
3. Milk

• 소문자 알파벳으로 번호 매기기

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

1. Coffee
2. Tea
3. Milk

• 대문자 로마 숫자로 번호 매기기

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

1. Coffee
2. Tea
3. Milk

• 소문자 로마 숫자로 번호 매기기

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

1. Coffee
2. Tea
3. Milk

위와 같이 번호 표시 유형을 정의할 수 있고 start 속성을 이용하여 시작 번호를 지정할 수 있습니다.

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

50. Coffee
51. Tea
52. Milk

추가적으로 리스트 앞에 표시되는 마크들은 CSS를 통해서도 변경이 가능합니다. 추후 CSS 공부를 할 때 다시 한 번 알아보도록 하겠습니다.