Trio 홈페이지 - HTML 문서의 목록(list)

HTML은 제작자에게 정보 목록을 위 한 여러가지 기능을 제공한다. 모든 목록들은 하나 이상의 아래 목록 엘레멘트를 포함한다.

앞 목록 예제는 번호없는 목록으로 UL 엘레멘트로 만들어 진다.

<UL>
<LI>번호없는(unordered) 정보.
<LI>번호있는(ordered) 정보.
<LI>정의(definition).
</UL>

OL 엘레멘트로 만들어 지는 번호있는 목록(ordered)은 번호가 강조되는 정보에 아래와 같이 사용된다.

건조 된 원료를 잘 섞는다.
액상 원료를 붇는다.
10분간 혼합한다.
300도에서 한 시간 굽는다.

정의 목록(definition list)은 DL 엘레멘트로 만들어 지는데, 다른 것도 포함 할 수 있으나, 일반적으로 텀(term)/정의(definition)의 짝들로 이루어 진다.

제품을 광고 할 때 정의 목록을 사용 할 수 있다.

저렴한 가격: 새 버전의 이 제품은 이전의 것 보다 현저히 저렴하다!
사용 용이: 훨씬 사용하기 용이하게 변경하였다!
어린이 안전: 어린이를 이 제품과 함께 혼자 방에 두어도 다치지 않을 것이다(보증은 아님).

HTML로는:

<DL>
<DT><STRONG>저렴한 가격</STRONG>
<DD>새 버전의 이 제품은 이전의 것 보다 현저히 저렴하다!
<DT><STRONG>사용 용이</STRONG>
<DD>훨씬 사용하기 용이하게 변경하였다!
<DT><STRONG>어린이 안전</STRONG>
<DD>어린이를 이 제품과 함께 혼자 방에 두어도 다치지 않을 것이다(보증은 아님).
</DL>

목록은 차원을 달리하여 묶을 수 있고(nest), 다른 종류의 타입(type)을 같이 사용 할 수도 있다.

다음 예제에서 번호없는 목록(원료)과 번호있는 목록(과정)을 포함하는 목록을 기술 하였다.

원료:

100 g. 밀가루
10 g. 설탕
1 컵 물
2 개의 계란
소금, 후추가루

과정:

건조 된 원료를 잘 섞는다.
액상 원료를 붇는다.
10분간 혼합한다.
300도에서 한 시간 굽는다.

주석:

이 배합은 수지를 첨가하여 개선 할 수 있다.

이 세 목록의 타입의 정확한 표현은 사용도구에 따라 다르다. 목록을 순전히 텍스트의 들여 쓰기 목적으로 사용하는 것은 권하지 않는다. 이는 스타일에 관한 문제이고 스타일쉬트로 잘 처리 되기 때문이다.

10.2 번호없는 목록(UL), 번호있는 목록 (OL)과 목록 항목(LI)

<!ELEMENT UL - - (LI)+                 -- 번호없는 목록(unordered list) -->
<!ATTLIST UL
 %attrs;                              -- %coreattrs, %i18n, %events --
>
<!ELEMENT OL - - (LI)+                 -- 번호있는 목록(ordered list) -->
<!ATTLIST OL
 %attrs;                              -- %coreattrs, %i18n, %events --
>

애트리뷰트의 정의

type = style-information [대소문자 구별 없이: CI]: 불량한 것이다. 이 애트리뷰트는 목록 항목의 스타일(형태)를 설정한다. 현재의 사용 가능 한 값은 보는 사용도구를 위하여 제공 되었다. 가능 한 값들은 대소문자 구별 정보와 아래 함께 설명하였다.
start = number [대소문자 중립: CN]: 불량한 것이다. OL(번호있는 목록) 애트리뷰트에서 만 첫번째 항목에 시작 번호를 지정한다. 디폴트 시작 번호는 "1"이다. 이 애트리뷰트의 값은 정수이지만 수치가 아닐 수 있다. 목록 항목의 스타일이 영문자 대문자(A, B, C, ...)이고 start=3이면 "C"로 시작된다. 이때 스타일이 소문자 로만(roman)이면 "iii"로 시작된다.
value = number [대소문자 중립: CN]: 불량한 것이다. LI(목록 항목)에만 적용되며, 이 애트리뷰트는 현재 목록 항목의 번호를 설정한다. 이 애트리뷰트의 값은 정수이지만 수치가 아닐 수 있다(start 참조).
compact [대소문자 구별 없이: CI]: 불량한 것이다. 이 불린(boolean) 애트리뷰트가 설정되면, 보는 사용도구에게 목록을 압축하여 보이도록 알려 주는데, 표현은 사용도구에 따라 다르다.

번호있는 목록에서 목록 번호를 표시하는 것 이외에는, 번호있는 목록과 번호없는 목록은 보는 사용도구에서 같은 방식으로 표현 하지만, 사용도구에 따라 표현 방식이 다를 수 있다.

두 종류의 목록에서 목록 항목들은 LI 엘레멘트(종료태그 생략 가능)로 정의되어 순서대로 표현된다.

불량한 예제:

<UL>
    <LI> ... 수준 1, 번호 1 ...
    <OL>
       <LI> ... 수준 2, 번호 1 ...
       <LI> ... 수준 2, 번호 2 ...
       <OL start="10">
          <LI> ... 수준 3, 번호 1 (시작 10) ...
       </OL>
       <LI> ... 수준 2, 번호 3 ...
    </OL>
    <LI> ... 수준 1, 번호 2 ...
</UL>

번호 순서 세부사항. 번호있는 목록에서 이전의 목록 또는 일부 감춰진 목록 번호에서 자동적으로 연속 번호를 부여하는 것은 불가능하다. 그러나, 제작자는value 애트리뷰트로 번호를 재설정 할 수 있는데 이 새 값으로 부터 후속 항목의 번호가 계속된다.

10.3 정의 목록: DL, DT, DD 엘레멘트

<!-- 정의 목록 - 정의 텀(DT), 정의 내용(DD) -->
<!ELEMENT DL - - (DT | DD)+            -- 정의 목록(DL: definition list) -->
<!ATTLIST DL
 %attrs;                              -- %coreattrs, %i18n, %events --
>

<!ELEMENT DT - O (%inline;)*           -- 정의 텀(DT: definition term) -->
<!ELEMENT DD - O (%flow;)*             -- 정의 내용(DD: definition description) -->
<!ATTLIST (DT | DD)
 %attrs;                              -- %coreattrs, %i18n, %events --
>

정의 목록(definition list)은, 항목이 텀(term)과 내용(description) 두 부분으로 구성되어있다는 것 이외에는, 다른 두 종류의 목록과 거의 같다. 텀은 DT 엘레멘트로 지정 되는데 인라인(inline) 내용 만을 가질 수 있고, 내용(description)은 DD 엘레멘트로 지정 되는데 블럭레벨(block-level)의 내용을 가질 수 있다.

예제:

<DL>
 <DT>Dweeb
 <DD><EM>Nerd</EM> 또는 <EM>Geek</EM>로 성숙 할 수 있는 흥분 잘하는 젊은 사람
 <DT>Cracker
 <DD>인터넷 해거(hacker)
 <DT>Nerd
 <DD>자기 처의 생일을 잊어버리고 Net에 빠진 남자
</DL>

귀하의 브라우저로

Dweeb: Nerd 또는 Geek로 성숙 할 수 있는 흥분 잘하는 젊은 사람
Cracker: 인터넷 해거(hacker)
Nerd: 자기 처의 생일을 잊어버리고 Net에 빠진 남자

복수 텀(term)과 내용(description)을 갖는 예제:

<DL>
  <DT>쎈터(Center)
  <DT>쎈터(Centre)
  <DD> 구형의 표면의 모든 위치로 부터 같은 거리에 있는 점.
  <DD> 스포츠에서 운동장이나 앞 라인의 중앙에 위치 한 선수
</DL>

귀하의 브라우저로

쎈터(Center)
쎈터(Centre): 구형의 표면의 모든 위치로 부터 같은 거리에 있는 점.; 스포츠에서 운동장이나 앞 라인의중앙에 위치 한 선수.

10.3.1 목록의 보는 표현

주기: 아래에 현재의 보는 사용도구들에서 양식화 된 목록들에 대 해 어떻게 작용하는가를 설명 하였다. 스타일쉬트는 번호 붙치기, 언어에 따른 표현, 들여 쓰기 등 목록 양식화에 보다 나은 제어 수단을 제공한다.

보는 사용도구 일반적으로 네스팅의 수준에 맞게 들여 쓰기한다.

두 목록 OL과 UL 모두에서 type 애트리뷰트는 보는 사용도구를 위 한 선택 사항을 지정한다.

UL 엘레멘트에서 type 애트리뷰트의 가능한 값들은 disc, square와 circle이다. 디폴트 값은 현재 목록의 네스팅 수준에 따라 다르다. 그 값은 대소문자 구별 없이 사용된다.

각 값이 어떻게 나타나는가는 사용도구에 따라 다르다. 사용도구는 "disc"를 꽉 찬 원으로, "circle"을 원의 테두리로, "square"를 네모 꼴의 테두리로 표시한다.

값이 "disc" 일 때
가능한 circle 표현

값이 "circle" 일 때
가능한 square 표현

값이 "square" 일 때

OL 엘레멘트에서 type 애트리뷰트의 가능한 값을 아래 표에 정리하였다. 이들은 대소문자 구별하여 사용된다.

type 애트리뷰트는 불량한 것이며, 스타일쉬트로 목록 스타일이 처리 되어야 한다는 점에 주의하라.

예제에서 CSS를 사용하여 목록 엘레멘트에 숫자들의 스타일로 소문자 수치를 지정 할 수 있다. 아래의 예에서 클라스가 "withroman"로 지정 된 각 OL 엘레멘트는 이 목록 항목에 지정 된 로만 소문자 수치로 표시한다.

<STYLE type="text/css">
 OL.withroman { list-style-type: lower-roman }
</STYLE>
<BODY>
<OL class="withroman">
<LI> 첫번째 ...
<LI> 두번째 ...
</OL>
</BODY>

정의 목록도 사용도구에 따라 표현이 다른데, 예를 들면:

<DL>
 <DT>Dweeb
 <DD>young excitable person who may mature into a <EM>Nerd</EM> or <EM>Geek</EM>

 <DT>Cracker
 <DD>hacker on the Internet

 <DT>Nerd
 <DD>male so into the Net that he forgets his wife's birthday
</DL>

다음과 같이 표현된다.

Dweeb
      young excitable person who may mature into a Nerd or Geek
Cracker
      hacker on the Internet
Nerd
      male so into the Net that he forgets his wife's birthday

10.4 DIR, MENU 엘레멘트

DIR 엘레멘트는 복수 컬럼(column) 디렉토리(directory) 목록을 만들기 위하여 설계 되었고, MENU 엘레멘트는 단일 컬럼 메뉴(menu) 목록을 만들기 위하여 설계 되었다. 두 엘레멘트는 UL과 같은 구조를 갖고 다르게 표현한다. 사용도구는 DIR 또는 MENU 목록을 UL 목록과 꼭 같이 표현한다.

타입(type)	번호 붙이는 스타일
1	아라빅 숫자	1, 2, 3, ...
a	알파벳 소문자	a, b, c, ...
A	알파벳 대문자	A, B, C, ...
i	로만 소문자	i, ii, iii, ...
I	로만 대문자	I, II, III, ...

10.1 목록의 소개

10.2 번호없는 목록(`UL`), 번호있는 목록 (`OL`)과 목록 항목(`LI`)

10.3 정의 목록: `DL`, `DT`, `DD` 엘레멘트

10.3.1 목록의 보는 표현

10.4 `DIR`, `MENU 엘레멘트`

10.1 목록의 소개

10.2 번호없는 목록(UL), 번호있는 목록 (OL)과 목록 항목(LI)

10.3 정의 목록: DL, DT, DD 엘레멘트

10.3.1 목록의 보는 표현

10.4 DIR, MENU 엘레멘트

10.2 번호없는 목록(`UL`), 번호있는 목록 (`OL`)과 목록 항목(`LI`)

10.3 정의 목록: `DL`, `DT`, `DD` 엘레멘트

10.4 `DIR`, `MENU 엘레멘트`