HTML4 - LIST 태그 (UL , OL , DL 태그)

◎ <li> 태그

​

▶ UL OL DL 의 각 리스트들을 li 로 표시한다

---

◎ <ul> 태그

​

▶ 비순서형 목록 Unordered List

▶ <li> 요소 마다 블릿이 제공됨 ( 블릿 : 특수문자)

▶ 연속으로 나열된 콘텐츠를 표현

▶ 순서가 정해져있지않아 홈페이지 대메뉴 또는 소메뉴 등이 적합하다.

​

▼ CSS 특징

왼쪽과 오른쪽 여백이 있다.

<ul> 과 <li> 사이에는 그어떤 문자도 태그도 올수가 없다. 와도 표현이 안된다 (ul 과 li 는 1set)

<li> 와 </li> 사이에만 사용할수 있고 li 와 li 사이에는 사용할수 없다.

<li>와 </li> 사이엔 다른 <ul> 이 올수도 있다.

ex)

<ul> <li> <ul> <li>자유게시판1</li> <li>자유게시판2</li> <li>자유게시판3</li> </ul> </li> <li>길드홍보게시판</li> <li>스크린샷</li> <li>팬아트</li> </ul>

​

<ul> <li>자유게시판</li> <li>길드홍보게시판</li> <li>스크린샷</li> <li>팬아트</li> </ul>

---

◎ <ol> 태그

​

▶ 순서형 목록 Ordered List

▶ <li> 요소 마다 숫자 블릿이 제공됨

▶ 순위 또는 연속된 숫자의 리스트를 표현

​

▼ CSS 특징

왼쪽과 오른쪽 여백이 있다.

ol태그도 ul태그와 마찬가지로 ol과 li 사이에 다른태그는 올수없다.

또한 li태그 안에 또 ol과 ul 등의 리스트를 표현할수있다.

​

<ol> <li>대마도여행</li> <li>정글의법칙</li> <li>슈퍼스타k</li> <li>열혈강호</li> </ol>

​

<ol> <li>대마도여행</li> <ol> <li>1일차 비행기타기</li> <li>2일차 배타기</li> </ol> <li>정글의법칙</li> <li>슈퍼스타k</li> <li>열혈강호</li> </ol>

---

◎ 정의형 목록 태그

​

▶ <dl> 정의형 목록 지정 ( Defines a description List.)

▶ <dt> 용어 정의 (Defines Terms/names)

▶ <dd> 지정 정의 설명 (Describes each Term)

낱말 등 특정 단어를 정의할때 사용하는 요소 (국어사전 등)

제목 + 내용 형태로 범용적으로 사용하곤 한다.

​

▼ CSS 특징

dt는 있는그대로 나타나고 dd는 들여쓰기로 나타난다.

반드시 순서대로 표시 dl > dt > dd 무조건 3가지가 다 나타나야한다.

각 서로다른 태그 사이에는 ul ol 과 마찬가지로 다른태그를 넣을수는 없다.

<dl> <dt>웹</dt> <dd>=월드 와이드 웹 (Web)</dd> <dd>[명사]Web</dd> <dt>웹</dt> <dd>=월드 와이드 웹 (Web)</dd> <dd>[명사]Web</dd> </dl> //dt 두번 사용도 가능

---

​

​