HTML 기초 - 목록 리스트 태그 ul, ol, dl 차이점 (ol>li, ul>li, dl>dt+dd)

목록 리스트 태그 종류인 ul, ol, dl의 특징과 차이점을 알아보자!

 

목록을 나열하는 리스트 태그(List tag) 종류

 

1. <ol> → ol>li  

- 순서가 있는 목록 (Ordered List)

 

2. <ul> → ul>li 

- 순서가 없는 목록(Unordered List)

 

3. <dl> → dl>dt+dd 

- 용어를 정의하는 목록(Description List 또는 Definition List)

 

4. 하위태그 <li>

- 목록(List Item)

 

 

---

 

 

리스트 태그(목록태그)의 특징과 차이점

 

 

1. Ordered List :  순서가 있는 부모 ol 의 > 자식 li

<ol>  1,2,3,4 순서가 있는 나열, 부모 ol
    <li> 1. 자식 list </li>
    <li> 2. 자식 list </li>
    <li> 3. 자식 list </li>
</ol>

 

 

 

 

2. Unordered List : 순서가 없는 부모 ul 의 > 자식 li

<ul> 순서가 상관없이 나열된 부모 ul
     <li> 자식 li </li>
     <li> 자식 li </li>
     <li> 자식 li </li>
</ul>

 

 

 

 

 

 

추가로, 부모>자식으로 이루어진 두 태그는 짝지이다. (혼자 쓰일 수 없음)

짝만 잘 챙기면 서로의 태그 안에 쓰는 것도 가능하다.

 

=> 한 요소안에, 순서가 있는 부모 ol > 자식 li 과 순서가 없는 부모 ul > 자식 li 을 함께 쓸 수 있다.

=> ol>li>ul>li , ul>li>ol>li도 가능 한 것

 

<h1>아이돌 그룹</h1>
<ol>
	<li> 1. BTS
    	<ul>
            <li>진</li>
            <li>슈가</li>
            <li>제이홉</li>
            <li>RM</li>
            <li>지민</li>
            <li>뷔</li>
            <li>정국</li>
        </ul>
    </li>
    <li> 2. 블랙핑크(BLACKPINK) </li>
    <li> 3. 오마이걸(OHMYGIRL) </li>
    <li> 4. 에스파(aespa) </li>
    <li> 5. 스테이씨(STAYC) </li>
</ol>

 

(나같은) 코딩 초보에겐 복잡하다고 느껴질 수 있으니, 결과화면 참고하기!

 

 

순서 있는 아이돌 그룹이름(ol)과, 순서 없이 나열된 BTS 멤버이름(ul)의 결과화면 차이

 

 

 

 

 

 

3. description list (또는 definition list) : 용어와 해당 용어에 대한 정의 리스트.

   부모 dl 의 > 자식 dt + 자식 dd (형제)

 

<dl>
    <dt>바캉스</dt>
    <dd>- 피서나 휴양을 위한 휴가.</dd>
    <dt>산호바다</dt>
    <dd>- 산호가 살며 산호초가 형성되어 있는 바다.</dd>
</dl>

<dl>태그로 시작

<dt>에는 용어의 이름

<dd>에는 해당 용어에 대한 정의를 적는다.