 |
HTML 문서의 목록(DL, UL, OL) |  |
| 이전순서 | 다음순서 | 목차 | 엘레멘트 | 애트리뷰트 | HTML 규격 |
|
상위와 하위가 있는 체계화 된 목록을 만들 때 사용되면 그 종류는 정의목록(DL: definition list), 번호없는 목록(UL: unordered list), 번호있는 목록(OL: ordered list)의 3 가지가 있다. <DL>정의목록(DL: definition list)의 태그이며, 그 내용으로 갖는 엘레멘트는 정의 목록 제목(DT:definition title), 정의 목록 데이터(DD: definition data)가 있다. <DT>정의 목록의 제목(DT:definition title)이다. 자동 줄바꿈을 하고 들여쓰기는 하지 않는다. 종료태그는 선택적이다. <DD>정의 목록의 데이터(DD: definition data)이다. 자동 줄바꿈을 하고 들여쓰기를 한다. 종료태그는 선택적이다. 예제를 보면 <DL> <DT>정의 목록 제목 1 <DD>정의 목록 내용 1-1 <DD>정의 목록 내용 1-2 <DT>정의 목록 제목 2 <DD>정의 목록 내용 2-1 </DL>
<UL>번호없는 목록(UL: unordered list)의 태그이며, 그 내용으로 갖는 엘레멘트는 목록 항목(LI: list item)들이 들어 간다. <LI>목록 항목(LI: list item)이다. 자동 줄바꿈을 하고 들여쓰기를 한다. 종료태그는 선택적이다. <UL>와 <LI> 엘레멘트에서 공히 애트리뷰트로는 type이 있고 가능 한 값은 아래와 같다. 물론 <UL>에 type이 지정되는 경우 그 하위 <LI>에는 모두 같은 type이 적용된다.
각 값이 어떻게 나타나는가와 디폴트는 브라우저에 따라 다르다. 예제를 보면 <UL type="disc"> <LI>번호없는목록 항목 1 <LI>번호없는목록 항목 2 <LI>번호없는목록 항목 3 <UL type="circle"> <LI>번호없는목록 항목 3-1 <LI>번호없는목록 항목 3-2 </UL> <LI>번호없는목록 항목 4 <ul type="square"> <LI>번호없는목록 항목 4-1 </UL> </UL>
<OL>번호있는 목록(OL: ordered list)의 태그이며, 그 내용으로 갖는 엘레멘트는 목록 항목(LI: list item)들이 들어 간다. <LI>목록 항목(LI: list item)이다. 자동 줄바꿈을 하고 들여쓰기를 한다. 종료태그는 선택적이다. <OL>와 <LI> 엘레멘트에서 공히 애트리뷰트로는 type이 있고 가능 한 값은 아래와 같다. 물론 <OL>에 type이 지정되는 경우 그 하위 <LI>에는 모두 같은 type이 적용된다. <OL>의 추가적인 애트리뷰트로 start="3"가 있는데 이는 목록의 시작 번호를 지정한다. <LI>에서 번호를 지정하려면 value="5"를 사용한다.
예제를 보면 <OL type="A"> <LI>번호있는 목록 항목 1 <LI>번호있는 목록 항목 2 <LI>번호있는 목록 항목 3 <OL type="i"> <LI>번호있는 목록 항목 4 <LI>번호있는 목록 항목 5 </OL> <LI type="1">번호있는 목록 항목 6 <OL type="a" start="1"> <LI>번호있는 목록 항목 7 <LI>번호있는 목록 항목 8 </OL> </OL>
네스팅위의 정의목록(DL: definition list), 번호없는 목록(UL: unordered list), 번호있는 목록(OL: ordered list)의 3 가지를 조합하여 사용 할 수 있는데, 이 때 적정 한 네스팅(nesting)을 하여아 한다. 네스팅(nesting)이란 시작태그와 종료택그의 짝을 맞추되 구조에 맞게 닫아야 한다. 네스팅이 틀린 예제 : 네스팅이 맞는 예제 <OL> -----+ <UL> ----------+ <UL> -----+---+ <OL> -----+ | <LI> | | <LI> | | </OL> -----+ | </OL> -----+ | </UL> ---------+ </UL> ---------+ 이는 목록에서 뿐 아니라 모든 태그에 적용된다. 그러나 이와같은 논리가 틀릴 때 브라우저가 저절로 태그를 종료 시키는 경우도 많이 있으나, 상당히 많은 경우에 심각한 오류를 발생시키므로, 그 태그의 짝을 잘 맞추어야 하고, 생략해도 되는 태그틀도 생략하지 않으며, 코딩 할 때 구조에 따라 들여쓰기를 하는 이유도 된다. 네스팅이 잘 된 복합 목록의 예제를 보자. <OL type="1"> <LI>번호있는 목록 항목 1 <UL type="disc"> <LI>번호있는 목록 항목 1 중 - 번호없는 목록 항목 1-1 <LI>번호있는 목록 항목 1 중 - 번호없는 목록 항목 1-2 </UL> <LI>번호있는 목록 항목 2 <LI>번호있는 목록 항목 3 <DL> <DT>번호있는 목록 항목 3 중 - 정의 목록 제목 3-1 <DD>번호있는 목록 항목 3 중 - 정의 목록 항목 3-1-1 <OL type="a" start="5"> <LI>번호있는 목록 항목 3 중 - 정의 목록 항목 3-1-1 중 - 번호있는 목록 3-1-1-1 <LI>번호있는 목록 항목 3 중 - 정의 목록 항목 3-1-1 중 - 번호있는 목록 3-1-1-2 </OL> </DD> <DT>번호있는 목록 항목 3 중 - 정의 목록 제목 3-2 <DD>번호있는 목록 항목 3 중 - 정의 목록 항목 3-2-1 </DL> </LI> <LI value=4>번호있는 목록 항목 4 </OL>
기타 추가적인 애트리뷰트 등은 규격의 목록의 표현에 대한 자세한 정보를 참조하라. |