<ul>
일반적인 글이나 문장을 쓴다면 <p> 태그를 사용합니다. <ul> 태그는 일반적인 글 보다는 목록 형식의 글을 사용할 때 씁니다. 목록을 쓸 때 순서가 상관이 없다면 <ul> 태그를 사용하며, 순서가 상관이 있다면 <ol> 태그를 사용합니다. 무엇인가를 설명하고 정의할 때는 <dl> 태그를 사용합니다. 목록형 태그에는 각각의 항목이 있기 때문에 이 때에는 <li> 태그를 같이 사용해야 합니다. <dl> 태그의 경우에는 <dt> 또는 <dd>를 같이 사용합니다.
<li> 태그 안에는 또 다른 <ul> 태그 또는 <ol> 태그가 올 수 있으며, 2단 3단 목록형 태그로도 사용가능합니다. 목록형 태그를 사용하면 블릿기호가 생깁니다. ul 태그는 점과, 사각형 점이 생기고, ol 태그는 번호가 생기며, dl은 아무것도 생기지 않습니다. 이런 블릿기호는 CSS list-style-type에서 설정이 가능합니다.
<ul>
<ul> 태그는 순서가 없는 목록형 태그를 정의합니다.
| 특징 | 설명 |
|---|---|
| 요소 | 인라인 요소(Inline Element) |
| 닫는 태그 | 닫는 태그 사용(<ul> ~ </ul>) |
| 버전 | HTML4 |
| 시각적 표현 | 블릿기호가 생김 |
정의(Definition)
- <ul> 태그는 순서가 없는 목록을 정의합니다.
- <ul> 태그는 항목을 나타내는 <li>와 같이 사용됩니다.
- <ul> 태그를 사용하면 블릿 기호가 나타납니다. 보통 실무에선 블릿 기호가 브라우저마다 다르게 나오기 때문에 초기화하여 사용하지 않습니다.
비교(Compare)
- 일반적인 문장이나 글을 쓴다면 <p> 태그를 사용합니다.
- 순서가 필요없는 목록형 글을 쓴다면 <ul> 태그를 사용합니다.
- 순서가 필요한 목록형 글을 쓴다면 <ol> 태그를 사용합니다.
- 목록형 글의 항목은 <li> 태그를 사용합니다.
- 설명이나 정의가 필요한 목록형 글을 쓴다면 <dl> 태그를 사용합니다.
- 설명이나 정의가 필요한 목록형 글의 제목은 <dt> 태그를 사용합니다.
- 설명이나 정의가 필요한 목록형 글의 항목은 <dd> 태그를 사용합니다.
- 블릿 기호 수정은 CSS list-style-type에서 변경합니다.
샘플(Sample)
목록형 태그를 사용하면 블릿기호가 생깁니다. ul 태그는 점과, 사각형 점이 생기고, ol 태그는 번호가 생기며, dl은 아무것도 생기지 않습니다. 이런 블릿기호는 CSS list-style-type에서 설정이 가능합니다.
Sample1
순서가 필요없는 목록형 태그
- 용어를 설명하는 목록형 태그
- 제목을 설명하는 목록형 태그
- 제목을 설명하는 목록형 태그
순서가 필요한 목록형 태그
- 용어를 설명하는 목록형 태그
- 제목을 설명하는 목록형 태그
- 제목을 설명하는 목록형 태그
설명이 필요한 목록형 태그
- 목록형 태그란?
- 목록이 필요한 글에는 목록형 태그를 사용합니다.
html
<h3>순서가 필요없는 목록형 태그</h3>
<ul>
<li>용어를 설명하는 목록형 태그</li>
<li>제목을 설명하는 목록형 태그</li>
<li>제목을 설명하는 목록형 태그</li>
</ul>
<h3>순서가 필요한 목록형 태그</h3>
<ol>
<li>용어를 설명하는 목록형 태그</li>
<li>제목을 설명하는 목록형 태그</li>
<li>제목을 설명하는 목록형 태그</li>
</ol>
<h3>설명이 필요한 목록형 태그</h3>
<dl>
<dt>목록형 태그란?</dt>
<dd>목록이 필요한 글에는 목록형 태그를 사용합니다.</dd>
</dl>
샘플(Sample)
목록형 태그는 2단 또는 3단으로 사용할 수 있습니다. 블릿기호는 브라우저마다 다르게 나올 수 있습니다.
Sample1
순서가 필요 없는 목록형 태그
- 이것은 첫번째 목록입니다.
- 이것은 첫번째 목록입니다.
- 이것은 두번째 목록입니다.
- 이것은 두번째 목록입니다.
- 이것은 세번째 목록입니다.
- 이것은 세번째 목록입니다.
- 이것은 두번째 목록입니다.
- 이것은 첫번째 목록입니다.
html
<h3>순서가 필요 없는 목록형 태그</h3>
<ul>
<li>이것은 첫번째 목록입니다.</li>
<li>이것은 첫번째 목록입니다.
<ul>
<li>이것은 두번째 목록입니다.</li>
<li>이것은 두번째 목록입니다.
<ul>
<li>이것은 세번째 목록입니다.</li>
<li>이것은 세번째 목록입니다.</li>
</ul>
</li>
<li>이것은 두번째 목록입니다.</li>
</ul>
</li>
<li>이것은 첫번째 목록입니다.</li>
</ul>
호환성(Compatibility)
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <ul> | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
