[ HTML ] dl/ul/ol - list 정리 글 !

 

html에서의 목록 태그 정리

 

 

 

1.dl - 용어와 그에 대한 설명을 정의할 때 사용됩니다.

 

dl -목록태그 / dt - 용어의 제목 / dd - 용어의 설명

 

 반드시 dl태그 안에는 dt, dd태그만 위치할 수 있다.

원하는 화면을 만들기 위해서는 margin-left, margin-right로 간격을 줄 수 있습니다.

 

<dl>

<dt>토끼</dt>
<dd>토끼는 토끼목 토끼과의 포유류 동물이다. 꼬리가 짧고 귀가 긴 게 특징이다.</dd>

</dl>

 

 

 

2. ul - 비순차적 목록을 생성할 때 사용됩니다.

 

• 리스트 아이템
• 리스트 아이템
• 리스트 아이템
• 리스트 아이템

<nav>
  <ul>
	<li> 리스트 아이템 </li>
	<li> 리스트 아이템 </li>
	<li> 리스트 아이템 </li>
	<li> 리스트 아이템 </li>	
  </ul>
</nav>

 

 

---

 

3. ol - 순차적 목록을 생성 할 때 사용됩니다.

 

1. 리스트1
2. 리스트2
3. 리스트3
4. 리스트4

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

</ol>

 

---

 

list의 스타일 종류는 ?

 

li.list_01{list-style-type:none;}
li.list_02{list-style-type:disc;}
li.list_03{list-style-type:circle;}
li.list_04{list-style-type:square;}
li.list_05{list-style-type:decimal;}
li.list_06{list-style-type:decimal-leading-zero;}
li.list_07{list-style-type:upper-alpha;}
li.list_08{list-style-type:lower-alpha;}
li.list_09{list-style-type:upper-roman;}
li.list_10{list-style-type:lower-roman;}
li.list_11{list-style-type:upper-latin;}
li.list_12{list-style-type:lower-greek;}