CSS 생성된 콘텐츠 모듈 3단계

소개

작성자는 때때로 사용자 에이전트가 문서 트리에서 온 것이 아닌 콘텐츠를 렌더링하길 원합니다. 익숙한 예로는 번호가 매겨진 제목이 있습니다; 작성자는 번호를 명시적으로 마크업하기를 원하지 않으며, 사용자 에이전트가 자동으로 생성해주길 바랍니다. 카운터와 마커가 이러한 효과를 달성하는 데 사용됩니다.

h1::before { content: counter(section) ": "; }

마찬가지로, 작성자는 사용자 에이전트가 figure 캡션 앞에 "Figure"라는 단어를 삽입하거나, 일곱 번째 챕터 제목 앞에 "Chapter 7"을 한 줄에 표시하길 원할 수 있습니다.

chapter { counter-increment: chapter; }
chapter > title::before { content: "Chapter " counter(chapter) "\A"; }

또 다른 흔한 효과는 요소를 이미지나 다른 멀티미디어 콘텐츠로 교체하는 것입니다. 모든 사용자 에이전트가 모든 멀티미디어 포맷을 지원하지는 않기 때문에, 대체값(fallback)을 제공해야 할 수도 있습니다.

/* <logo> 요소를 사이트의 로고로 교체하며, UA가 지원하는 형식을 사용 */
/* Replace <figure> elements with the referenced document, or,
 * failing that, with either the contents of the alt attribute or the
 * contents of the element itself if there is no alt attribute */
logo { content: url(logo.mov), url(logo.mng), url(logo.png), none; }

/* <figure> 요소를 참조된 문서로 교체하거나, alt 속성이 있다면 그 내용으로, alt가 없다면 요소 자체의 내용으로 교체 */
figure[alt] { content: attr(href url), attr(alt); }
figure:not([alt]) { content: attr(href url), contents; }

값 정의

이 사양은 [CSS2]의 CSS 속성 정의 관례와 [CSS-VALUES-3]의 값 정의 문법을 따릅니다. 이 사양에서 정의되지 않은 값 타입들은 CSS 값 및 단위 [CSS-VALUES-3]에서 정의됩니다. 다른 CSS 모듈과의 조합으로 이러한 값 타입 정의가 확장될 수 있습니다.

정의에 명시된 속성별 값 외에도, 이 사양에서 정의된 모든 속성은 CSS-광역 키워드를 속성 값으로 허용합니다. 가독성을 위해 반복적으로 명시하지 않았습니다.

1. 콘텐츠 삽입 및 교체: content 속성

사용자 에이전트는 시각적이 아닌 미디어를 포함하여 모든 미디어에서 이 속성을 지원해야 합니다.

content 속성은 요소 또는 가상 요소(pseudo-element) 내부에 렌더링될 내용을 결정합니다.

요소에는 오직 한 가지 목적만 있습니다: 요소가 정상적으로 렌더링되는지 지정하거나, 이미지를 사용해 요소를 교체(그리고 관련 "alt 텍스트"를 함께 표시)하도록 지정합니다.

가상 요소 및 마진 박스에는 보다 강력한 기능을 제공합니다. 해당 요소가 실제로 렌더링될지, 이미지를 사용해 교체할지, 또는 임의의 인라인 콘텐츠(텍스트 및 이미지)로 교체할지 결정할 수 있습니다.

normal

요소 또는 페이지 마진 박스의 경우, contents로 계산됩니다.

::before 및 ::after에는 none으로 계산됩니다.

::marker, ::placeholder, ::file-selector-button에는 자기 자신(normal)으로 계산됩니다.

none

요소에서는 normal과 같이 동작합니다.

가상 요소에서는 해당 가상 요소가 생성을 억제, display: none처럼 동작합니다.

어느 경우에도, 이 요소나 가상 요소를 발생 요소(originating element)로 갖는 가상 요소의 생성은 막을 수 없습니다.

<content-replacement>

다음과 동일:

<image>

요소 또는 가상 요소를 치환 요소(replaced element)로 만들어, 지정된 <image>로 채웁니다. 기본 콘텐츠는 억제되어 박스를 생성하지 않으며, display: none과 같이 동작합니다.

<image>가 잘못된 이미지(invalid image)라면, 너비와 높이가 0인 투명한 검정 이미지로 대체해야 합니다.

위 잘못된 이미지 동작은 Chrome에서 일어나는 것 같습니다. 괜찮은가요? 더 나은 동작이 있을까요?

참고: 치환 요소는 일반 요소와 다른 레이아웃 규칙을 사용합니다. (실제로는 HTML의 img 요소와 동일합니다.)

참고: 치환 요소는 ::before, ::after 가상 요소를 갖지 않습니다; content 속성이 전체 콘텐츠를 교체하기 때문입니다.

이 값은 과거에는 <content-list>로 ::before 및 ::after에 대해 처리되었습니다. 웹 호환성(Web-compat) 요구가 있는 것으로 보이므로, 이러한 가상 요소에 예외가 필요할 수 있습니다. [이슈 #2889]

<content-list>

요소의 기본 콘텐츠를 하나 이상의 익명 인라인 박스로 지정된 값 순서대로 교체합니다. 기본 콘텐츠는 억제되어 박스를 생성하지 않으며, display: none과 같이 동작합니다.

각 값은 요소의 콘텐츠에 인라인 박스를 추가합니다. <image>의 경우 익명 인라인 치환 요소이며, 나머지는 익명 인라인 텍스트 구간입니다.

<image>가 잘못된 이미지라면, 사용자 에이전트는 다음 중 하나를 선택해야 합니다:

• <image>를 "건너뛰고", 아무것도 생성하지 않음

• <image> 자리에 이미지를 표시할 수 없음을 나타내는 인디케이터(예: "깨진 이미지" 아이콘)를 표시

이 사양은 사용자 에이전트가 어떤 동작을 반드시 사용해야 하는지 정의하지 않으나, 반드시 두 방식 중 하나를 일관되게 사용해야 합니다.

참고: <content-list> 값이 단일 <image>일 경우, <content-replacement>로 해석해야 합니다.

테스트

• pseudo-element-inline-box.html (실시간 테스트) (소스)

/ [ <string> | <counter> | <attr()> ]+

요소의 "alt 텍스트"를 지정합니다. 상세 내용은 § 1.2 접근성을 위한 대체 텍스트를 참고하세요. 생략된 경우, 해당 요소는 "alt 텍스트"를 갖지 않습니다.

::before {
  content: "Chapter" counter(chapter);
  content: "Chapter" counter(chapter) / "Chapter" counter(chapter);
}

contents 키워드를 content()로 대체해야 할까요?

1.1. 생성된 콘텐츠의 접근성

생성된 콘텐츠는 검색 가능하고, 선택 가능하며, 보조 기술에 의해 이용 가능해야 합니다. content 속성은 음성에도 적용되며, 생성된 콘텐츠는 음성 출력에서도 렌더링되어야 합니다. [CSS3-SPEECH]

CSS용 AAM 작업 시작 필요.

1.2. 접근성용 대체 텍스트

시각적 매체를 위한 콘텐츠는 때때로 음성 출력이나 기타 비시각적 매체를 위한 대체 텍스트가 필요합니다. content 속성은 따라서 대체 텍스트를 마지막 <content-list> 이후 슬래시(/) 뒤에 지정하도록 허용합니다. 대체 텍스트가 제공되는 경우, 반드시 음성 출력에 사용되어야 합니다.

이 방법으로 예를 들어, 순수 장식용 텍스트를 빈 문자열로 대체 텍스트를 제공해 음성 출력에서 생략하거나, 이미지, 아이콘, 텍스트 기호 등에 대해 좀 더 읽기 쉬운 대체값을 제공할 수 있습니다.

.new::before {
 content: url(./img/star.png) / "New!";
  /* 또는 DOM에서 로컬라이즈된 속성: attr("data-alt") */
}

.expandable::before {
 content: "\25BA" / "";
/* a.k.a. ► */
 /* aria-expanded="false"가 이미 DOM에 있으므로,
   이 가상 요소는 장식용 */
}

2. 생성된 콘텐츠 값: <content-list> 타입

<content-list> 값은 content에서 사용되어, 익명 인라인 박스 하나 이상(이미지, 문자열, 카운터 값, 요소의 텍스트 값 등)으로 요소를 채웁니다. 이 섹션에서는 그 가능성을 나열합니다.

<content-list>의 문법은 다음과 같이 정의됩니다:

<content-list> = [ <string> | <image> | <attr()> | contents | <quote> | <leader()> | <target> | <string()> | <content()> | <counter> ]+

2.1. 기본 문자열: <string> 및 <attr()> 값

<string>

지정된 텍스트로 채워진 익명 인라인 박스를 나타냅니다.

참고: 문자열 안의 공백은 리터럴 텍스트와 동일하게 처리되며, [CSS-TEXT-3] 및 기타 속성에 의해 제어됩니다. 특히, 공백 문자는 여러 문자열에 걸쳐서도 공백이 병합될 수 있습니다. 예를 들어 content: "First " " Second";는 기본적으로 "First Second" (단어 사이에 하나의 공백만 표시됨)처럼 렌더링됩니다.

<attr()>

attr() 함수 표기법은 지정된 속성의 값으로 저장된 문자열을 나타냅니다. 인수는 CSS 한정 이름(qname)으로, 속성 이름과 네임스페이스(있는 경우)를 나타냅니다. [CSS3-NAMESPACE] 참조.

참고: 속성 선택자와 같이 네임스페이스가 명시되어 있지 않은 속성 이름은 기본 네임스페이스와 연관되지 않습니다.

2.2. 2D 이미지: <image> 값

<image>

지정된 <image>로 채워진 익명 인라인 치환 요소를 나타냅니다.

<image>가 잘못된 이미지인 경우, 이 값은 아무것도 나타내지 않습니다. (요소에 인라인 콘텐츠가 추가되지 않으며, 해당 값이 "건너뛰기"된 것과 같습니다.)

CSS2.1에서는 이미지가 잘못된 경우 UA가 깨진 이미지 아이콘으로 대체할 수 있음을 명시적으로 허용했습니다. 그러나 실제로 브라우저가 이것을 구현하지는 않습니다. 해당 삭제가 괜찮은지 확인 필요.

2.3. 요소 콘텐츠: contents 키워드

contents

해당 요소의 자손. 이는 요소별로 한 번만 사용할 수 있으므로 (예를 들어 자식 중에 플러그인이나 폼 컨트롤이 있다면 중복 불가), 다음과 같이 처리됩니다:

요소에 지정된 경우:

항상 존중됩니다. 이것이 기본값임을 유의, content의 초기값이 normal이고, normal이 요소에서는 contents로 계산됨.

요소의 다른 가상 요소에 지정된 경우:

다음 순서(깊이 우선)대로 "이전" 가상 요소에 이미 지정된 것이 없는지 확인:

1. 요소 자체

2. ::before

3. ::after

가상 요소에서 빈 문자열처럼 동작해야 하나요?

이미 사용되었다면 아무것도 생성하지 않습니다(none과 같음). 실제 생성된 가상 요소만 검사합니다.

foo { content: normal; }  /* 이것은 초기값입니다 */
foo::after { content: contents; }

foo { content: none; }
foo::after { content: contents; }

요소의 콘텐츠를 억제하고 가상 요소에서 사용하는 사례를 알려주시면 좋겠습니다.

참고: 하나의 content 속성에 contents를 두 번 포함하는 것은 쓸모 없지만, 문법 오류는 아닙니다. 두 번째 등장한 것은 이미 사용되었으므로, 영향을 미치지 않습니다. ::marker 가상 요소에서도 문법 오류는 아니며, 렌더링 단계에서야 none처럼 처리됩니다.

marker 가상 요소에 대한 설명이 여기 꼭 필요한가요? 아니면 예전 버전에서 온 레거시인가요?

2.4. 인용 부호

quotes 속성은 요소의 인용 부호 시스템을 정의하며, content 속성의 다양한 *-quote 값과 함께, 해당 인용 부호를 생성된 콘텐츠로 자동 삽입할 수 있습니다. 예를 들어 HTML의 q 요소에 사용할 수 있습니다.

2.4.1. 인용 부호 시스템: quotes 속성

사용자 에이전트는 시각적이 아닌 미디어를 포함하여 모든 미디어에서 이 속성을 지원해야 합니다.

이 속성은 해당 요소의 인용 부호 시스템을 지정하며, content 속성의 open-quote 및 close-quote 값의 동작 방법을 정의합니다. § 2.4.2 인용 부호 삽입: *-quote 키워드를 참고하세요. 값은 다음의 의미를 가집니다:

none

open-quote 및 close-quote 값이 content 속성에서 인용 부호를 생성하지 않으며, 각각 no-open-quote 및 no-close-quote와 같이 동작합니다.

auto

UA는 부모의 콘텐츠 언어(content language)를 기반으로 (부모가 없다면 요소 자체의 언어를 기반으로) 서체적으로 적절한 인용 부호 시스템을 자동 선택합니다.

참고: 유니코드 공통 로케일 데이터 저장소 [CLDR]에서 서체적으로 적합한 인용 부호 정보를 제공합니다. UA는 정보 출처를 다르게 할 수도 있으며, 서체 선호도는 다양할 수 있으므로 개선 사항은 Unicode에 기여하는 것이 권장됩니다. 전체 소프트웨어 생태계가 이를 혜택 받을 수 있습니다.

match-parent

부모와 동일한 인용 부호 시스템을 지정합니다. 일반적으로 부모의 계산된 값을 상속하는 것과 같으며, auto 값은 부모와 동일한 콘텐츠 언어를 사용하여 결정됩니다.

여기 두 가지 접근법 가능, 현재는 후자에 따라 명세됨: a) 관련 문자열 값으로 계산되어 상속됨. b) 이 값은 키워드 + 언어 코드로 효과적으로 상속됨, 즉 auto이면서 이 언어와 함께임.

[ <string> <string> ]+

인용 부호 시스템은 지정된 쌍의 인용 부호 목록(여는·닫는 부호)으로 정의됩니다. 첫 번째 쌍은 가장 바깥쪽 인용 수준, 두 번째 쌍은 그 다음 중첩 수준 등입니다. 쌍 내에서는 open-quote 값이 첫 번째 <string>을, close-quote가 두 번째 쌍을 참조합니다.

2.4.2. 인용 부호 삽입: *-quote 키워드

<quote> = open-quote | close-quote | no-open-quote | no-close-quote

open-quote

close-quote

이 값들은 quotes 속성에 의해 정의된 적절한 문자열로 대체되며, ( open-quote인 경우에는 증가, close-quote인 경우에는 감소 ) 인용 부호의 중첩 수준을 조절합니다.

no-open-quote

no-close-quote

아무 것도 삽입되지 않습니다(none과 같음), 하지만 ( no-open-quote인 경우 증가, no-close-quote인 경우 감소 ) 인용 부호의 중첩 수준을 조절합니다.

인용 부호는 open-quote 및 close-quote 값을 content 속성에서 사용하여 문서의 적절한 위치에 삽입할 수 있습니다. open-quote나 close-quote가 등장할 때마다 quotes 속성으로 지정된 인용 부호 시스템에 따라 중첩 깊이에 맞는 인용 부호 문자열로 대체됩니다.

사용되는 인용 부호 쌍은 인용 깊이( 인용 깊이) ― 즉, 현재 위치 이전의 모든 생성 텍스트에서 open-quote의 등장 횟수에서, 현재 위치까지의 close-quote의 등장 횟수를 뺀 값에 따라 결정됩니다. 깊이가 0이면 첫 번째 쌍, 깊이가 1이면 두 번째 쌍 등, 깊이가 쌍 수보다 크면 마지막 쌍을 반복합니다.

참고: 인용 깊이는 소스 문서의 중첩이나 서식 구조와 무관합니다. 또한 카운터 상속과 마찬가지로, [DOM]의 "평탄화된 요소 트리" 맥락에서 동작합니다.

close-quote 또는 no-close-quote가 인용 깊이를 음수로 만들 경우 이는 오류이며 무시됩니다(렌더링 시점): 깊이는 0에 머물며 인용 부호가 삽입되지 않습니다 (그래도 content 속성의 나머지 값은 삽입됩니다).

blockquote p::before { content: open-quote }
blockquote p::after { content: no-close-quote }
blockquote p:last-child::after { content: close-quote }

참고: 인용구가 주변 텍스트와 다른 언어일 경우, 보통 인용구 자체가 아닌 주변 텍스트 언어의 인용 부호를 사용합니다.

:lang(fr) > * { quotes: "\00AB\2005" "\2005\00BB" "\2039\2005" "\2005\203A" }
:lang(en) > * { quotes: "\201C" "\201D" "\2018" "\2019" }

:lang(fr) > * { quotes: "« " " »" "‹ " " ›" }
:lang(en) > * { quotes: "“" "”" "‘" "’" }

/* 두 언어에서 두 단계의 인용 부호 쌍을 지정 */
:lang(en) > q { quotes: '"' '"' "'" "'" }
:lang(no) > q { quotes: "«" "»" "’" "’" }

/* Q 요소 내용 전후에 인용 부호 삽입 */
q::before { content: open-quote }
q::after  { content: close-quote }

<html lang="en">
  <head>
   <title>Quotes</title>
  </head>
  <body>
   <p><q>Quote me!</q></p>
  </body>
</html>

"Quote me!"

<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></p>
  </body>
</html>

«Trøndere gråter når ’Vinsjan på kaia’ blir deklamert.»

2.5. 리더(선)

리더(leader)는 탭 리더, 점 리더 등으로 불리기도 하는데, 수평 공간을 따라 콘텐츠를 시각적으로 연결하는 반복 패턴입니다. 가장 흔하게 목차에서 제목과 페이지 번호 사이에 사용됩니다. leader() 함수는 content 속성 값으로, CSS에서 리더를 생성하는 데 사용됩니다. 이 함수는 리더의 반복 패턴을 설명하는 문자열(리더 문자열)을 인수로 받습니다.

2.5.1. leader() 함수

leader( <leader-type> )

리더를 삽입합니다. 더 자세한 내용은 리더 섹션을 참고하세요.

leader() = leader( <leader-type> )
<leader-type> = dotted | solid | space | <string>

세 가지 키워드는 자주 사용되는 문자열에 대한 축약값입니다:

dotted

leader(".")와 동일함

solid

leader("_")와 동일함

space

leader(" ")와 동일함

<string>

이 이슈는 정의 필요.

ol.toc a::after {
  content: leader('.') target-counter(attr(href), page);
}

<h1>Table of Contents</h1>
<ol class="toc">
<li><a href="#chapter1">Loomings</a></li>
<li><a href="#chapter2">The Carpet-Bag</a></li>
<li><a href="#chapter3">The Spouter-Inn</a></li>
</ol>

Table of Contents

1. Loomings.....................1
2. The Carpet-Bag...............9
3. The Spouter-Inn.............13

리더는 리더 뒤의 콘텐츠가 오른쪽 정렬(end-aligned)이라는 가정에 의존하나요?

2.5.2. 리더 렌더링

리더 앞의 콘텐츠(before content), 리더, 그리고 리더 뒤의 콘텐츠(after content)가 들어 있는 한 줄(line)을 고려합니다. 리더는 다음 규칙을 따릅니다:

1. 리더 문자열은 최소 한 번은 반드시 전체가 나타나야 합니다.

2. 리더는 최대한 길게 나타나야 합니다.

3. 리더의 보이는 문자는 가능하다면 서로 수직 방향으로 맞추어야 합니다.

4. 리더 문자열에 있는 줄 바꿈 문자는 무시됩니다.

5. 리더 문자열 내의 공백은 CSS의 일반 규칙을 따릅니다.

6. 리더는 시작 콘텐츠와 끝 콘텐츠 사이에만 나타납니다.

7. 리더는 한 줄에만 나타납니다(비록 before와 after content가 서로 다른 줄에 있더라도).

8. 리더만으로 줄 전체를 채울 수 없습니다.

2.5.3. 리더 렌더링 절차

1. before content를 레이아웃하여, before content가 끝나는 줄을 찾습니다.

   BBBBBBBBBB
   BBB
   

2. 리더 문자열은 하나 이상의 글리프로 되어 있으므로 인라인 박스입니다. 리더는 이 박스들을 끝(edge)에서 시작(edge)까지 행(row)으로 그리며, before나 after content에 겹치지 않은 박스만 표시됩니다. 해당 줄에, 리더 문자열을 끝(edge)부터 반복해서 시작(edge)에 닿을 때까지 최대한 많이 그립니다.

   BBBBBBBBBB
   ..........
   

3. 리더 위에 before와 after content를 그립니다. before content나 after content가 리더 문자열 박스의 글리프와 겹치면, 해당 글리프는 보이지 않습니다.

   BBBBBBBBBB
   BBB....AAA
   

4. 만약 리더 문자열의 전체 복사본이 한 번도 보이지 않는다면:

   BBBBBBB
   BBBBBBA
   

   before content 뒤에 줄 바꿈을 삽입하고, 다음 줄에 리더를 그리고, 그 위에 after content를 그리며, 완전히 보이지 않는 리더 문자열은 숨깁니다.

   BBBBBBB
   BBBBBB
   ......A
   

after content가 줄 박스보다 넓으면 어떻게 하나요?

리더는 표 레이아웃에서는 잘 동작하지 않습니다. 어떻게 개선할 수 있을까요?

2.6. 교차 참조

많은 문서에는 내부 참조가 포함되어 있습니다:

content 속성을 위한 세 가지 새로운 값이 이러한 유형의 교차 참조를 자동으로 생성하는 데 사용됩니다: target-counter(), target-counters(), 그리고 target-text()입니다. 이 값들은 각각 링크의 대상 지점에서 정보를 표시합니다.

<target> = <target-counter()> | <target-counters()> | <target-text()>

각각의 상세 내용은 아래 섹션을 참조하세요.

2.6.1. target-counter() 함수

target-counter() = target-counter( [ <string> | <url> ] , <custom-ident> , <counter-style>? )

target-counter() 함수는 지정한 이름의 가장 안쪽(innermost) 카운터의 값을 가져옵니다. 필수 인수는 대상의 url과 카운터의 이름입니다. 선택적으로 counter-style 인수를 추가해 결과를 포맷할 수 있습니다.

이러한 함수는 현재 문서 내의 위치를 가리키는 fragment URL만 허용합니다. fragment가 없거나, 참조된 ID가 존재하지 않거나, 외부 문서를 가리키는 URL인 경우, 사용자 에이전트는 오류로 처리해야 합니다.

오류 처리 방식은 무엇이어야 하나요?

현재는 문법적으로 로컬 참조만 제한.

…이는 <a href="#chapter4_sec2"></a>에서 논의될 예정입니다.

a::after { content: target-counter(attr(href url), page) }

…이는 137페이지에서 논의될 예정입니다.

<nav>
  <ol>
   <li class="frontmatter"><a href="#pref_01">머리말</a></li>
   <li class="frontmatter"><a href="#intr_01">소개</a></li>
   <li class="bodymatter"><a href="#chap_01">제1장</a></li>
  </ol>
</nav>

.frontmatter a::after { content: leader('.') target-counter(attr(href url), page, lower-roman) }
.bodymatter a::after { content: leader('.') target-counter(attr(href url), page, decimal) }

머리말.............vii
소개.........xi
제1장...........1

2.6.2. target-counters() 함수

이 함수는 링크의 끝에 있는 지정한 이름의 모든 카운터 값을 가져와서, 각 중첩 카운터 값 사이에 주어진 문자열을 삽입해 포맷합니다.

target-counters() = target-counters( [ <string> | <url> ] , <custom-ident> , <string> , <counter-style>? )

아직 target-counters()의 설득력 있는 예시를 찾지 못했습니다.

2.6.3. target-text() 함수

target-text() 함수는 URL로 지정된 요소의 텍스트 값을 가져옵니다. 선택적으로 두 번째 인수를 통해 가져올 콘텐츠를 지정할 수 있으며, 위 string-set 속성에 사용된 값과 동일합니다.

target-text() = target-text( [ <string> | <url> ] , [ content | before | after | first-letter ]? )

fantasai가 제안한 더 간단한 문법 있음: https://lists.w3.org/Archives/Public/www-style/2012Feb/0745.html

…which will be discussed <a href="#chapter_h1_1">나중에</a>.

a::after { content: ", 해당 챕터의 제목: " target-text(attr(href url)) }

2.7. 명명된 문자열

이 절에서는 명명된 문자열을 소개합니다. 이는 카운터와 동일하게 중첩 구조를 가지며, 카운터와 별도의 네임스페이스를 갖는 텍스트적 값입니다. 명명된 문자열은 카운터와 같은 중첩 규칙을 따릅니다. string-set 속성은 content 속성과 유사한 값을 허용하며, 현 카운터 값을 추출하여 사용할 수도 있습니다.

명명된 문자열은 문서에서 메타데이터를 추출하여 머리글, 바닥글에 삽입하는 데 편리하게 사용됩니다. 예를 들어 HTML에서는, 문서의 HEAD에 있는 META 요소가 명명된 문자열 값을 설정할 수 있습니다. 속성 선택자와 결합하면, 매우 강력한 메커니즘이 될 수 있습니다:

meta[author] { string-set: author attr(author); }
head > title { string-set: title contents; }
@page:left {
  @top {
   text-align: left;
   vertical-align: middle;
   content: string(title);
  }
}
@page:right {
  @top {
   text-align: right;
   vertical-align: middle;
   content: string(author);
  }
}

2.7.1. 문자열 명명: string-set 속성

사용자 에이전트는 시각적이 아닌 미디어를 포함하여 모든 미디어에서 이 속성을 지원해야 합니다.

string-set 속성은 요소의 텍스트 내용을 명명된 문자열 변수로 복사합니다. 이 명명된 문자열의 텍스트는 string() 함수를 사용해 추출할 수 있습니다. 이러한 변수는 한 페이지 내에서도 변경될 수 있으므로, string() 함수의 선택적 두 번째 값은 페이지에서 어떤 값을 사용할지 선택할 수 있도록 해줍니다.

none

해당 요소는 명명된 문자열을 설정하지 않습니다.

[ <custom-ident> <string>+ ]#

해당 요소는 리스트의 각 콤마로 구분된 항목에 대해, 하나 이상의 명명 문자열을 설정합니다.

각 항목에서 <custom-ident>가 명명 문자열의 이름을 지정하며, 뒤따르는 하나 이상의 <string> 값들은 연결되어 명명 문자열의 값이 됩니다.

요소에 스타일 컨테인먼트가 있으면, string-set 속성은 해당 요소의 자손에 영향을 주지 않습니다.

H1 { string-set: chapter contents; }

2.7.2. 명명 문자열 삽입: string() 함수

string() = string( <custom-ident> , [ first | start | last | first-except ]? )

string() 함수는 명명된 문자열의 값을 content 속성을 통해 문서에 복사할 때 사용합니다. 이 함수는 명명된 문자열의 이름을 인수로 요구합니다. 명명 문자열의 값은 한 페이지에서 여러 번 변할 수 있으므로 (같은 이름을 가진 여러 요소가 등장하기 때문에) 선택적 두 번째 인수는 어떤 값을 사용할지 지정합니다.

string() 함수의 두 번째 인수는 다음 키워드 중 하나입니다:

first

페이지에서 처음 할당된 값을 사용합니다. 할당이 없다면, entry value를 사용합니다. 두 번째 인수가 제공되지 않으면, 이 값이 기본값입니다.

start

해당 요소가 페이지의 첫 번째 요소라면 처음 할당된 값을 사용합니다. 그렇지 않으면 entry value를 사용합니다. entry value는 명명된 문자열이 아직 등장하지 않았다면 빈 문자열일 수 있습니다.

last

해당 명명 문자열의 exit value를 사용합니다.

first-except

first와 동일하지만, 값을 할당한 페이지에서는 빈 문자열을 사용합니다.

전체 content 문자열을 제거해야 할지 여부. 이게 꼭 필요한가요?

명명된 문자열의 content 값은 해당 요소의 content 박스가 처음 생성되는 시점(또는 display 값이 none인 경우 생성될 시점)에 할당됩니다. 페이지의 entry value는 이전 페이지 끝에서 유효한 할당 값입니다. 페이지의 exit value는 현재 페이지 끝에서 유효한 할당 값입니다.

CSS:

@page {
  size: 15cm 10cm;
  margin: 1.5cm;

  @top-left {
  content: "first: " string(heading, first);
  }
  @top-center {
  content: "start: " string(heading, start);
  }
   @top-right {
   content: "last: " string(heading, last);
  }
  }

h2 { string-set: heading content() }

다음 도표들은 "heading" 문자열의 first, start, last 값이 다양한 페이지에서 어떻게 동작하는지 보여 줍니다.

2.7.3. content() 함수

content() = content( [ text | before | after | first-letter | marker ]? )

text

요소의 문자열 값입니다. content()에서 값을 지정하지 않으면, text를 지정한 것처럼 동작합니다.

before

::before 가상 요소의 문자열 값입니다.

after

::after 가상 요소의 문자열 값입니다.

first-letter

::first-letter 가상 요소에 정의된, 요소의 첫 글자입니다.

marker

::marker 가상 요소의 문자열 값입니다.

<h1>Loomings</h1>

h1::before { content: 'Chapter ' counter(chapter); }
h1 { string-set: header content(before) ':' content(text); }
h1::after { content: '.'; }

<section title="Loomings">

section { string-set: header attr(title) }

2.8. 자동 카운터 및 번호 매김

CSS Lists 3 § 4 자동 카운터 번호 매김 참고.

이 내용을 CSS Content로 되돌려야 할까요?

3. 책갈피

일부 문서 형식(PDF 등)에서는 내비게이션을 돕기 위한 책갈피 를 지원합니다. 책갈피는 문서 요소에 대한 링크 목록과 해당 링크의 라벨 텍스트, 그리고 레벨 값을 제공합니다. 책갈피는 세 가지 속성을 가집니다: bookmark-level, bookmark-label, bookmark-state.

사용자가 책갈피를 활성화하면, 사용자 에이전트는 해당 참조 지점을 화면에 표시해야 합니다. 이는 fragment URL로 이동하는 것과 동일하게 동작합니다. 이는 :target 가상 클래스가 함께 적용됨을 의미합니다.

요소에 스타일 컨테인먼트가 있다면, bookmark-level, bookmark-label, bookmark-state 속성은 해당 요소의 자손에 영향을 주지 않아야 합니다.

3.1. 책갈피 설정: bookmark-level 속성

bookmark-level 속성은 책갈피가 생성되는지와 그 레벨을 결정합니다. 이 속성이 없거나, 값이 none이면, bookmark-label 또는 bookmark-state의 값과 관계없이 책갈피가 생성되지 않아야 합니다.

<integer [1,∞]>

책갈피의 레벨을 나타내며, 최상위 레벨은 1입니다(음수, 0값은 모두 무효).

none

책갈피를 생성하지 않습니다.

section h1 { bookmark-level: 1; }
section section h1 { bookmark-level: 2; }
section section section h1 { bookmark-level: 3; }

참고: 책갈피는 반드시 엄격한 계층 구조가 아니어도 됩니다.

display: none인 요소에도 책갈피를 생성해야 할까요?

3.2. 책갈피 라벨링: bookmark-label 속성

<content-list>

<content-list>의 정의는 위 string-set 속성의 부분에 있습니다. <content-list> 값은 책갈피 라벨의 텍스트로 사용됩니다.

<h1>Loomings</h1>

h1 {
bookmark-label: content(text);
bookmark-level: 1;
}

3.3. 초기 책갈피 토글 상태: bookmark-state 속성

bookmark-state는 open 또는 closed일 수 있습니다. 사용자는 책갈피 상태를 전환할 수 있어야 합니다.

open

지정된 책갈피보다 bookmark-level 값이 큰 이후의 책갈피들은, 동일한 수준 또는 더 낮은 수준의 다른 책갈피를 만날 때까지 표시됩니다. 이후의 책갈피 중 하나가 closed 상태인 경우, 해당 책갈피의 이후 책갈피들을 표시할지 결정하기 위해 동일한 검사를 적용합니다.

closed

지정된 책갈피보다 bookmark-level 값이 큰 이후의 책갈피들은 표시되지 않으며, 동일한 수준 또는 더 낮은 수준의 다른 책갈피를 만날 때까지 계속 표시되지 않습니다.

초기 책갈피 상태가 UA에 의해 적절히 갱신되어야 하나요?

4. 변경 사항

2019년 8월 2일 작업 초안 이후의 주요 변경 사항은 다음과 같습니다:

• auto를, 요소 자체의 콘텐츠 언어 대신 부모의 콘텐츠 언어를 참조하도록 업데이트함. (이슈 5478)
• match-parent 값을 quotes에 추가함. (이슈 5478)
• 과도한 닫는 인용 부호는 무시하여 인용 깊이가 음수가 되지 않도록 함. ([CSS2]; 이슈 2034)
• content: normal의 계산값을 ::placeholder와 ::file-selector-button에 대해 정의함. (이슈 6124)
• 닫는 인용 부호 인용 깊이에서 1 오프셋 오류 수정. (이슈 2506)
• attr() 정의를 인라인화함. ([CSS-VALUES-4]에서 삭제됨.)
• Web Platform Tests 테스트 커버리지 추가.
• 기타 사양 편집 및 청소.

이전 변경 사항은 여기서도 확인 가능합니다.

감사의 말

Stuart Ballard, David Baron, Bert Bos, Tantek Çelik, 그리고 James Craig 등 많은 분들께서 이 사양에 매우 귀중한 조언을 주셨습니다.

프라이버시 고려사항

이 사양에는 새로운 프라이버시 고려사항이 보고되지 않았습니다.

보안 고려사항

이 사양에는 새로운 보안 고려사항이 보고되지 않았습니다.