12 생성된 내용, 자동 번호붙이기와 목록

경우에 따라, 제작자들은 사용도구들이 문서계통(document tree)으로부터 오지 않은 내용을 표현할 것을 원할 수가 있다. 자주있는 예제로는 번호있는 목록이 있다; 제작자가 목록에서 번호를 명시적으로 하지 않기를 원하고, 사용도구가 자동적으로 생성하기를 원할 수 있다. 유사하게, 제작자들은 사용도구가 단어 "Figure"를 그 도표의 제목 앞에 삽입하거나, 일곱번째 장의 제목 앞에 "Chapter 7"을 삽입하기를 원할 수 있다. 특히 오디오(audio)나 점자(braille)에서, 사용도구들은 이 문자열들을 삽입할 수 있어야 한다.

CSS2에서 내용이 여러가지 기능으로 생성될 수 있다:

• :before, :after 가상 엘레멘트(pseudo-element)들과 복합하여, 'content' 속성으로.
• 'cue-before', 'cue-after' 소리(aural) 속성(소리 스타일쉬트 참조)들로. 'content' 속성이 소리 속성들과 결합하면, 그들은 다음의 순서로 표현된다: :before, 'cue-before', ('pause-before'), 그 엘레멘트의 내용, ('pause-after'), 'cue-after', 그리고 :after 순서로.
• 'display' 속성의 엘레멘트 값 'list-item'로.

아래에서 내용('content') 속성과 연관된 기능들을 설명한다.

12.1 :before, :after 가상 엘레멘트(pseudo-element)

제작자들은 :before 와 :after 가상 엘레멘트들로 생성된 내용의 스타일과 위치를 지정한다. 그들의 이름들이 나타내는 바와 같이, :before 와 :after 가상 엘레멘트들은 지정한다. 내용의 위치를 엘레멘트의 문서계통(document tree) 내용 앞과 뒤를 지정한다. 'content' 속성은, 이들 가상 엘레멘트들과 조합하여, 무엇이 삽입되는가를 지정한다.

P.note:before { content: "Note: " }

엘레멘트에 의하여 생성된 양식화 개체(object: 예: 박스)는 생성된 내용을 포함한다. 따라서, 예를 들어 위 스타일쉬트를 아래와 같이 변경시키면:

P.note:before { content: "Note: " }
P.note { border: solid green }

이는 실선 녹색 테두리를 표현된, 최초(initial) 문자열을 포함한, 전 문단 주위에 생성한다.

:before 와 :after 가상 엘레멘트들은, 전달될 수 있는 속성들을, 문서계통(tree)에서 그 엘레멘트로 부터 그들이 부착된 것에 전달(inherit)한다.

Q:before { content: open-quote; color: red }

:before 또는 :after 가상 엘레멘트 선언에서, 전달되지 않는 속성들은 그들의 최초값들을 갖는다.

BODY:after {
   content: "The End"; display: block; margin-top: 2em; text-align: center;
}

사용도구들은, :before 와 :after 가상 엘레멘트들과 같이 있는 다음 속성들 무시하여야 한다: 위치('position'), 유동('float'), 목록(list), 테이블(table) 속성들.

:before 와 :after 가상 엘레멘트의 엘레멘트들은 값 'display'를 허용하는데, 속성은 다음과 같다:

• 선택자의 맞는 제목(subject)이 블럭레벨(block-level) 엘레멘트이면, 값들 'none', 'inline', 'block', 'marker'가 허용된다. 만일 'display'의 값이 다른 값이면, 가상 엘레멘트는 그 값이 'block'인 것과 같이 작용한다.
• 선택자(selector)의 맞는 제목(subject)이 인라인(inline-level) 엘레멘트이면, 허용되는 값들은 'none' 과 'inline'이다. 만일 'display'의 값이 다른 값이면, 가상 엘레멘트는 그 값이 'inline'인 것과 같이 작용한다.

12.2 내용('content') 속성

이 속성은 문서에서 내용을 생성하기 위하여 :before, :after 가상 엘레멘트들과 함께 사용된다. 값들은 다음의 의미를 갖는다:

<문자열>

텍스트 내용(항목 문자열 참조).

<uri>

이 값은 외부(external) 자원을 지정하는 URI이다. 만일 사용도구가, 지원하는 메디아(media) 타입들 때문에, 그 자원을 지원할 수 없으면, 그 자원을 무시하여야 한다. 주석. CSS2는 깔린 개체(embedded object)의 크기를 변경시키거나, HTML 이미지에서 "alt" 또는 "longdesc" 애트리뷰트들과 같은 텍스트 설명하는 기능은 제공하지 않는다. 이는 아마 CSS 향후 버전에서 허용될 것이다.

<counter>(카운터)

카운터들은, 'counter()' 또는 'counters()', 두가지 기능들로 지정할 수 있다: 앞의 것은 'counter(name)' 또는 'counter(name, style)'의 두가지 양식을 갖는다.
생성된 텍스트는 양식화 구조 이 단계에서 이름 지어진 카운터 값이 된다. 이는 style(디폴트는 'decimal')에 지정한 대로 양식화된다. 나중 기능도 'counter(name, 문자열)' 또는 'counter(name, 문자열, style)'의 두가지 양식을 갖는다. 생성된 텍스트는, 지정된 문자열에 의하여 분리된, 양식화 구조 이 단계에서 이름 지어진 카운터 값이된다. 이는 style(디폴트는 'decimal')에 지정한 대로 양식화된다. 추가 정보는 항목 자동 카운터와 번호붙이기를 참조하라.

open-quote와 close-quote

이 값들은 따옴표('quotes') 속성으로 부터의 적당한 문자열로 대체된다.

no-open-quote와 no-close-quote

빈(empty) 문자열을 삽입하는 것과 같이 아무것도 삽입하지 않으나, 네스트(nest)된 따옴표의 레벨을 증가 혹은 감소 시킨다.

attr(X)(애트리뷰트 문자열)

이 기능은 선택자(selector)의 맞는 제목(subject)를 위한 애트리뷰트(attribute) X의 값을 문자열로 돌려받는다. 그 문자열은 CSS 처리자(processor)에 의하여 해석(parse)되지 않은 것이다. 만일 선택자의 맞는 제목이 애트리뷰트 X를 가지고 있지 않으면, 빈 문자열로 돌아온다. 애트리뷰트 이름의 대소문자 구별성은 문서언어에 따라 다르다. 주석. CSS2에서, 선택자의 다른 엘레멘트들에서는, 애트리뷰트 값들을 참조하는 것이 불가능하다.

'display' 속성은 내용이 블럭(block), 인라인(inline), 또는 표시자(marker) 박스 안에 표시될 것인가를 제어한다.

제작자들은, 내용이 메디아에 민감하면, @media 명령들 안에 'content' 선언들을 넣어야 한다. 예를 들어, 텍스트는 어떤 메디아 구룹에서나 사용될 수 있으나, 이미지(image)들은 보이며 + 비트멥(bitmap) 메디아 구룹들에서 만 적용되고, 소리(sound) 화일은 소리 메디아 구룹에 만 적용된다.

@media aural {
   BLOCKQUOTE:after { content: url("beautiful-music.wav") }
}

IMG:before { content: attr(alt) }

제작자들은 생성된 내용 안에, 'content' 속성 다음에 하나의 "\A" 에스케입(escape) 문자열 구조를 기술하여, 새줄(newline)을 추가할 수 있다. 이는, HTML에서 BR 엘레멘트와 유사하게, 강제 줄바꿈을 삽입한다. "\A" 에스케입 구조의 추가 정보는 "문자열"와 "글자들과 대소문자"를 참조하라.

H1:before {
   display: block;
   text-align: center;
   content: "chapter\A hoofdstuk\A chapitre"
}

생성된 내용은 문서계통(tree)을 변경시키지 않는다. 특히, 이는, 예를 들어 다시 해석(reparsing)을 위하여, 문서언어 처리자(processor)에 되돌려 지지도 않는다.

12.3 :before, :after의 'compact', 'run-in' 엘레멘트들과의 작용

다음 상황들이 벌어진다:

1. 'run-in' 또는 'compact' 엘레멘트는 'inline' 타입의 한 :before 가상 엘레멘트를 갖는다.
   엘레멘트의 박스 크기가 계산되고('compact'에서), 그 엘레멘트와 같은 블럭 박스(block box) 안에서 표현될 때, 가상 엘레멘트(pseudo-element)는 작용된다.
2. 'run-in' 또는 'compact' 엘레멘트는 'inline' 타입의 한 :after 가상 엘레멘트를 갖는다.
   앞에 설명한 규칙이 적용된다.
3. 'run-in' 또는 'compact' 엘레멘트는 'block' 타입의 한 :before 가상 엘레멘트를 갖는다.
   가상 엘레멘트는 그 엘레멘트의 위에 블럭(block) 양식화되고, 그 엘레멘트 크기의 계산에('compact'에서) 참여하지 않는다.
4. 'run-in' 또는 'compact' 엘레멘트는 'inline' 타입의 한 :after 가상 엘레멘트를 갖는다.
   이 두 엘레멘트들과 그의 :after 가상 엘레멘트는 블럭 박스들로 양식화된다. 그 엘레멘트은 그 자체의 :after 가상 엘레멘트 인라인 박스(inline box)로 양식화되지 않는다.
5. 'run-in' 또는 'compact' 엘레멘트 다음의 엘레멘트는 'block' 타입의 :before를 갖는다.
   'run-in'/'compact' 엘레멘트를 어떻게 양식화하는 결정은 :before 가상 엘레멘트로 부터 만들어 진 블럭 박스에 대하여 이루어 진다.
6. 'run-in' 또는 'compact' 엘레멘트 다음의 엘레멘트는 'inline' 타입의 :before를 갖는다.
   'run-in'/'compact' 엘레멘트를 어떻게 양식화하는 결정은 :before 가상 엘레멘트로 부터 만들어 진 블럭 박스에 대하여 이루어 진다. :before가 부착된 엘레멘트의 'display' 값에 따라 다르다.

H3 { display: run-in }
H3:after { content: ": " }
P:before { content: "... " }

<H3>Centaurs</H3>
<P>have hoofs <P>have a tail

 Centaurs: ... have hoofs ... have a tail

12.4 따옴표

CSS2에서 제작자들은 스타일에 민감하고 문맥에 따르는, 사용도구들이 따옴표들을 어떻게 표현할 것인가 하는, 방식으로 지정할 수가 있다. 'quotes' 속성은 각 수준의 깔린(embed) 따옴표들에 따옴표들의 짝을 지정한다. 내용('content') 속성은 이들 따옴표들에 접근할 수 있게하고, 내용을 따옴표 앞과 뒤에 삽입되게 한다.

12.4.1 'quotes' 속성으로 따옴표 지정

이 속성은 어떤 수준이던 간에 깔린 따옴표들을 지정한다. 값들은 다음의 의미를 갖는다:

none

'content' 속성의 'open-quote' 와 'close-quote' 값들은 따옴표가 없는 것이다.

[<문자열>  <문자열>]+

'content' 속성의 'open-quote' 와 'close-quote' 값들은 따옴표들의 열림과 닫힘 짝들 목록으로 부터 얻어진다. 첫번째(가장 왼쪽) 짝은 가장 바깥 상위 따옴표, 두번째 짝은 첫번째 수준 안에 깔린(embed) 것, 등이고, 사용도구는 깔림 수준에 따라 따옴표 짝들을 적정하게 적용하여야 한다.

/* 두 언어들에서 두 수준의 따옴표 짝이 지정되었다.*/
Q:lang(ko) { quotes: '"' '"' "'" "'" }
Q:lang(no) { quotes: "⊂ "⊃ "<" ">" }

/* Q 엘레멘트 내용 앞과 뒤에 따옴표 삽입 */
Q:before { content: open-quote }
Q:after { content: close-quote }

<HTML lang="ko">
  <HEAD>
    <TITLE>Quotes</TITLE>
  </HEAD>
  <BODY>
    <P><Q>Quote me!</Q>
  </BODY>
</HTML>

 "Quote me!"

<HTML lang="ko">
  <HEAD>
    <TITLE>Quotes</TITLE>
  </HEAD>
  <BODY>
    <P><Q>Trøndere gråter når <Q>Vinsjan på kaia</Q> blir deklamert.</Q>
  </BODY>
</HTML>

⊂Trøndere gråter når <Vinsjan på kaia> blir deklamert.⊃

12.4.2 'content' 속성으로 따옴표 삽입

'content' 속성의 'open-quote'와 'close-quote' 값들로 따옴표들을 문서의 적당한 장소에 삽입한다. 각 'open-quote' 또는 'close-quote'가 나타나면 'quotes'의 값으로 부터의 네스팅의 깊이에 따라 문자열로 대체된다.

따옴표 열기('open-quote')는 따옴표 짝의 첫번째이고 따옴표 닫기('close-quote')는 두번째를 말한다. 이 따옴표 짝은 따옴표들의 네스팅의 수준에 따라 사용된다: 'open-quote'의 발생 갯수는, 현재 발생 이전의 모든 생성된 텍스트에서 'close-quote'이 발생 갯수를 뺀 수이다. 만일 수준이 0 이면, 첫번째 짝이 사용되고, 수준이 1 이면, 두번째 짝이 사용되는 등 만일 그 깊이 수준이 짝 수보다 크면, 마지막 짝이 반복된다.

이 따옴표 깊이는 원문(source) 또는 양식화 구조의 네스트에 따라 변하지는 않는다는 데 유의하라.

일부 인쇄술의 스타일들은 따옴으로 확장된 여러 문단들의 열림 따옴표들이 각 문단 앞에 반복하여 올 필요가 있으나, 마지막 문단의 끝에 만 닫힘 따옴표를 갖는다. CSS에서, 이는 "phantom" 닫힘 따옴표를 삽입함으로서 달성될 수 있다. 이 키워드(keyword) 'no-close-quote'는 따옴 수준을 감소시키지만, 따옴표를 삽입하지 않는다.

BLOCKQUOTE P:before { content: open-quote }
BLOCKQUOTE P:after { content: no-close-quote }
BLOCKQUOTE P.last:after { content: close-quote }

같은 방식으로, 'no-open-quote' 키워드(keyword)도 있는데, 이는 아무것도 삽입하지 않으나, 따옴표 수준을 하나 증가시킨다.

[LANG|=fr] > * { quotes: "\2282;" "\2283" "\2039" "\203A" }
[LANG|=en] >* { quotes: "\201C" "\201D" "\2018" "\2019" }

[LANG|=fr] >* { quotes: "⊂ "⊃ "‹" "›" }
[LANG|=en] >* { quotes: "“" "”" "‘" "’" }

12.5 자동 카운터(counter)와 번호붙이기(numbering)

CSS2에서 자동 번호붙이기는 'counter-increment'와 'counter-reset' 두 속성들에 의하여 제어된다. 이 속성들에 의하여 정의된 카운터들은 'content' 속성의 counter() 와 counters() 기능(function)들과 동반하여 사용된다.

'counter-increment' 속성은 인식자(identifier)들인 하나이상의 카운터들의 이름을 받는다. 각각은 선택적인 하나의 정수가 따라온다. 그 정수는 엘레멘트 각 발생에 얼마 만큼 카운터를 증가시킬 것인가를 지정한다. 디폴트(default) 증가는 1 이고, '0'과 음수 정수들이 허용된다.

'counter-reset' 속성 또한 카운터들의 하나이상의 목록 이름들을 포함하고, 각각은 선택적인 하나의 정수가 따라온다. 그 정수는 엘레멘트 발생 시 카운터 값을 주며, 디폴트는 '0' 이다.

만일 'counter-increment'가 어떤 'counter-reset' 범위(scope: 아래 참조)를 벋어난 카운터를 참조하면, 카운터는 최상위(root) 엘레멘트를 '0'으로 재설정하는 것으로 가정한다.

H1:before {
   content: "Chapter " counter(chapter) ". ";
   counter-increment: chapter;   /* chapter를 1 증가 */
   counter-reset: section;   /* 항목을 0 으로 설정*/
}
H2:before {
   content: counter(chapter) "." counter(section) " ";
   counter-increment: section;    /* section을 1 증가 */
}

만일 엘레멘트가 카운터를 증가하거나 재설정(reset)하고 이를 사용하면(그 'content' 속성에서 :before 또는 :after 가상 엘레멘트를 사용), 카운터는 증가/재설정된 다음에 수치가 사용된다.

엘레멘트가 카운터를 재설정한 후 증가시키면, 카운터는 처음으로 재설정되고 증가된다.

'counter-reset' 속성 다음에는 카스테이딩 명령들이 따라온다. 따라서, 카스케이딩 때문에 다음 스타일쉬트는:

H1 { counter-reset: section -1 }
H1 { counter-reset: imagenum 99 }

'imagenum' 만을 재설정한다. 두 카운터들을 다 재설정 하려면, 묶어서 지정하여야 한다:

H1 { counter-reset: section -1 imagenum 99 }

12.5.1 네스트된 카운터(nested)과 범위(scope)

카운터들은, 자식(child) 엘레멘트 안에 있는 카운터를 재 사용하는 것은 자동적으로 새로운 카운터 인스탠스(instance)를 생성한다는 견지에서, 자체적으로 네스팅("self-nesting")된다, 이는, 엘레멘트들은 그 자체 안에서 구조의 깊이에 따라 네스트될 수 있는, HTML의 목록(list) 같은 상황에서 중요하다. 각 수준에 유일하게 이름지워진 카운터들을 정의하는 것은 불가능 할 수 있다.

OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }

자체 네스팅(self-nesting)은 카운터 X에 'counter-reset'를 가진 각 엘레멘트는 새로운 카운터 X를 생성한다는 원칙에 따르고, 그의 범위(scope)는 그 엘레멘트, 그 앞의 형제(sibling)들과 그 엘레멘트의 모든 하위(descendant)들과 앞의 형제들이다.

위 예제에서, OL은 카운터를 생성하고, OL의 모든 자식(child)들은 그 카운터를 참조할 것이다.

<OL>  <!-- ( item[0]을 0으로 설정 -->
   <LI>item    <!-- item[0] 증가(= 1) -->
   <LI>item    <!-- item[0] 증가(= 2) -->
      <OL>      <!-- ( item[1]을 0으로 설정 -->
         <LI>item     <!--item[1] 증가(= 1) -->
         <LI>item     <!-- item[1] 증가(= 2) -->
         <LI>item     <!-- item[1] 증가(= 3) -->
            <OL>         <!-- ( item[2]을 0으로 설정 -->
               <LI>item     <!-- item[2] 증가(= 1) -->
            </OL>      <!-- ) -->
            <OL>     <!-- ( item[3]을 0으로 설정 -->
               <LI>     <!-- item[3] 증가(= 1) -->
            </OL>     <!-- ) -->
         <LI>item     <!-- item[1] 증가(= 4) -->
      </OL>     <!-- ) -->
   <LI>item     <!-- item[0] 증가(= 3) -->
   <LI>item     <!-- item[0] 증가(= 4) -->
</OL>     <!-- ) -->
<OL>     <!-- ( item[4]을 0으로 재설정 -->
   <LI>item     <!-- item[4] 증가(= 1) -->
   <LI>item  <!-- item[4] 증가(= 2) -->
</OL> <!-- ) -->

'counters()' function(기능)은 문자열을 생성한다. 모든 카운터들은 같은 이름을 가진, 주어진 문자열로 구분되는, 값들로 구성된다.

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, "."); counter-increment: item }

12.5.2 카운터 스타일(counter style)

디폴트로, 카운터들은 십진수들로 양식화되나, 모든 'list-style-type' 속성에서 허용되는 스타일들이 카운터들에서도 사용될 수 있다. 그 표시는:

counter(name)

는 디폴트(default) 스타일을 위한 것이고, 혹은:

counter(name, 'list-style-type')

'disc', 'circle', 'square', 'none'을 포함한 모든 스타일들이 허용된다.

H1:before { content: counter(chno, upper-latin) ". " }
H2:before { content: counter(section, upper-roman) " - " }
BLOCKQUOTE:after { content: " [" counter(bq, hebrew) "]" }
DIV.note:before { content: counter(notecntr, disc) " " }
P:before { content: counter(p, none) }

12.5.3 'display: none'의 엘레멘트에서 카운터(counter)

엘레멘트가 'display'가 'none'으로 설정되어 디스플레이되지 않는 경우에는 카운터를 증가시키거나 재설정할 수 없다.

H2.secret { counter-increment: count2; display: none}

'visibility'가 'hidden'으로 설정된 엘레멘트들은, 이와는 달리, 카운터들을 증가 시킨다.

12.6 표시자(marker)와 목록(list)

CSS에서 대부분 블럭레벨(block-level) 엘레멘트들은 하나의 기본(principal) 블럭 박스(block box)를 생성한다. 이 항목에서는, 엘레멘트가 두가지 박스들을 생성하도록 하는 CSS의 두가지 기능들을 다룬다: 하나는 그 엘레멘트의 내용을 위한 기본 블럭 박스이고, 다른 하나는 불렛(bullet), 이미지(image), 또는 수치와 같은 장식을 위한 별도의 표시자 박스(marker box)이다. 표시자 박스는 기본박스의 안 혹은 밖에 위치될 수 있다. :before 와 :after 내용과는 달리, 표시자 박스는 위치 맞추는 기능(positioning scheme)이 어떤 것이건 관계없이, 기본박스의 위치에는 영향을 주지 않는다.

CSS2의 더 일반적인 두가지 기능들은 새로운 것이고, 표시자(marker)들이라 한다. CSS1 추천안의 목록(list) 속성들이 더 제한된 기능들을 갖고있다. 목록 속성들은 제작자들에게 많은 일반적인 번호있는 목록과 번호없는 목록의 시나리오(scenario)들에서 빠른 결과를 주지 만, 표시자들은 제작자들에게 표시자의 내용과 위치에 정밀한 제어를 제공한다. 표시자들은 새로운 스타일들을 생성, 마진(margin) 주석들에 번호붙임, 기타 등등을 위하여 카운터들과 함께 사용될 수 있다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>표시자(marker)로 생성된 목록</TITLE>
    <STYLE type="text/css">
      LI:before {
         display: marker;
         content: counter(mycounter, lower-roman) ".";
         counter-increment: mycounter;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <OL>
       <LI> This is the first item.
       <LI> This is the second item.
       <LI> This is the third item.
    </OL>
  </BODY>
</HTML>

 i. This is the first item.
ii. This is the second item.
iii. This is the third item.

하위(descendant) 선택자(selector)들과 자식(child) 선택자들로, 깔린(embedded) 목록들의 차원에 따라 다른 표시자(marker) 타입들은 지정하는 것이 가능하다.

12.6.1 표시자(marker): 'marker-offset' 속성

:before 또는 :after 가상 엘레멘트(pseudo-element)의 안에 'display' 속성을 'marker'로 설정함으로서 표시자들은 생성된다. 'block'과 'inline'인 :before 와 :after 내용은 엘레멘트에 의하여 생성된 기본박스의 일 부분이므로, 'marker' 내용은 기본박스 밖, 독립된 표시자 박스(marker box) 안에 양식화된다. 표시자 박스들은, 유동(float)들보다는 탄력성이 없어 하나의 라인 박스(line box)로 단일 줄(line)에 양식화된다. 표시자 박스는 가상 엘레멘트의 'content' 속성이 내용을 실제적으로 생성할 경우에만 생성된다.

표시자 박스들은 패딩(padding)과 테두리(border)들을 가지나, 마진(margin)은 갖지 않는다.

:before 가상 엘레멘트(pseudo-element)에서는, 표시자 박스 안의 텍스트 기초라인은 기본박스 안의 내용 첫번째 줄 안의 텍스트 기초라인(baseline)에 수직적으로 정렬된다. 만일 기본박스가 텍스트를 포함하고 있지 않으면, 표시자 박스의 맨위 바깥쪽 모서리(outer edge)가 기본박스의 맨위 바깥쪽 모서리에 정렬된다. :after 가상 엘레멘트에서는, 표시자 박스 안의 텍스트 기초라인은 기본박스 안의 내용 마지막 줄 안의 텍스트 기초라인에 수직적으로 정렬된다. 만일 기본박스가 텍스트를 포함하고 있지 않으면, 표시자 박스의 바닥 바깥쪽 모서리가 기본박스의 바닥 바깥쪽 모서리에 정렬된다.

표시자 박스의 높이는 'line-height' 속성에 의하여 주어진다. :before (:after) 표시자 박스는 기본(principal) 박스 안의 처음(최종) 라인 박스(line box)의 높이 계산에 참여한다. 따라서, 표시자 박스들이 명확한 라인 박스들 안에 있다 하더라도, 표시자들은 엘레멘트의 내용의 첫번째와 마지막 줄에 정렬된다. 기본박스 안에 처음 또는 마지막 라인 박스가 없다면, 표시자 박스는 그 라인 박스 하나 만을 형성한다.

표시자 박스의, 그 라인 박스 안에서, 수직정렬은 'vertical-align' 속성에 의하여 지정된다.

'width' 속성이 'auto'이면, 표시자 박스 내용의 너비는 그 내용의 너비이고, 아니면 'width' 값이다. 'width'값이 내용 너비보다 작으면, 'overflow' 속성이 넘처흐름(overflow) 기능을 지정한다. 표시자 박스들은 기본박스들과 겹쳐질 수 있다. 'width' 값이 내용 너비보다 넓으면, 'text-align' 속성이 표시자 박스 내용의 수평 정렬을 결정한다.

'marker-offset' 속성은 표시자 박스와 관련 기본박스(box)사이의 수평 오프세트(offset)을 지정한다. 그 길이는 그들의 가장 가까운 테두리(border) 모서리들사이의 거리이다. 주석. 만일 표시자 왼쪽에서 오른쪽으로(ltr: left-to-right)의 양식화 문맥에서 오른쪽으로의 유동이면, 기본박스는 유동의 오른쪽 면(side) 아래로 흐를 것이나, 표시자 박스들은 유동의 왼쪽에 나타난다. 기본박스의 왼쪽 테두리 모서리는 유동(float)의 왼쪽에 위치하고, 표시자 박스들은 기본박스의 테두리 모서리 밖에 위치하므로, 표시자(marker)도 유동의 왼쪽에 오게 된다. 표시자가 유동의 왼쪽으로 흐르면, 같은 방식으로 오른쪽에서 왼쪽으로(rtl: right-to-left)의 양식화에 적용된다.

엘레멘트에서 'display: list-item'로 생성된 내용에 'display' 속성이 값 'marker'를 가지면, ':before'를 위해 생성된 표시자 박스는 일반 목록 항목 표시자(marker)를 대체한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
   <HEAD>
      <TITLE>표시자 박스(marker box) 안에서중앙에 정렬 </TITLE>
      <STYLE type="text/css">
         LI:before {
            display: marker;
            content: "(" counter(counter) ")";
            counter-increment: counter;
            width: 6em;
            text-align: center;
         }
      </STYLE>
   </HEAD>
   <BODY>
      <OL>
         <LI> This is the first item.
         <LI> This is the second item.
         <LI> This is the third item.
      </OL>
   </BODY>
</HTML>

(1)    This is the
first item.
(2)    This is the
second item.
(3)    This is the
third item.

다음 예제는 목록 항목 앞과 뒤에 표시자(marker)들을 생성한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
   <HEAD>
      <TITLE>목록 항목 앞과 뒤에 표시자(marker)들</TITLE>
      <STYLE type="text/css">
         @media screen, print {
            LI:before {
              display: marker;
              content: url("smiley.gif");
            }
            LI:after {
               display: marker;
               content: url("sad.gif");
            }
         }
      </STYLE>
   </HEAD>
   <BODY>
      <UL>
         <LI>first list item comes first
         <LI>second list item comes second
      </UL>
   </BODY>
</HTML>

:-) first list item
comes first      :-(
:-) second list item
comes second     :-(

다음 예제는 문단들에 번호를 주는 표시자(marker)들을 사용한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
   <HEAD>
      <TITLE>표시자(marker)들이 문단들에 번호를 생성한다.</TITLE>
      <STYLE type="text/css">
         P { margin-left: 12 em; }
         @media screen, print {
            P.Note:before {
               display: marker;
               content: url("note.gif")
               "Note " counter(note-counter) ":";
               counter-increment: note-counter;
               text-align: left;
               width: 10em;
            }
         }
      </STYLE>
   </HEAD>
   <BODY>
      <P>This is the first paragraph in this document.</P>
      <P CLASS="Note">This is a very short document.</P>
      <P>This is the end.</P>
   </BODY>
</HTML>

이는 다음과 같이 나타난다:

This is the first paragraph
in this document.

Note 1: This is a very short
document.

This is the end.

이 속성은 가장 가까운 표시자 박스(marker box)의 테두리 모서리들과 그 관련 기본박스의 테두리 모서리사이의 거리를 지정한다. 그 오프세트(offset)는 사용자 정의 <길이> 또는 'auto'에 의해 사용도구가 선택한 값이 될 수 있다. 길이는 음수가 될 수 있으나, 특정 적용 한계가 있을 수 있다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
   <HEAD>
      <TITLE>표시자(marker) 예제 5</TITLE>
      <STYLE type="text/css">
         P { margin-left: 8em } /* 카운터(counter)들에 공간 제공 */
         LI:before {
            display: marker;
            marker-offset: 3em;
            content: counter(mycounter, lower-roman) ".";
            counter-increment: mycounter;
         }
      </STYLE>
   </HEAD>
   <BODY>
      <P> This is a long preceding paragraph ...
      <OL>
         <LI> This is the first item.
         <LI> This is the second item.
         <LI> This is the third item.
      </OL>
      <P> This is a long following paragraph ...
   </BODY>
</HTML>

This is a long preceding
paragraph ...

i.   This is the first item.
ii.   This is the second item.
iii.   This is the third item.

This is a long following
paragraph ...

12.6.2 목록(list): 'list-style-type', 'list-style-image', 'list-style-position', 'list-style' 속성

목록(list) 속성들은 목록의 기본 보이는 양식화를 허용한다. 보다 일반적인 표시자(marker)들로서, 'display: list-item'를 갖는 엘레멘트는 그 엘레멘트의 내용과 선택적 표시자 박스를 위하여 기본박스(box)를 생성한다. 제작자 목록 속성들은 제작자들로 하여금 표시자 타입(이미지, 그림문자, 또는 번호)과 기본박스에 대하여(밖 또는 그 안에서 내용 앞에) 위치를 지정할 수 있게 한다. 이들은 제작자들이 목록 표시자에서 스타일(색상, 글꼴, 정렬, 등)을 지정하거나, 기본(principal) 박스에 대한 그 위치를 조정하는 것을 허용하지 않는다.

나아가, 표시자 M('display: marker'로 생성된)이 목록 속성들에 의하여 생성된 목록 항목과 함께 사용될 때, M 은 표준 목록 항목 표시자를 대체한다.

목록 속성들로, 배경 속성들이 기본박스에 만 적용된다; 'outside' 표시자 박스는 투명하다. 표시자들은 표시자 박스 스타일에 추가적 인 제어를 공제한다.

표시자 'list-style-image' 값이 'none' 이거나 URI에 의하여 지시된 이미지가 디스플레이될 수 없을 때, 이 속성은 목록 항목의 형태를 지정한다. 값이 'none'으로 지정되면 표시자가 없는 것이고, 그렇지 않으면, 그림문자들, 번호붙이기(numbering) 체계와 알파베트 체계, 세가지 형태의 표시자가 될 수 있다. 주석. 번호 있는 목록은 더 쉽게 항해할 수 있도록 목록을 만듦으로서 문서의 접속성을 제고한다.

그림문자들은 disc, circle, square 등으로 지정한다. 정확한 표현은 사용도구에 따라 다르다.

번호붙이기(numbering) 체계는:

decimal

1로 시작하는 십진수.

decimal-leading-zero

최초 0(zero)으로 되는 십진수 (예: 01, 02, 03, ..., 98, 99).

lower-roman

소문자 로만(roman) 숫자 (i, ii, iii, iv, v, 등).

upper-roman

대문자 로만(roman) 숫자 (I, II, III, IV, V, 등).

hebrew

전통적 희랍어(Hebrew) 번호붙이기.

georgian

전통적 Georgian 번호붙이기 (an, ban, gan, ..., he, tan, in, in-an, ...).

armenian

전통적 Armenian 번호붙이기.

cjk-ideographic

단순한 표의 문자(ideographic) 번호

hiragana

히라가나 a, i, u, e, o, ka, ki, ...

katakana

가다가나 A, I, U, E, O, KA, KI, ...

hiragana-iroha

히라가나 i, ro, ha, ni, ho, he, to, ...

katakana-iroha

가다가나 I, RO, HA, NI, HO, HE, TO, ...

어떤 번호붙이기 체계를 인식하지 못하는 사용도구는 'decimal'을 사용하여야 한다.

알파베트 체계는 다음과 같이 지정된다:

lower-latin 또는 lower-alpha

소문자 아스키(ascii) 글자 (a, b, c, ... z).

upper-latin 또는 upper-alpha

대문자 아스키(ascii) 글자 (A, B, C, ... Z).

lower-greek

소문자 전통적 그리스(Greek) 알파베트 alpha, beta, gamma, ... (έ, ή, ί, ...)

이 규격은 알파베트 체계에서 알파베트 맨 뒤에 어떻게 순환할 것인가를 정의하지 않았다. 예를 들어, 26 개의 목록 항목 뒤에, 'lower-latin' 표현이 정의되지 않았다. 따라서, 긴 목록들에서는 제작자들이 숫자들을 사용할 것을 추천한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>소문자 영어(latin) 번호붙이기</TITLE>
    <STYLE type="text/css">
      OL { list-style-type: lower-roman }
    </STYLE>
  </HEAD>
  <BODY>
    <OL>
      <LI> This is the first item.
      <LI> This is the second item.
      <LI> This is the third item.
    </OL>
  </BODY>
</HTML>

i This is the first item.
ii This is the second item.
iii This is the third item.

이 속성은 목록 항목 표시자(marker)로 사용될 이미지를 설정한다. 이미지가 있으면, 이는 'list-style-type' 표시자(marker)로 설정된 표시자(marker)를 대체할 것이다.

UL { list-style-image: url("http://png.com/ellipse.png") }

이 속성은 기본(principal) 블럭 박스(block box) 안에서 표시자 박스의 위치를 지정한다. 값들은 다음의 의미를 갖는다:

outside(외부)

표시자 박스(marker box)는 기본 블럭 박스 밖에 있다. 주석. CSS1에서는 표시자 박스의 정밀한 위치가 정의되지 않았었으며, 공통으로 사용될 수 있는 성격(compatibility)의 이유로, CSS2에서도 거의 같은 수준으로 모호한 상태로 남아있다. 표시자 박스들의 더 정밀한 제어를 위하여, 표시자들을 사용하라.

inside(내부)

표시자 박스는 기본l 블럭 박스 안의 첫번째 인라인 박스이며, 그 다음에 그 엘레멘트의 내용 흐름(flow)이 적용된다.

예제:

<HTML>
   <HEAD>
      <TITLE> inside/outside 위치의 비교</TITLE>
      <STYLE type="text/css">
         UL{ list-style: outside }
         UL.compact { list-style: inside }
      </STYLE>
   </HEAD>
   <BODY>
      <UL>
         <LI>first list item comes first
         <LI>second list item comes second
      </UL>

      <UL class="compact">
         <LI>first list item comes first
         <LI>second list item comes second
      </UL>
   </BODY>
</HTML>

위 예제는 다음과 같이 양식화된다:

[D]

오른쪽에서 왼쪽으로(right-to-left)의 텍스트에서, 표시자들은 박스의 오른쪽에 기준을 둘 것이다.

'list-style' 속성은 스타일쉬트의 같은 곳에 'list-style-type', 'list-style-image', 'list-style-position' 세가지 속성들을 설정하는 약식 명령이다.

UL { list-style: upper-roman inside }  /* 어떤 UL */
UL > UL { list-style: circle outside }   /* UL의 어떤 UL 자식(child) */

제작자들은 목록 항목 엘레멘트(예: HTML에서LI)들에 직접적으로 'list-style' 정보를 지정할 수 있지 만, 주의하여야 한다. 다음 명령들은 보기에 비슷하지 만, 첫번째는 하위(descendant) 선택자를 선언하고, 두번째는 추가적인 자식(child) 선택자를 지정한다.

OL.alpha LI { list-style: lower-alpha } /* OL의 어떤 LI 하위(descendant) */
OL.alpha > LI { list-style: lower-alpha } /* OL의 어떤 LI 자식(child) */

하위 선택자 만을 사용하는 제작자들은 기대하는결과를 얻지 못할 수 있다. 다음 명령들을 보자:

<HTML>
   <HEAD>
      <TITLE>경고: 카스케이드 때문에 기대하지 않았던 효과가 발생</TITLE>
      <STYLE type="text/css">
         OL.alpha LI { list-style: lower-alpha }
         UL LI { list-style: disc }
      </STYLE>
   </HEAD>
   <BODY>
      <OL class="alpha">
         <LI>level 1
           <UL>
              <LI>level 2
           </UL>
      </OL>
   </BODY>
</HTML>

요구되는 표현은 목록 수준 1은 'lower-alpha' 라벨, 수준 2는 'disc' 라벨 일 수 있으나, 카스케이딩 순서는 특정 클라서 정보를 포함하는 첫번째 스타일 명령이 두번째를 안보이게(mask) 할 수 있다. 다음 명령들은 대신 자식 선택자를 채용 함으로서 문제를 해결한다:

OL.alpha >LI { list-style: lower-alpha }
UL LI { list-style: disc }

다른 해결 방법은 목록 타입 엘레멘트들에 만 'list-style' 정보를 지정하는 것이다:

OL.alpha { list-style: lower-alpha }
UL { list-style: disc }

전달(inheritance)은 OL과 UL 엘레멘트들로 부터 'list-style' 값들을 LI 엘레멘트에 준다. 이것이 목록 스타일 정보를 지정하는데 추천되는 방식이다.

UL { list-style: url("http://png.com/ellipse.png") disc }

UL { list-style: none }

맨위이 문서()는 자유로이 연결 사용이 가능함.
(수정일 )