[HTML] 리스트 태그 (ul, ol, dl)

■ HTML - 리스트 태그 (ul, ol, dl)

---

오늘은 간단하게 html에서 사용하는 리스트 태그에 대해 정리하겠습니다.

크게 <ul>, <ol>, <dl> 태그 3가지에 대해 정리하겠습니다.

● <ul> 태그

ul태그는 unordered list의 약자입니다. 즉 순서가 필요없는 리스트를 뜻하는 태그죠.

사용 예시를 보면 이해가 더욱 쉬울 것 같네요.

<사용법>

<ul>   <li>리스트1</li>   <li>리스트2</li> </ul>

<결과>

● 리스트1 ● 리스트2

위의 ul 태그의 기본 type은 disc로 ●마크가 표기되는게 보이시죠.

총 3가지 type이 존재합니다.

- ● : disc

- ○ : circle

- ■ : square

● <ol> 태그
ol태그는 ordered list의 약자입니다. 즉 순서가 있는 리스트를 뜻하는 태그죠.

여러 타입을 활용하여 순서가 있는 리스트를 표시해줍니다.

<사용법>

<ol>   <li>리스트1</li>   <li>리스트2</li> </ol>

<결과>

1. 리스트1 2. 리스트2

위의 ul 태그의 기본 type은 1로 숫자로 순서가 매겨집니다. 

이외 총 5가지 type이 존재합니다.

- 1 : 숫자 1, 2, 3, ...

- A : 알파벳 대문자 A, B, C, ...

- a : 알파벳 소문자 a, b, c, ...

- i : 로마기호 소문자 i, ii, iii, ...

- I : 로마기호 대문자 I, II, III, ...

또한 ol 태그는 start속성을 주어, 순서 시작값을 임의로 정할 수 있습니다.

아래 예는 A type을 사용하여 start값을 3으로 준 것입니다.

<사용법>

<ol type="A" start="3">   <li>리스트1</li>   <li>리스트2</li> </ol>

<결과>

C. 리스트1 D. 리스트2

이해가 되시나요? 그럼 다음 dl태그로 넘어가겠습니다.

● <dl> 태그

dl태그는 definition list의 약자입니다. 즉 정의 목록 리스트를 뜻하는 태그죠.

<dl>태그 안에는 2가지 태그로 구성되어 있습니다. 둘 다 줄바꿈을 지원합니다.

- <dt>라고 하는 제목을 나타내는 태그

- <dd>라고 하는 그 설명을 나타내는 태그

<사용법>

<dl>   <dt>정의 1</dt>   <dd>정의 1은 정의 1입니다.</dd>   <dt>정의 2</dt>   <dd>정의 2는 정의 1이 아닙니다.</br>   정의 2는 정의 2입니다.   </dd> </ol>

<결과>

정의 1     정의 1은 정의 1입니다. 정의 2     정의 2는 정의 1이 아닙니다.     정의 2는 정의 2입니다.

이런식으로 표기가 됩니다.

---

태그 이름이 매우 비슷해서 헷갈리기가 쉬운데요.

이렇게 정리하니 도움이 많이 되는 것 같네요. 한번 보시고 이상한 부분은 말씀주세요.

감사합니다.