일부 경우, 작성자는 사용자 에이전트가 문서 트리에서 가져오지 않은 콘텐츠를 렌더링하도록 요구할 수 있습니다. 익숙한 예로는 번호가 매겨진 목록이 있습니다. 작성자는 번호를 명시적으로 나열하고 싶지 않으며, 사용자 에이전트가 이를 자동으로 생성하기를 원합니다. 유사하게, 작성자는 사용자 에이전트가 그림 캡션 앞에 "그림"이라는 단어를 삽입하거나, 일곱 번째 장 제목 앞에 "제7장"을 삽입하기를 원할 수 있습니다. 특히 오디오나 점자에서는 사용자 에이전트가 이러한 문자열을 삽입할 수 있어야 합니다.
CSS 2.2에서는 두 가지 메커니즘으로 콘텐츠를 생성할 수 있습니다:
작성자는 :before 및 :after 의사 요소를 사용하여 생성된 콘텐츠의 스타일과 위치를 지정합니다. 이름에서 알 수 있듯이, :before 및 :after 의사 요소는 콘텐츠 트리의 문서 트리 콘텐츠 이전과 이후의 콘텐츠 위치를 지정합니다. 'content' 속성은 이러한 의사 요소와 함께 삽입할 내용을 지정합니다.
예를 들어, 다음 규칙은 "class" 속성 값이 "note"인 모든 P 요소의 콘텐츠 앞에 "Note: "라는 문자열을 삽입합니다:
p.note:before { content: "Note: " }
요소가 생성하는 형식화 객체(예: 박스)는 생성된 콘텐츠를 포함합니다. 따라서, 위 스타일 시트를 다음과 같이 변경하면:
p.note:before { content: "Note: " }
p.note { border: solid green }
초기 문자열을 포함하여 전체 단락 주위에 녹색 실선 테두리가 렌더링됩니다.
:before 및 :after 의사 요소는 상속 가능한 속성을 연결된 문서 트리의 요소에서 상속받습니다.
예를 들어, 다음 규칙은 모든 Q 요소 앞에 열림 따옴표를 삽입합니다. 따옴표의 색상은 빨간색이지만, 글꼴은 Q 요소 나머지 글꼴과 동일합니다:
q:before {
content: open-quote;
color: red
}
:before 또는 :after 의사 요소 선언에서, 상속되지 않는 속성은 초기 값을 취합니다.
따라서, 'display' 속성의 초기 값이 'inline'이기 때문에, 이전 예제의 따옴표는 인라인 박스로 삽입됩니다(즉, 요소의 초기 텍스트 콘텐츠와 동일한 라인에 배치됨). 다음 예제는 'display' 속성을 명시적으로 'block'으로 설정하여 삽입된 텍스트가 블록이 되도록 합니다:
body:after {
content: "The End";
display: block;
margin-top: 2em;
text-align: center;
}
:before 및 :after 의사 요소는 연결된 요소 내부에 실제 요소가 삽입된 것처럼 다른 박스와 상호작용합니다.
예를 들어, 다음 문서 조각과 스타일 시트:
<p> Text </p> p:before { display: block; content: 'Some'; }
...는 다음 문서 조각과 스타일 시트와 완전히 동일한 방식으로 렌더링됩니다:
<p><span>Some</span> Text </p> span { display: block }
마찬가지로, 다음 문서 조각과 스타일 시트:
<h2> Header </h2> h2:after { display: block; content: 'Thing'; }
...는 다음 문서 조각과 스타일 시트와 완전히 동일한 방식으로 렌더링됩니다:
<h2> Header <span>Thing</span></h2> h2 { display: block; }
span { display: block; }
참고. 이 명세서는 :before 및 :after가 대체된 요소(예: HTML에서 IMG)와의 상호작용을 완전히 정의하지 않습니다. 이는 향후 명세서에서 더 자세히 정의될 예정입니다.
| 이름: | content |
|---|---|
| 값: | normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit |
| 초기값: | normal |
| 적용 대상: | :before 및 :after 의사 요소 |
| 상속됨: | 아니요 |
| 백분율: | N/A |
| 미디어: | all |
| 계산값: | 요소에서는 항상 'normal'로 계산됩니다. :before 및 :after에서는 'normal'이 지정된 경우 'none'으로 계산됩니다. 그렇지 않은 경우, URI 값은 절대 URI로, attr() 값은 결과 문자열로, 기타 키워드는 지정된 대로 계산됩니다. |
이 속성은 :before 및 :after 의사 요소와 함께 사용되어 문서에 콘텐츠를 생성합니다. 값은 다음과 같은 의미를 가집니다:
'display' 속성은 콘텐츠가 블록 또는 인라인 박스에 배치되는지 여부를 제어합니다.
다음 규칙은 각 H1 요소 앞에 "Chapter: "라는 문자열을 생성합니다:
H1:before {
content: "Chapter: ";
display: inline;
}
작성자는 'content' 속성 뒤의 문자열 중 하나에서 "\A" 이스케이프 시퀀스를 작성하여 생성된 콘텐츠에 줄바꿈을 포함할 수 있습니다. 이 삽입된 줄바꿈은 여전히 'white-space' 속성에 영향을 받습니다. "\A" 이스케이프 시퀀스에 대한 자세한 내용은 "문자열" 및 "문자와 대소문자"를 참조하십시오.
h1:before {
display: block;
text-align: center;
white-space: pre;
content: "chapter\A hoofdstuk\A chapitre"
}
생성된 콘텐츠는 문서 트리를 변경하지 않습니다. 특히, 문서 언어 프로세서(예: 다시 파싱을 위해)로 되돌아가지 않습니다.
CSS 2.2에서는 작성자가 스타일에 민감하고 컨텍스트에 따라 사용자 에이전트가 인용부호를 렌더링하는 방식을 지정할 수 있습니다. 'quotes' 속성은 중첩된 인용의 각 레벨에 대해 인용부호 쌍을 지정합니다. 'content' 속성은 이러한 인용부호에 접근하고 이를 인용문 앞뒤에 삽입합니다.
| 이름: | quotes |
|---|---|
| 값: | [<string> <string>]+ | none | inherit |
| 초기값: | 사용자 에이전트에 따라 다름 |
| 적용 대상: | 모든 요소 |
| 상속됨: | 예 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 지정된 대로 |
이 속성은 중첩된 인용의 여러 레벨에 대해 인용부호를 지정합니다. 값은 다음과 같은 의미를 가집니다:
예를 들어, 다음 스타일 시트를 적용하면:
/* 두 언어에서 두 레벨의 인용부호 쌍 지정 */
q:lang(en) { quotes: '"' '"' "'" "'" }
q:lang(no) { quotes: "«" "»" '"' '"' }
/* Q 요소 콘텐츠 앞뒤에 인용부호 삽입 */
q:before { content: open-quote }
q:after { content: close-quote }
다음 HTML 조각에 대해:
<HTML lang="en">
<HEAD>
<TITLE>Quotes</TITLE>
</HEAD>
<BODY>
<P><Q>Quote me!</Q>
</BODY>
</HTML>
사용자 에이전트는 다음과 같이 출력할 수 있습니다:
"Quote me!"
반면, 다음 HTML 조각:
<HTML lang="no">
<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.»
참고. 이전 예제에서 'quotes'로 지정된 인용부호는 컴퓨터 키보드에서 쉽게 찾을 수 있지만, 고품질 조판에서는 다른 ISO 10646 문자가 필요할 수 있습니다. 다음 정보 표에는 일부 ISO 10646 인용부호 문자가 나열되어 있습니다:
| 문자 | 대략적인 렌더링 | ISO 10646 코드 (16진수) | 설명 |
|---|---|---|---|
| " | " | 0022 | QUOTATION MARK [ASCII 쌍따옴표] |
| ' | ' | 0027 | APOSTROPHE [ASCII 홑따옴표] |
| ‹ | < | 2039 | SINGLE LEFT-POINTING ANGLE QUOTATION MARK |
| › | > | 203A | SINGLE RIGHT-POINTING ANGLE QUOTATION MARK |
| « | « | 00AB | LEFT-POINTING DOUBLE ANGLE QUOTATION MARK |
| » | » | 00BB | RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK |
| ‘ | ` | 2018 | LEFT SINGLE QUOTATION MARK [single high-6] |
| ’ | ' | 2019 | RIGHT SINGLE QUOTATION MARK [single high-9] |
| “ | `` | 201C | LEFT DOUBLE QUOTATION MARK [double high-6] |
| ” | '' | 201D | RIGHT DOUBLE QUOTATION MARK [double high-9] |
| „ | ,, | 201E | DOUBLE LOW-9 QUOTATION MARK [double low-9] |
인용부호는 'open-quote' 및 'close-quote' 값을 가진 'content' 속성을 통해 적절한 위치에 삽입됩니다. 'open-quote' 또는 'close-quote'의 각 발생은 'quotes' 값의 문자열 중 하나로 대체됩니다. 이는 중첩 깊이에 따라 결정됩니다.
'open-quote'는 한 쌍의 인용부호 중 첫 번째를, 'close-quote'는 두 번째를 나타냅니다. 사용되는 인용부호 쌍은 인용의 중첩 레벨에 따라 달라집니다: 현재 발생 전까지 모든 생성된 텍스트에서 'open-quote'의 발생 횟수에서 'close-quote'의 발생 횟수를 뺀 값입니다. 깊이가 0이면 첫 번째 쌍이 사용되고, 깊이가 1이면 두 번째 쌍이 사용됩니다. 깊이가 쌍의 개수보다 크면 마지막 쌍이 반복됩니다. 깊이를 음수로 만드는 'close-quote' 또는 'no-close-quote'는 오류로 간주되며 무시됩니다(렌더링 시점에서): 깊이는 0으로 유지되고 인용부호는 렌더링되지 않지만 'content' 속성의 나머지 값은 여전히 삽입됩니다.
참고. 인용 깊이는 소스 문서의 중첩이나 포맷 구조와 독립적입니다.
일부 타이포그래피 스타일에서는 여러 단락에 걸친 인용에서 각 단락 앞에 열림 인용부호를 반복하고, 마지막 단락에서만 닫힘 인용부호를 사용하는 경우가 있습니다. CSS에서는 "가상" 닫힘 인용부호를 삽입하여 이를 구현할 수 있습니다. 키워드 'no-close-quote'는 인용 레벨을 감소시키지만, 인용부호를 삽입하지 않습니다.
다음 스타일 시트는 BLOCKQUOTE의 각 단락에 열림 인용부호를 삽입하고, 마지막에 단일 닫힘 인용부호를 삽입합니다:
blockquote p:before { content: open-quote }
blockquote p:after { content: no-close-quote }
blockquote p.last:after { content: close-quote }
이는 마지막 단락이 "last"라는 클래스로 표시되는 것에 의존합니다.
대칭성을 위해 'no-open-quote' 키워드도 있으며, 이는 아무것도 삽입하지 않지만 인용 깊이를 1 증가시킵니다.
CSS 2.2에서 자동 번호 매기기는 두 가지 속성, 'counter-increment' 와 'counter-reset'으로 제어됩니다. 이 속성들로 정의된 카운터는 'content' 속성의 counter() 및 counters() 함수와 함께 사용됩니다.
| 이름: | counter-reset |
|---|---|
| 값: | [ <identifier> <integer>? ]+ | none | inherit |
| 초기값: | none |
| 적용 대상: | 모든 요소 |
| 상속됨: | 아니요 |
| 백분율: | N/A |
| 미디어: | all |
| 계산값: | 지정된 대로 |
| 이름: | counter-increment |
|---|---|
| 값: | [ <identifier> <integer>? ]+ | none | inherit |
| 초기값: | none |
| 적용 대상: | 모든 요소 |
| 상속됨: | 아니요 |
| 백분율: | N/A |
| 미디어: | all |
| 계산값: | 지정된 대로 |
'counter-increment' 속성은 카운터(식별자)의 이름 하나 이상을 허용하며, 각 이름 뒤에 정수가 올 수 있습니다. 정수는 요소의 각 발생에 대해 카운터가 얼마나 증가하는지를 나타냅니다. 기본 증가는 1입니다. 0 및 음수 정수도 허용됩니다.
'counter-reset' 속성도 하나 이상의 카운터 이름 목록을 포함하며, 각 이름 뒤에 정수가 올 수 있습니다. 정수는 요소의 각 발생에서 카운터가 설정되는 값을 나타냅니다. 기본값은 0입니다.
'none', 'inherit', 'initial' 키워드는 카운터 이름으로 사용되어서는 안 됩니다. 'none' 값만 단독으로 사용된 경우, 카운터가 재설정 또는 증가되지 않음을 의미합니다. 'inherit' 값만 단독으로 사용된 경우, 일반적인 의미를 가집니다(예: 6.2.1). 'initial'은 향후 사용을 위해 예약되었습니다.
다음 예제는 "Chapter 1", "1.1", "1.2" 등으로 장과 섹션 번호를 매기는 방법을 보여줍니다.
BODY {
counter-reset: chapter; /* 장 카운터 스코프 생성 */
}
H1:before {
content: "Chapter " counter(chapter) ". ";
counter-increment: chapter; /* 장 값에 1을 추가 */
}
H1 {
counter-reset: section; /* 섹션 값을 0으로 설정 */
}
H2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}
요소가 카운터를 증가/재설정하고 이를 (예: :before 또는 :after 의사 요소의 'content' 속성에서) 사용하면, 카운터는 증가/재설정 후 사용됩니다.
요소가 카운터를 재설정하고 동시에 증가시키는 경우, 카운터는 먼저 재설정되고 그 후에 증가됩니다.
동일한 카운터가 'counter-reset' 및 'counter-increment' 속성 값에 여러 번 지정된 경우, 각 카운터의 재설정/증가는 지정된 순서대로 처리됩니다.
다음 예제는 'section' 카운터를 0으로 재설정합니다:
H1 { counter-reset: section 2 section }
다음 예제는 'chapter' 카운터를 3만큼 증가시킵니다:
H1 { counter-increment: chapter chapter 2 }
'counter-reset' 속성은 계단식 규칙을 따릅니다. 따라서, 계단식 때문에 다음 스타일 시트:
H1 { counter-reset: section -1 }
H1 { counter-reset: imagenum 99 }
는 'imagenum'만 재설정합니다. 두 카운터를 모두 재설정하려면, 함께 지정해야 합니다:
H1 { counter-reset: section -1 imagenum 99 }
카운터는 자손 요소나 의사 요소에서 카운터를 재설정할 때 자동으로 새로운 인스턴스를 생성하는 "자체 중첩" 특성을 가집니다. 이는 HTML에서 요소가 임의 깊이로 자체적으로 중첩될 수 있는 목록과 같은 상황에서 특히 중요합니다. 각 레벨에 대해 고유한 이름의 카운터를 정의하는 것은 불가능할 것입니다.
따라서, 다음은 중첩된 목록 항목에 번호를 매기는 데 충분합니다. 결과는 LI 요소에 'display:list-item' 및 'list-style: inside'를 설정한 것과 매우 유사합니다:
OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }
범위는 문서에서 해당 카운터에 대해 'counter-reset'가 처음으로 존재하는 요소에서 시작되며, 해당 요소의 자손 및 다음 형제 요소와 그들의 자손을 포함합니다. 그러나 이후 형제 요소나 동일한 요소에서 나중에 'counter-reset'으로 생성된 동일한 이름의 카운터 범위 내의 요소는 포함하지 않습니다.
'counter-increment' 또는 'content'가 요소나 의사 요소에서 범위 내에 없는 카운터를 참조하는 경우, 구현은 해당 요소나 의사 요소에서 해당 카운터를 0으로 재설정한 것으로 간주해야 합니다.
위 예제에서 OL은 카운터를 생성하며, OL의 모든 자식은 해당 카운터를 참조합니다.
아이템[n]이 "item" 카운터의 n번째 인스턴스를 나타내고, "{" 및 "}"이 범위의 시작과 끝을 나타낸다고 가정하면, 다음 HTML 조각은 표시된 카운터를 사용합니다. (위 예제에서 제공된 스타일 시트를 사용한다고 가정합니다).
<OL> <!-- {item[0]=0 -->
<LI>item</LI> <!-- item[0]++ (=1) -->
<LI>item <!-- item[0]++ (=2) -->
<OL> <!-- {item[1]=0 -->
<LI>item</LI> <!-- item[1]++ (=1) -->
<LI>item</LI> <!-- item[1]++ (=2) -->
<LI>item <!-- item[1]++ (=3) -->
<OL> <!-- {item[2]=0 -->
<LI>item</LI> <!-- item[2]++ (=1) -->
</OL> <!-- -->
<OL> <!-- }{item[2]=0 -->
<LI>item</LI> <!-- item[2]++ (=1) -->
</OL> <!-- -->
</LI> <!-- } -->
<LI>item</LI> <!-- item[1]++ (=4) -->
</OL> <!-- -->
</LI> <!-- } -->
<LI>item</LI> <!-- item[0]++ (=3) -->
<LI>item</LI> <!-- item[0]++ (=4) -->
</OL> <!-- -->
<OL> <!-- }{item[0]=0 -->
<LI>item</LI> <!-- item[0]++ (=1) -->
<LI>item</LI> <!-- item[0]++ (=2) -->
</OL> <!-- -->
카운터가 중첩되지 않은 요소에서 사용될 때 범위가 어떻게 작동하는지 보여주는 또 다른 예는 다음과 같습니다. 이는 위에서 제공된 스타일 규칙이 주어진 마크업에 어떻게 적용되는지를 보여줍니다.
<!--"chapter" counter|"section" counter -->
<body> <!-- {chapter=0 | -->
<h1>About CSS</h1> <!-- chapter++ (=1) | {section=0 -->
<h2>CSS 2</h2> <!-- | section++ (=1) -->
<h2>CSS 2.2</h2> <!-- | section++ (=2) -->
<h1>Style</h1> <!-- chapter++ (=2) |}{ section=0 -->
</body> <!-- | } -->
'counters()' 함수는 동일한 이름을 가진 범위 내 모든 카운터로 구성된 문자열을 생성하며, 주어진 문자열로 구분됩니다.
다음 스타일 시트는 중첩된 목록 항목에 "1", "1.1", "1.1.1" 등의 번호를 매깁니다.
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }
기본적으로 카운터는 10진수로 포맷되지만, 'list-style-type' 속성에 사용할 수 있는 모든 스타일도 카운터에 사용할 수 있습니다. 표기법은 다음과 같습니다:
counter(name)
기본 스타일에 대해, 또는:
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, lower-greek) "]" }
DIV.note:before { content: counter(notecntr, disc) " " }
P:before { content: counter(p, none) }
표시되지 않는 요소('display'가 'none'으로 설정된 경우)는 카운터를 증가시키거나 재설정할 수 없습니다.
예를 들어, 다음 스타일 시트에서 "secret" 클래스가 있는 H2는 'count2'를 증가시키지 않습니다.
H2.secret {counter-increment: count2; display: none}
생성되지 않는 의사 요소도 카운터를 증가시키거나 재설정할 수 없습니다.
예를 들어, 다음은 'heading'을 증가시키지 않습니다:
h1::before {
content: normal;
counter-increment: heading;
}
한편, 'visibility'가 'hidden'으로 설정된 요소는 카운터를 증가시킵니다.
CSS 2.2는 기본적인 시각적 목록 포맷을 제공합니다. 'display: list-item'을 가진 요소는 요소의 콘텐츠를 위한 주요 블록 박스를 생성하고, 'list-style-type' 및 'list-style-image' 값에 따라 해당 요소가 목록 항목임을 시각적으로 나타내는 마커 박스를 생성할 수도 있습니다.
목록 속성은 목록의 기본적인 시각적 포맷을 설명합니다: 스타일 시트가 마커 유형(이미지, 글리프, 숫자)과 주요 박스에 대한 마커 위치(외부 또는 콘텐츠 앞 내부)를 지정할 수 있게 합니다. 그러나 작성자가 목록 마커의 개별 스타일(색상, 글꼴, 정렬 등)을 지정하거나 주요 박스에 대한 마커의 위치를 조정할 수 있도록 허용하지는 않습니다. 이러한 스타일은 주요 박스에서 파생될 수 있습니다.
배경 속성은 주요 박스에만 적용됩니다. 'outside' 마커 박스는 투명합니다.
| 이름: | list-style-type |
|---|---|
| 값: | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit |
| 초기값: | disc |
| 적용 대상: | 'display: list-item'을 가진 요소 |
| 상속됨: | 예 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 지정된 대로 |
이 속성은 'list-style-image' 값이 'none'이거나, URI로 지정된 이미지가 표시될 수 없는 경우 목록 항목 마커의 모양을 지정합니다. 값 'none'은 마커가 없음을 지정하며, 그렇지 않은 경우 마커에는 세 가지 유형이 있습니다: 글리프, 숫자 시스템, 알파벳 시스템.
글리프는 disc, circle, 및 square로 지정됩니다. 정확한 렌더링은 사용자 에이전트에 따라 다릅니다.
숫자 시스템은 다음과 같이 지정됩니다:
알파벳 시스템은 다음과 같이 지정됩니다:
이 명세서는 알파벳 시스템이 알파벳 끝에서 어떻게 래핑되는지 정의하지 않습니다. 예를 들어, 26개의 목록 항목 이후, 'lower-latin' 렌더링은 정의되지 않습니다. 따라서 긴 목록의 경우, 작성자가 실제 숫자를 지정할 것을 권장합니다.
CSS 2.2는 목록 번호 매기기가 어떻게 재설정되고 증가하는지를 정의하지 않습니다. 이는 CSS List Module에서 정의될 예정입니다. [CSS3LIST].
예를 들어, 다음 HTML 문서:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>소문자 라틴 번호 매기기</TITLE>
<STYLE type="text/css">
ol { list-style-type: lower-roman }
</STYLE>
</HEAD>
<BODY>
<OL>
<LI> 첫 번째 항목입니다.
<LI> 두 번째 항목입니다.
<LI> 세 번째 항목입니다.
</OL>
</BODY>
</HTML>
는 다음과 같이 출력될 수 있습니다:
i 첫 번째 항목입니다. ii 두 번째 항목입니다. iii 세 번째 항목입니다.
목록 마커의 정렬(여기서는 오른쪽 정렬)은 사용자 에이전트에 따라 달라집니다.
| 이름: | list-style-image |
|---|---|
| 값: | <uri> | none | inherit |
| 초기값: | none |
| 적용 대상: | 'display: list-item'을 가진 요소 |
| 상속됨: | 예 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 절대 URI 또는 'none' |
이 속성은 목록 항목 마커로 사용할 이미지를 설정합니다. 이미지가 사용 가능할 경우, 'list-style-type' 마커를 대체합니다.
이미지 크기는 다음 규칙에 따라 계산됩니다:
다음 예제는 각 목록 항목의 시작 마커를 "ellipse.png" 이미지로 설정합니다.
ul { list-style-image: url("http://png.com/ellipse.png") }
| 이름: | list-style-position |
|---|---|
| 값: | inside | outside | inherit |
| 초기값: | outside |
| 적용 대상: | 'display: list-item'을 가진 요소 |
| 상속됨: | 예 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 지정된 대로 |
이 속성은 마커 박스의 위치를 주요 블록 박스에 대해 지정합니다. 값은 다음과 같은 의미를 가집니다:
예를 들어:
<HTML>
<HEAD>
<TITLE>안쪽/바깥쪽 위치 비교</TITLE>
<STYLE type="text/css">
ul { list-style: outside }
ul.compact { list-style: inside }
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>첫 번째 리스트 항목
<LI>두 번째 리스트 항목
</UL>
<UL class="compact">
<LI>첫 번째 리스트 항목
<LI>두 번째 리스트 항목
</UL>
</BODY>
</HTML>
위의 예제는 다음과 같이 포맷될 수 있습니다:
오른쪽에서 왼쪽 텍스트에서는 마커가 박스의 오른쪽에 위치합니다.
| 이름: | list-style |
|---|---|
| 값: | [ <'list-style-type'> || <'list-style-position'> || <'list-style-image'> ] | inherit |
| 초기값: | 개별 속성 참조 |
| 적용 대상: | 'display: list-item'을 가진 요소 |
| 상속됨: | 예 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 개별 속성 참조 |
'list-style' 속성은 'list-style-type', 'list-style-image', 및 'list-style-position'를 스타일 시트에서 한 번에 설정하기 위한 축약 표기법입니다.
ul { list-style: upper-roman inside } /* 모든 "ul" 요소 */
ul > li > ul { list-style: circle outside } /* "ul"의 자식인 "li"의 자식인
모든 "ul" 요소 */
작성자는 목록 항목 요소(예: HTML의 "li")에 직접 'list-style' 정보를 지정할 수 있지만, 신중히 해야 합니다. 다음 규칙은 유사해 보이지만, 첫 번째는 후손 선택자를 선언하고, 두 번째는 (더 구체적인) 자식 선택자를 선언합니다.
ol.alpha li { list-style: lower-alpha } /* 모든 "ol"의 후손인 "li" */
ol.alpha > li { list-style: lower-alpha } /* 모든 "ol"의 자식인 "li" */
후손 선택자만 사용하는 작성자는 기대한 결과를 얻지 못할 수 있습니다. 다음 규칙을 고려해 보십시오:
<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>레벨 1
<UL>
<LI>레벨 2
</UL>
</OL>
</BODY>
</HTML>
원하는 렌더링은 레벨 1 목록 항목에 'lower-alpha' 라벨을, 레벨 2 항목에 'disc' 라벨을 가지는 것입니다. 그러나 계단식 순서는 첫 번째 스타일 규칙(특정 클래스 정보를 포함한)이 두 번째를 덮어쓰게 합니다. 다음 규칙은 대신 자식 선택자를 사용하여 문제를 해결합니다:
ol.alpha > li { list-style: lower-alpha }
ul li { list-style: disc }
또 다른 해결책은 목록 유형 요소에만 'list-style' 정보를 지정하는 것입니다:
ol.alpha { list-style: lower-alpha }
ul { list-style: disc }
상속은 OL 및 UL 요소로부터 LI 요소로 'list-style' 값을 전달합니다. 이는 목록 스타일 정보를 지정하는 권장 방법입니다.
URI 값은 다음과 같이 다른 값과 결합될 수 있습니다:
ul { list-style: url("http://png.com/ellipse.png") disc }
위의 예제에서, 이미지를 사용할 수 없는 경우 'disc'이 사용됩니다.
'list-style' 속성 내의 'none' 값은 'list-style-type' 및 'list-style-image' 중 다른 방식으로 지정되지 않은 항목을 'none'으로 설정합니다. 그러나 둘 다 다른 방식으로 지정된 경우, 선언은 오류로 간주되며 무시됩니다.
예를 들어, 'list-style' 속성의 'none' 값은 'list-style-type' 및 'list-style-image'를 'none'으로 설정합니다:
ul { list-style: none }
결과적으로 목록 항목 마커가 표시되지 않습니다.