홈으로
| 무료회원가입 | 아이디/비번찾기
추천음악방송
HTML 문서의 목록(DL, UL, OL)
12년 전
상위와 하위가 있는 체계화 된 목록을 만들 때 사용되면 그 종류는 정의목록(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>
정의 목록 제목 1
정의 목록 내용 1-1
정의 목록 내용 1-2
정의 목록 제목 2
정의 목록 내용 2-1

 

<UL>

번호없는 목록(UL: unordered list)의 태그이며, 그 내용으로 갖는 엘레멘트는 목록 항목(LI: list item)들이 들어 간다.

<LI>

목록 항목(LI: list item)이다. 자동 줄바꿈을 하고 들여쓰기를 한다. 종료태그는 선택적이다.

<UL>와 <LI> 엘레멘트에서 공히 애트리뷰트로는 type이 있고 가능 한 값은 아래와 같다. 물론 <UL>에 type이 지정되는 경우 그 하위 <LI>에는 모두 같은 type이 적용된다.

  • <LI type=disc> 값이 "disc" 일 때: 꽉 찬 원으로
  • <LI type=circle> 값이 "circle" 일 때: 원의 테두리로
  • <LI type=square> 값이 "square" 일 때: 네모 꼴의 테두리로

각 값이 어떻게 나타나는가와 디폴트는 브라우저에 따라 다르다.

예제를 보면

<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>
  • 번호없는목록 항목 1
  • 번호없는목록 항목 2
  • 번호없는목록 항목 3
    • 번호없는목록 항목 3-1
    • 번호없는목록 항목 3-2
  • 번호없는목록 항목 4
    • 번호없는목록 항목 4-1

 

<OL>

번호있는 목록(OL: ordered list)의 태그이며, 그 내용으로 갖는 엘레멘트는 목록 항목(LI: list item)들이 들어 간다.

<LI>

목록 항목(LI: list item)이다. 자동 줄바꿈을 하고 들여쓰기를 한다. 종료태그는 선택적이다.

<OL>와 <LI> 엘레멘트에서 공히 애트리뷰트로는 type이 있고 가능 한 값은 아래와 같다. 물론 <OL>에 type이 지정되는 경우 그 하위 <LI>에는 모두 같은 type이 적용된다.

<OL>의 추가적인 애트리뷰트로 start="3"가 있는데 이는 목록의 시작 번호를 지정한다. <LI>에서 번호를 지정하려면 value="5"를 사용한다.

  1. <LI type="1"> 아라빅 숫자 1, 2, 3, ... 디폴트이다.
  2. <LI type="a"> 알파벳 소문자 a, b, c, ...
  3. <LI type="A"> 알파벳 대문자 A, B, C, ...
  4. <LI type="i"> 로만 소문자 i, ii, iii, ...
  5. <LI type="I"> 로만 대문자 I, II, III, ...

예제를 보면

<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>
  1. 번호있는 목록 항목 1
  2. 번호있는 목록 항목 2
  3. 번호있는 목록 항목 3
    1. 번호있는 목록 항목 4
    2. 번호있는 목록 항목 5
  4. 번호있는 목록 항목 6
    1. 번호있는 목록 항목 7
    2. 번호있는 목록 항목 8

 

네스팅

위의 정의목록(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>
  1. 번호있는 목록 항목 1
    • 번호있는 목록 항목 1 중 - 번호없는 목록 항목 1-1
    • 번호있는 목록 항목 1 중 - 번호없는 목록 항목 1-2
  2. 번호있는 목록 항목 2
  3. 번호있는 목록 항목 3
    번호있는 목록 항목 3 중 - 정의 목록 제목 3-1
    번호있는 목록 항목 3 중 - 정의 목록 항목 3-1-1
    1. 번호있는 목록 항목 3 중 - 정의 목록 항목 3-1-1 중 - 번호있는 목록 3-1-1-1
    2. 번호있는 목록 항목 3 중 - 정의 목록 항목 3-1-1 중 - 번호있는 목록 3-1-1-2
    번호있는 목록 항목 3 중 - 정의 목록 제목 3-2
    번호있는 목록 항목 3 중 - 정의 목록 항목 3-2-1
  4. 번호있는 목록 항목 4
추천추천 : 337 추천 목록
번호 제목
3,046
 Vimeo (비메오) API 를 사용하여 플레이어 컨트롤하기
3,045
 iframe 사용시 하단에 발생하는 공백 제거방법
3,044
 아이프레임(iframe) 전체화면 가능하게 하기
3,043
 부트스트랩(bootstrapk)에서 사용하는 class명 정리
3,042
 부트스트랩 CSS
3,041
 크롬에서 마진 조절
3,040
 PHP 현재 페이지의 도메인명이나 url등의 정보 알아오기
3,039
 PHP preg match all()
3,038
 PHP 로 웹페이지 긁어오기 모든 방법 총정리!
3,037
 [PHP] 원격지 파일 주소 노출 안하고 curl로 다운로드 받기
3,036
 PHP 함수 정리
3,035
 아이프레임(iframe) 비율 유지하면서 크기 조절하는 방법
3,034
 PHP 배열에서 무작위로 하나 뽑아주는 array rand() 함수
3,033
 PHP 정규식 정리
3,032
 PHP 정규식을 활용한 태그 및 특정 문자열 제거 및 추출 방법
3,031
 php 크롤링 또는 파싱 함수, 정규식 모음
3,030
 제이쿼리 기본 명령어
3,029
 웹페이지 가로 모드세로 모드 인식하기
3,028
 모바일 웹 화면 강제 회전(가로모드 고정)
3,027
 [HTML5]에서 frameset 대체 방법과 iframe 속성
3,026
 HTML <Audio> 사용법
3,025
 윈도우10 시스템파일 손상 (초간단 오류 복구방법!!)
3,024
 PHP 파일 존재 여부 파악하기(로컬 파일 존재 및 원격지 파일 존재)
3,023
 [CSS] 박스 세로 가운데 중앙 정렬 6가지
3,022
 CSS Layout 수평 & 수직 정렬
목록
뮤직트로트 부산광역시 부산진구 가야동 ㅣ 개인정보취급방침
Copyright (C) musictrot All rights reserved.