[CSS-웹표준 교과서]11. 생성 내용

@ 생성내용(generated content)은 :before 가상 요소나 :after 가상 요소와 조합하여 문서 안에 임의의 텍스트를  생성하거나 인용부호를 생성한다.

1. 생성내용 지정(content 속성)

  - <텍스트> : 텍스트를 생성한다. 텍스트는 인용부호로 둘러싸인다. 텍스트에 한글이나 한자 등이 포함되면 @charset 규칙에 그 CSS의 문자코드세트를 지정해야 한다.

  - <URL> : 삽입 오브젝트로 생성하는 외부 리코드(이미지등)를 url()함수로 지정한다. 지정한 외부 리코드를 취득할 수 없는 때나 브라우저가 대응하지 않는 MIME타입인 때에는 그 외부 리코드를 무시하지 않으면 안 된다고 되어 있다. 삽입 오브젝트의 크기를 변경하거나 alt 속성이나 longdesc 속성 등 특정 속성을 부여하는 장치는 제공하지 않지만 앞으로 새로운 CSS 버전에서는 제공될 가능성이 있다.

- <카운터> : 카운터를 생성한다. 예컨대 요소에 자동으로 번호를 붙이는 데 사용한다. 이값은 Opera 등 일부 브라우저만 지원하고 있다.
 - open-quote close-quote : quote 속성에 지정된 인용부호를 삽입한다. 'open-quote'는 인용부호의 시작, 'close-quote'는 인용부호의 종료를 말한다.
 - no-open-quote no-close-quote : 인용부호를 삽입하지 않고 quote 속성에 지정된 인용부호의 들여쓰기를 더 깊게 하거나 얕게 한다. 'no-close-quote'는 한 단계 깊게, 'no-close-quote'는 한 단계 얕게 한다.
 - attr(X) : 선택자의 주체(요소)가 가진 속성 'X'의 값을 텍스트로 삽입한다. 예컨대 'attr(alt)'라고 지정하면 alt 속성의 값이 텍스트로 삽입된다(XHTML에서는 속성명의 대문자와 소문자를 구별하는 점에 주의). 그 주체가 지정된 속성을 가지지 않는 경우 빈 텍스트가 삽입된다. 이 값은 Opera 등 일부 브라우저만 지원하고 있다.
*CSS 2.1 권고 후보
 - normal :  내용을 생성하지 않는다. ':before {content : "" } ' 는 생성내용의 박스를 생성하지만 ':before { content : normal }' 은 박스를 생성하지 않는다.

# 값에 텍스트를 지정할 때의 주의점

- 값에 텍스트를 지정할 때 몇 가지 주의점이 있다. '"' 의 안에 '"'를, ' ' ' 의 안에 ' ' '를 직접 포함할 수 없다. 혹시 포함한 경우는 이중 인용부호는 '\"' 또는 '\22', 단일인용부호로 '\' 또는 '\27'로 표현해야 한다.

- 새로운 줄에다 적는법

- 줄바꿈 '\A'

# 요소에 자동으로 번호를 부여하는 방법

 *카운터를 제어하려고 다음의 두가지 속성을 이용할 수 있다.

- counter-increment 속성은 <식별자>에 해당하는 카운터를 '1' 증가시킨다.<식별자>에 계속해서 <함수>를 지정하면 지정한 만큼 카운터를 증가시킨다. '0'이나 마이너스 값도 지정할 수 있다.

 - 아래와 같이 지정하면 h1 요소가 출현하는 경우에 'chapter'식별자가 카운터가 '1' 증가한다. 또 복수 식별자의 카운터를 증가시키는 경우는 다음과 같이 공백문자로 구분하여 지정한다.

- 아래와 같이 지정하여 h2 요소가 출현하면 'section' 식별자의 카운터가 '1' 증가하지만 'subsection' 식별자의 카운터는 '0'으로 초기화된다. counter-increment 속성과 같이 공백문자로 구분하여 복수 식별자의 카운트에 적용할 수 있다.

- h1 요소에는 '장'(chapter), h2 요소를 '절'(section), h3 요소를 '항'(subsection)으로 하여 자동으로 번호를 부여하는 예를 살펴보자.

- 카운터 스타일을 변경하는 데는' counter(<식별자>. <list-style-type>)' 또는 'counters(<식별자>, <list-style-type>)'라는 서식으로, 즉 <식별자>의 뒤에 콤마로 구분하여 list-style-type 속성의 값을 지정한다.

- 위와 같이 지정하면 'chapter'는 알파벳 대문자, 'section'은 알파벳 소문자, 'subsection'은 로마숫자의 대문자로 표시된다. 다만 현재 이 같은 카운터 스타일의 변경을 지원하는 브라우저는 없다.

- 'count(<식별자> , <텍스트>)'라는 서식의 예를 살펴보자. counters() 함수는 counter()함수와 달리 같은 식별자를 갖춘 모든 카운터의 값으로부터 작성된 텍스트를 생성하는 데 사용한다.

#특정 매체를 대상으로 내용을 생성한다.

2. 인용부호 지정(quotes 속성)

- none : content 속성의 값이 'open-quote' 나 'close-quote'인 때에도 인용부호를 생성하지 않는다.
- [<텍스트> <텍스트>]+  : content속성의 값이 'open-quote' 나 'close-quote'이면 이 목록에서 인용부호가 선택된다. 최초의 텍스트가 인용부호의 시작점, 다음의 텍스트가 인용부호의 종료점이 된다. 이 조합을 공백문자로 구분하여 복수 열거하면 삽입된 요소의 깊이에 대응하여 인용부호를 변경할 수 있다. 삽입된 요소의 들여쓰기 깊이는 '인용레벨'이라고 한다.

- 위와 같이 인용레벨의 차이에 따라 인용부호를 변경하는 기능을 지원하는 브라우저는 없다.

# 인용부호를 Unicode로 지정하는 의미