[HTML] 목록을 만드는 ul태그, ol태그, dl태그

목록(List)은 목차와 메뉴를 구성할 때 주로 사용하지만 그 외에도 웹 페이지의 다양한 곳에서 사용할 수 있다.

목록을 생성할 때 사용할 수 있는 태그로는 ul, ol, dl 태그가 있다.

 

1. ul 태그

ul(unordered list) 태그는 순서가 없는 비순서형 목록을 생성할 때 사용하며 목록 내용은 li(list item)태그로 구성한다.

형식)	<ul>
		<li>목록 내용 1</li>
	        <li>목록 내용 2</li>
	   	...........
	        <li>목록 내용 n</li>
       </ul>

코드 예시와 결과

ul 태그는 중첩해서 사용할 수 있다.

중첩 코드 예시 및 결과

2. ol 태그 

ol(ordered list) 태그는 순서형 목록을 생성할 때 사용한다. ul 태그와 마찬가지로 li 태그로 목록 내용을 구성한다.

형식)	<ol>
		<li>목록 내용 1</li>
	        <li>목록 내용 2</li>
	   	...........
	        <li>목록 내용 n</li>
       </ol>

ol 태그를 활용했을 때 목록내용에 번호가 붙은걸 확인 할 수 있다.

 

 

3. dl 태그

dl(description list) 태그는 정의형 목록을 만들때 사용한다.

정의형 목록은 용어와 용어 설명을 나열한 형태의 목록이다.

 

dl 태그로 목록을 생성할때는 li 태그 대신에 dt(description term)태그로 용어를 작성하고 dd(description details) 태그로 용어 설명을 작성한다.

형식)	<dl>
		<dt>용어 1</dt>
	   	<dd>용어 설명 1</dd>
	   	...........
       		 <dt>용어 n</dt>
	  	 <dd>용어 설명 n</dd>
       </dl>