[HTML] 목록

HTML5에서는 목록형 문단의 글머리를 표현할 수 있는 방법으로 무순서 목록, 순서 목록, 정의형 목록을 제공한다.

 

무순서 목록

<ul> 태그를 사용하며 각 항목은 <li> 태그로 입력한다. ul은 unordered lists의 약자이고 li는 list item의 약자이다. 목록의 각 항목 앞에는 불릿이 붙는데, 불릿의 기본 모양은 검은색 작은 동그라미이다.

<ul>
    <li>순서 목록1</li>
    <li>순서 목록2</li>
</ul>

 

출력 결과

 

순서 목록

<ol> 태그를 사용하며 각 항목은 <li> 태그로 입력한다. ol은 ordered lists의 약자이다. 목록의 각 항목에는 기본값으로 type="1"이 적용되어 숫자 1부터 매겨진다. 다음 표는 <ol> 태그가 가질 수 있는 속성이다.

type	불릿 앞의 숫자 조정 예) a를 사용하면 알파벳으로 순서가 출력된다.
start	중간 번호부터 수정 예) 3을 이용하면 해당 타입의 3번째 순서가 시작 순서가 된다.
reserved	역순으로 표시

 <ol>
      <li>순서 목록1</li>
      <li>순서 목록2</li>
</ol>

 

출력 결과

 

정의형 목록

각 항목을 정의하기 위한 목록으로 <dl> 태그를 이용한다. 정의한 각 항목은 <dt> 태그를, 각 항목에 대한 설명은 <dd> 태그를 사용한다. dl은 definition lists의 약자이고, dt는 definition term의 약자이며, dd는 definition description의 약자이다.

<dl>
      <dt>항목1</dt>
      <dd>항목1 설명</dd>
      <dt>항목2</dt>
      <dd>항목2 설명</dd>
</dl>

 

출력 결과