[HTML 핵심강좌] 7. HTML 목록 요소

HTML 목록 요소는 텍스트, 링크, 이미지 등의 내용을 목록 형태로 구성할 수 있도록 하는 요소입니다. 목록 요소는 웹 페이지에서 정보를 구조화하고 시각적으로 구분하는 데 유용합니다. HTML에서는 주로 세 가지 목록 요소를 사용합니다: 순서 없는 목록(ul), 순서 있는 목록(ol), 정의 목록(dl)입니다.

 

1. ul 요소

Unordered List(순서 없는 목록)

목록의 항목을 점으로 나열합니다. 항목 간에는 구분선이 없이, 마크업 순서에 따라 순서가 지정됩니다.

<ul>
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

위 코드는 웹 브라우저에서 다음과 같이 표시됩니다.

• 항목 1
• 항목 2
• 항목 3

 

2. ol 요소

Ordered List(순서 있는 목록)

목록의 항목을 번호 또는 문자로 순서대로 나열합니다. 항목 간에는 구분선이 없이, 목록에 몇 개의 항목이 포함될지를 미리 지정할 수 있습니다.

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

위 코드는 웹 브라우저에서 다음과 같이 표시됩니다.

1. 첫 번째 항목
2. 두 번째 항목
3. 세 번째 항목

 

3. dl 요소

Description List(정의 목록)

용어와 그에 대한 정의를 나열합니다. 용어(dt)와 정의(dd)로 구성되며, dt는 굵은 글씨로 표시됩니다.

<dl>
  <dt>용어 1</dt>
  <dd>정의 1</dd>
  <dt>용어 2</dt>
  <dd>정의 2</dd>
  <dt>용어 3</dt>
  <dd>정의 3</dd>
</dl>

위 코드는 웹 브라우저에서 다음과 같이 표시됩니다.

용어 1

정의 1

용어 2

정의 2

용어 3

정의 3

 

위와 같이 사용하면, HTML 목록 요소를 통해 정보를 구조화하고 시각적으로 구분하여 표시할 수 있습니다.