[HTML] 목록 태그

*작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다.

 

웹 사이트에 무조건 있는 요소 중 하나는 내비게이션 메뉴이다.

메뉴바를 만들 때 주로 목록 태그를 사용하는데, 이번 게시글은 목록 태그에 대해서 다뤄보고자 한다.

 

목록 태그에는 ul, ol, dl 세가지가 있다.

주로 ul, ol을 사용하며 dl은 거의 사용하지 않는다.

 

1. Unordered List

순서가 없는 목록을 의미하며, 각 리스트 아이템 앞에 동그라미 점이 찍힌다.

<ul>태그를 사용하며, 태그 안의 리스트 아이템은 <li>를 사용한다.

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

 

 

2. Ordered List

순서가 있는 목록을 의미하며, 각 리스트 아이템 앞에 숫자가 생긴다.

<ol> 태그를 사용하며, 태그 안의 리스트 아이템은 <li>를 사용한다.

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

 

 

3. Description List

정의 목록을 표현하는 데 사용되며, 용어와 그 정의를 짝지어 나타낸다.

<dl> 태그를 사용하며, 용어는 <dt>태그를, 정의는 <dd> 태그를 사용한다.

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>