HTML 목록 만들기

	<ol>
      <li>유튜브</li>
      <li>카카오톡</li>
      <li>인스타그램</li>
    </ol>

웹 문서에서 목록은 단순히 항목을 나열할 때 뿐만 아니라 CSS와 함께 사용하여 Navbar를 만들거나 컨텐츠를 배치하는 등 다양한 용도로 사용한다. 목록을 자유자재로 사용하기 위해 목록의 종류와 기본 특징을 알아본다.

 

목록 태그의 종류

목록 태그는 3종류가 있다.

• ol 태그
• ul 태그
• dl 태그

 

순서 목록을 만드는 <ol>, <li> 태그

순서 목록(Ordered List) 란 말 그대로 각 항목을 순서대로 나열한 것이다. 순서 목록 태그는 <ol>과 <li> 태그를 사용해 만든다.

    <ol>
      <li>유튜브</li>
      <li>카카오톡</li>
      <li>인스타그램</li>
    </ol>

 

 

 

순서 없는 목록을 만드는 <ul>, <li> 태그

순서 없는 목록(Unordered List)은 항목의 순서가 중요하지 않을 때 사용한다. <ul></ul> 태그 안에 <li></li> 태그를 삽입해서 사용한다.

ul은 항목 앞에 작은 원이나 사각형을 붙여서 구분하는데, 이런 작은 그림을 불릿(bullet)이라고 한다.

    <ul>
      <li>유튜브</li>
      <li>카카오톡</li>
      <li>인스타그램</li>
    </ul>

 

 

설명 목록을 만드는 <dl>, <dt>, <dd> 태그

설명 목록(Description List) 이란 이름(name)과 값(value) 형태로 구성된 목록을 의미한다. 사전에서 단어명과 설명이 있는 모습을 생각하면 된다.

설명 목록은 이름 부분을 지정하는 <dt> 태그와 값 부분을 설명하는 <dd> 태그로 구성된다.

 

    <dl>
      <dt>플랫폼 목록</dt>
      <dd>유튜브</dd>
      <dd>카카오톡</dd>
      <dd>인스타그램</dd>
    </dl>