목록 태그 : 목록(List)을 만들 때 사용

 ul(unordered list) : 순서없는 목록

 ol(ordered list) : 순서 있는 목록

 li : 목록 요소, 목록의 내용, 들여쓰기 및 줄 바꿈 기능

 dl : 정의 목록

 dt : 용어의 제목, 줄바꿈 기능

 dd : 용어의 설명, 줄바꿈 기능

 

참조

 body 태그 안에서 쓰인다.

 목록 태그 안에 목록태그를 사용할 수 있다.

 

 

ul(unordered list) : 순서 없는 목록

형식

 <ul>    
   <li>문자열</li> 
 </ul>

 

예시 

 <ul>    
	<li>coffee</li> 
	<li>tea</li> 
	<li>milk</li> 
 </ul>

 

실행화면

 

 

ul 속성 & 속성 값

 style="list-style-type: disc"

 style="list-style-type: circle"

 style="list-style-type: square"

 style="list-style-type: none"

 

예시

<ul style="list-style-type: disc">
 	<li>disc : 기본값</li> 	
</ul>

<ul style="list-style-type: circle">
	<li>circle : 빈 동그라미</li> 
</ul>

<ul style="list-style-type: square"> 
	<li>square : 네모</li> 
</ul> 

<ul style="list-style-type: none">
	<li>none : 글자만</li>  
</ul> 

 

실행화면

 

 

 

ol(ordered list) : 순서 있는 목록

형식

 <ol>    
   <li>문자열</li> 
 </ol>

 

예시

 <ol>    
	<li>coffee</li> 
	<li>tea</li> 
	<li>milk</li> 
 </ol>

 

실행화면

 

 

ol 속성 & 속성 값

 start : 시작 번호 지정 (html5 / html4 type으로 시작번호 지정)

 type : type지정

 type 속성 값 : 1, a, A, i, I

 

예시

<!-- html5 시작번호 지정 start -->
<ol start="100">    
	<li>coffee</li> 
	<li>tea</li> 
	<li>milk</li> 
</ol>
 
<!-- type지정 : 1, a, A, i, I --> 
<ol type="1">       
	<li>type="1"</li> 
</ol> 

<ol type="a">       
	<li>type="a"</li> 
</ol> 

<ol type="A">      
	<li>type="A"</li> 
</ol> 

<ol type="i">      
	<li>type="i"</li> 
</ol> 

<ol type="I">      
	<li>type="I"</li> 
</ol> 

 

실행화면

 

 

 

dl : 정의 목록 dt: 정의 용어 dd : 정의 설명

예제

<dl>
	<dt>html tag</dt>
	<dd>제목 태그</dd>
	<dd>본문 태그</dd>
	<dd>글자 태그</dd> 
</dl>

 

실행화면

+ Recent posts