03. HTML - 목록 태그

HTML에서 목록을 나타내기 위해서는 3가지의 목록 표시 방법이 있습니다.

<case>

1. 순서 있는 목록

2. 순서 없는 목록

3. 정의 목록

 

01. 순서 있는 목록(oi : ordered list)

순서 있는 목록은 <ol> 태그와 <li> 태그를 사용합니다.

<ol>은 1, 2, 3, ···처럼 차례대로 증가하는 번호가 붙는 목록이며, 목록의 내용은 <li>로 만듭니다.

그 밖에 순서를 지정하고 싶을때는 아래 태그를 사용할 수 있습니다.

•   <ol type=""> : 순서의 타입을 결정할 수 있습니다.
•   <ol start=""> : 원하는 부분부터 시작하고 싶을때 사용합니다.
•   <li value=""> : 특정 부분에 임의의 숫자를 넣고 싶을때 사용합니다.

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
</ol>

<ol type="I">
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
</ol>

<ol type="i">
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
</ol>

<ol start="11">
  <li>HTML</li>
  <li>CSS</li>
  <li value="20">Javascript</li>
</ol>

 

2. 순서 없는 목록(ui : unordered list)

순서 없는 목록은 번호 대신 점이나 사각형 등의 도형이 목록 앞에 붙으며, <ol> 태그와 <li> 태그를 사용합니다.

순서 없는 목록은 <ul>로, 목록의 내용은 <li>로 만듭니다.

<ul>
  <li>Front-end</li>
  <li>Back-end</li>
</ul>

 

3. 정의 목록(di : definition list)

정의 목록은 용어와 그 뜻을 나열할 때 사용합니다.

정의 목록은 <dl>로, 용어는 <dt>로, 그 뜻은 <dd>를 사용합니다.

<dl>
  <dt>HTML</dt>
  <dd>HTML represents HyperText Markup Language.</dd>
</dl>