카운터의 스타일을 문자열 표현 방식으로 직접 정의할 수 있다.
디스크립터에 따라 웹브라우저별 지원 현황은 아직 완전하지 않으므로 반드시 각 웹브라우저의 지원 여부를 참고하도록 한다.
@counter-style 〈counter-style-name〉 { [ system: 〈counter-system〉; ]? [ symbols: 〈counter-symbols〉 | additive-symbols: 〈additive-symbols〉 ]; [ negative: 〈negative〉; ] || [ prefix: 〈prefix〉; ] || [ suffix: 〈suffix〉; ] || [ range: 〈range〉; ] || [ pad: 〈pad〉; ] || [ speak-as: 〈speak-as〉; ] || [ fallback: 〈fallback〉; ]}[사용 가능한 값]은 설정 가능한 모든 값을 나열하지 않을 수도 있다. 자세한 사항은 각 항목의 추가 정보를 확인하라.
symbols 디스크립터는 system 디스크립터가 지정한 마커 구성 알고리즘에서 사용하는 심벌을 지정한다.
system이 additive 경우 additive-symbols 디스크립터로 하나 이상의 유효한 심벌을 지정해야 한다.
[ 〈integer [0,∞]〉 && 〈symbol〉 ]#
<integer> 값은 내림차순으로 작성되어야 한다. 그렇지 않을 경우 무시된다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
<number-token> 유형 플래그가 'integer'인 소숫점이 없는 정수를 표현한다.
[HYPHEN-MINUS]?[0-9]
0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.
CSS에서 사용되는 기호를 나타낸다. 이미지(<image>)를 사용하는 경우 기본 개체의 크기는 1em x 1em의 정사각형이다.
〈string〉 | 〈image〉 | 〈custom-ident〉
임의의 사용자 정의 문자열을 표현한다.
모든 속성을 표시하지 않을 수도 있다.
애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.
그리드 항목이 몇 개의 열(column)로 확장되는지 또는 항목이 끝나는 열(column)의 줄의 위치를 정의한다.
그리드 항목이 시작되는 열(column)의 줄의 위치를 정의한다.
그리드 항목이 몇 개의 행(row)으로 확장되는지 또는 그리드 항목이 끝나는 행(row)의 위치를 정의한다.
그리드 항목이 시작될 행(row)의 위치를 정의한다.
하나 이상의 CSS 카운터 값을 늘리거나 줄인다.
하나 이상의 CSS 카운터를 만들거나 재설정한다.
목록의 마커의 모양을 설정한다.
2차원 이미지를 나타낸다.
〈url〉 | 〈image()〉 | 〈image-set()〉 | 〈cross-fade()〉 | 〈element()〉 | 〈gradient〉
<url>로 외부의 리소스를 연결하거나 <image-set()>, <cross-fade()>, <element()> 값으로 생성된다. 또한 그라디언트도 가능하다.
현재 image()는 지원하지 않는다.
두 가지 이상의 색상 간 점진적인 전환으로 구성된 특수한 유형의 이미지를 나타낸다.
background: linear-gradient(to right, #FF0000, #00FF00, #FFFF00);
선형 그라데이션
background: radial-gradient(#FF0000, #00FF00, #FFFF00);
원형 그라데이션
모든 함수를 표시하지 않을 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
요소의 배경과 관련된 모든 속성을 한 번에 설정하는 속기 속성이다.
선택자를 갖는 요소에 배경 이미지를 설정한다.
이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.
〈url()〉 | 〈src()〉src( 〈string〉 〈url-modifier〉* )따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
url( 〈string〉 〈url-modifier〉* ) | 〈url-token〉
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
모든 함수를 표시하지 않을 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
선택자를 갖는 요소에 배경 이미지를 설정한다.
요소의 클리핑 범위를 설정한다.
모든 함수를 표시하지 않을 수도 있다.
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
현재 카운터 스타일이 지정된 카운터 값에 대한 표현을 생성할 수 없거나 카운터의 값이 지정된 범위를 벗어난 경우 사용할 폴백(fallback) 카운터 스타일을 지정한다. 폴백 시스템이 없거나 폴백 시스템 체인이 카운터 값을 나타낼 수 없는 경우 최종적으로 소수(decimal) 스타일로 폴백된다.
〈counter-style-name〉
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
트리 범위(tree-scoped)의 이름이며 ASCII 대소문자를 구분하지 않는 <custom-ident> 이다.
임의의 사용자 정의 문자열을 표현한다.
모든 속성을 표시하지 않을 수도 있다.
애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.
그리드 항목이 몇 개의 열(column)로 확장되는지 또는 항목이 끝나는 열(column)의 줄의 위치를 정의한다.
그리드 항목이 시작되는 열(column)의 줄의 위치를 정의한다.
그리드 항목이 몇 개의 행(row)으로 확장되는지 또는 그리드 항목이 끝나는 행(row)의 위치를 정의한다.
그리드 항목이 시작될 행(row)의 위치를 정의한다.
하나 이상의 CSS 카운터 값을 늘리거나 줄인다.
하나 이상의 CSS 카운터를 만들거나 재설정한다.
목록의 마커의 모양을 설정한다.
카운터 값이 음수일 때 표현을 변경하는 방법의 정의한다.
..
〈symbol〉 〈symbol〉?카운터 값이 음수인 경우 값의 첫 번째 <symbol>이 카운터 표현 앞에 추가된다. 두 번째 <symbol>(지정된 경우)은 카운터 값이 음수일 때 표현 뒤에 추가된다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
CSS에서 사용되는 기호를 나타낸다. 이미지(<image>)를 사용하는 경우 기본 개체의 크기는 1em x 1em의 정사각형이다.
〈string〉 | 〈image〉 | 〈custom-ident〉
임의의 사용자 정의 문자열을 표현한다.
모든 속성을 표시하지 않을 수도 있다.
애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.
그리드 항목이 몇 개의 열(column)로 확장되는지 또는 항목이 끝나는 열(column)의 줄의 위치를 정의한다.
그리드 항목이 시작되는 열(column)의 줄의 위치를 정의한다.
그리드 항목이 몇 개의 행(row)으로 확장되는지 또는 그리드 항목이 끝나는 행(row)의 위치를 정의한다.
그리드 항목이 시작될 행(row)의 위치를 정의한다.
하나 이상의 CSS 카운터 값을 늘리거나 줄인다.
하나 이상의 CSS 카운터를 만들거나 재설정한다.
목록의 마커의 모양을 설정한다.
2차원 이미지를 나타낸다.
〈url〉 | 〈image()〉 | 〈image-set()〉 | 〈cross-fade()〉 | 〈element()〉 | 〈gradient〉
<url>로 외부의 리소스를 연결하거나 <image-set()>, <cross-fade()>, <element()> 값으로 생성된다. 또한 그라디언트도 가능하다.
현재 image()는 지원하지 않는다.
두 가지 이상의 색상 간 점진적인 전환으로 구성된 특수한 유형의 이미지를 나타낸다.
background: linear-gradient(to right, #FF0000, #00FF00, #FFFF00);
선형 그라데이션
background: radial-gradient(#FF0000, #00FF00, #FFFF00);
원형 그라데이션
모든 함수를 표시하지 않을 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
요소의 배경과 관련된 모든 속성을 한 번에 설정하는 속기 속성이다.
선택자를 갖는 요소에 배경 이미지를 설정한다.
이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.
〈url()〉 | 〈src()〉src( 〈string〉 〈url-modifier〉* )따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
url( 〈string〉 〈url-modifier〉* ) | 〈url-token〉
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
모든 함수를 표시하지 않을 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
선택자를 갖는 요소에 배경 이미지를 설정한다.
요소의 클리핑 범위를 설정한다.
모든 함수를 표시하지 않을 수도 있다.
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
패드 값보다 짧은 표현에 특정 <symbol>이 덧대어지는 고정 너비 카운터 스타일을 지정할 수 있다. 지정된 패드 값보다 큰 표현은 정상적으로 구성된다. 패드는 심벌이 차지하는 공간을 의미한다.
〈integer [0,∞]〉 && 〈symbol〉
<integer>는 모든 카운터 표현이 도달해야 하는 최소 길이(공간의 너비)를 지정한다. 카운터 표현이 지정된 너비보다 차이가 발생할 경우 0보다 크면 지정된 <symobl>의 복사본을 그 차이만큼 카운터 표현의 앞에 추가한다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
<number-token> 유형 플래그가 'integer'인 소숫점이 없는 정수를 표현한다.
[HYPHEN-MINUS]?[0-9]
0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.
CSS에서 사용되는 기호를 나타낸다. 이미지(<image>)를 사용하는 경우 기본 개체의 크기는 1em x 1em의 정사각형이다.
〈string〉 | 〈image〉 | 〈custom-ident〉
임의의 사용자 정의 문자열을 표현한다.
모든 속성을 표시하지 않을 수도 있다.
애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.
그리드 항목이 몇 개의 열(column)로 확장되는지 또는 항목이 끝나는 열(column)의 줄의 위치를 정의한다.
그리드 항목이 시작되는 열(column)의 줄의 위치를 정의한다.
그리드 항목이 몇 개의 행(row)으로 확장되는지 또는 그리드 항목이 끝나는 행(row)의 위치를 정의한다.
그리드 항목이 시작될 행(row)의 위치를 정의한다.
하나 이상의 CSS 카운터 값을 늘리거나 줄인다.
하나 이상의 CSS 카운터를 만들거나 재설정한다.
목록의 마커의 모양을 설정한다.
2차원 이미지를 나타낸다.
〈url〉 | 〈image()〉 | 〈image-set()〉 | 〈cross-fade()〉 | 〈element()〉 | 〈gradient〉
<url>로 외부의 리소스를 연결하거나 <image-set()>, <cross-fade()>, <element()> 값으로 생성된다. 또한 그라디언트도 가능하다.
현재 image()는 지원하지 않는다.
두 가지 이상의 색상 간 점진적인 전환으로 구성된 특수한 유형의 이미지를 나타낸다.
background: linear-gradient(to right, #FF0000, #00FF00, #FFFF00);
선형 그라데이션
background: radial-gradient(#FF0000, #00FF00, #FFFF00);
원형 그라데이션
모든 함수를 표시하지 않을 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
요소의 배경과 관련된 모든 속성을 한 번에 설정하는 속기 속성이다.
선택자를 갖는 요소에 배경 이미지를 설정한다.
이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.
〈url()〉 | 〈src()〉src( 〈string〉 〈url-modifier〉* )따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
url( 〈string〉 〈url-modifier〉* ) | 〈url-token〉
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
모든 함수를 표시하지 않을 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
선택자를 갖는 요소에 배경 이미지를 설정한다.
요소의 클리핑 범위를 설정한다.
모든 함수를 표시하지 않을 수도 있다.
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
마커 표현 앞에 추가되는 심벌<symbol>을 지정한다. 접두사는 음수 부호 앞에 온다.
빈 문자열을 기본값으로 갖는다.
〈symbol〉
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
빈 문자열을 나타낸다.
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
CSS에서 사용되는 기호를 나타낸다. 이미지(<image>)를 사용하는 경우 기본 개체의 크기는 1em x 1em의 정사각형이다.
〈string〉 | 〈image〉 | 〈custom-ident〉
임의의 사용자 정의 문자열을 표현한다.
모든 속성을 표시하지 않을 수도 있다.
애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.
그리드 항목이 몇 개의 열(column)로 확장되는지 또는 항목이 끝나는 열(column)의 줄의 위치를 정의한다.
그리드 항목이 시작되는 열(column)의 줄의 위치를 정의한다.
그리드 항목이 몇 개의 행(row)으로 확장되는지 또는 그리드 항목이 끝나는 행(row)의 위치를 정의한다.
그리드 항목이 시작될 행(row)의 위치를 정의한다.
하나 이상의 CSS 카운터 값을 늘리거나 줄인다.
하나 이상의 CSS 카운터를 만들거나 재설정한다.
목록의 마커의 모양을 설정한다.
2차원 이미지를 나타낸다.
〈url〉 | 〈image()〉 | 〈image-set()〉 | 〈cross-fade()〉 | 〈element()〉 | 〈gradient〉
<url>로 외부의 리소스를 연결하거나 <image-set()>, <cross-fade()>, <element()> 값으로 생성된다. 또한 그라디언트도 가능하다.
현재 image()는 지원하지 않는다.
두 가지 이상의 색상 간 점진적인 전환으로 구성된 특수한 유형의 이미지를 나타낸다.
background: linear-gradient(to right, #FF0000, #00FF00, #FFFF00);
선형 그라데이션
background: radial-gradient(#FF0000, #00FF00, #FFFF00);
원형 그라데이션
모든 함수를 표시하지 않을 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
요소의 배경과 관련된 모든 속성을 한 번에 설정하는 속기 속성이다.
선택자를 갖는 요소에 배경 이미지를 설정한다.
이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.
〈url()〉 | 〈src()〉src( 〈string〉 〈url-modifier〉* )따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
url( 〈string〉 〈url-modifier〉* ) | 〈url-token〉
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
모든 함수를 표시하지 않을 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
선택자를 갖는 요소에 배경 이미지를 설정한다.
요소의 클리핑 범위를 설정한다.
모든 함수를 표시하지 않을 수도 있다.
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
카운터 스타일이 정의되는 범위를 정의한다. 만약에 범위 밖의 카운터 값이 사용되는 경우 대체 카운터 스타일로 처리된다.
[ [ 〈integer〉 | infinite ]{2} ]# | auto
쉼표로 구분된 범위 목록을 정의한다. 각 개별 범위에 대해 첫 번째 값은 하한값이고 두 번째 값은 상한값이다. 하한값과 상한값을 모두 포함한다.
범위의 첫 번째 값으로 infinite를 지정하면 음의 무한대를 나타내고 두 번째 값으로 infinite를 지정하면 양의 무한대를 나타낸다.
하한값이 상한값보다 크면 유효하지 않으며 무시된다.
범위는 카운터 시스템에 따라 다르다.
cyclic, numeric, fixed 시스템의 경우 범위는 음의 무한대부터 양의 무한대까지이다.alphabetic, symbolic 시스템의 경우 범위는 1에서 양의 무한대이다.additive 시스템의 경우 범위는 0에서 양의 무한대이다.extends 시스템의 경우 범위는 확장 시스템에 대해 자동으로 생성되는 범위이다.범위의 첫 번째 값으로 infinite를 사용하면 음의 무한대를 나타내고 두 번째 값으로 사용하면 양의 무한대를 나타낸다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
<number-token> 유형 플래그가 'integer'인 소숫점이 없는 정수를 표현한다.
[HYPHEN-MINUS]?[0-9]
0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.
접근성을 위하여 주어진 카운터 스타일로 형식화된 카운터의 음성 형식을 합성하는 방법을 정의한다.
auto | bullets | numbers | words | spell-out | 〈counter-style-name〉
카운터 스타일의 체계가 alphabetic인 경우 이 값은 철자와 동일한 효과를 갖는다. cyclic인 경우 이 값은 블럿(bullet)과 동일한 효과를 갖는다. extends인 경우 이 값은 확장 스타일에 대해 auto와 동일한 효과를 갖는다. 그 외의 경우 이 값은 숫자와 동일한 효과를 갖는다.
정렬되지 않는 목록 항목을 나타내기 위해 유저 에이전트에 의해 정의된 구문 또는 오디오 큐가 읽혀진다.
카운터의 숫자 값은 문서의 언어로 읽혀진다.
유저 에이전트는 정상적으로 카운터 표현을 생성하고 한 글자씩 읽는다. 유저 에이전트가 특정 카운터 심벌를 읽는 방법을 모르는 경우 유저 에이전트는 speak-as 값이 numbers인 것처럼 읽을 수 있다.
유저 에이전트는 정상적으로 카운터 값을 생성하고 문서 언어의 단어로 읽는다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
트리 범위(tree-scoped)의 이름이며 ASCII 대소문자를 구분하지 않는 <custom-ident> 이다.
임의의 사용자 정의 문자열을 표현한다.
모든 속성을 표시하지 않을 수도 있다.
애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.
그리드 항목이 몇 개의 열(column)로 확장되는지 또는 항목이 끝나는 열(column)의 줄의 위치를 정의한다.
그리드 항목이 시작되는 열(column)의 줄의 위치를 정의한다.
그리드 항목이 몇 개의 행(row)으로 확장되는지 또는 그리드 항목이 끝나는 행(row)의 위치를 정의한다.
그리드 항목이 시작될 행(row)의 위치를 정의한다.
하나 이상의 CSS 카운터 값을 늘리거나 줄인다.
하나 이상의 CSS 카운터를 만들거나 재설정한다.
목록의 마커의 모양을 설정한다.
마커 표현에는 추가되는 <symbol>을 지정한다. 접미사는 음수 기호 뒤의 표현에 추가된다.
〈symbol〉
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
CSS에서 사용되는 기호를 나타낸다. 이미지(<image>)를 사용하는 경우 기본 개체의 크기는 1em x 1em의 정사각형이다.
〈string〉 | 〈image〉 | 〈custom-ident〉
임의의 사용자 정의 문자열을 표현한다.
모든 속성을 표시하지 않을 수도 있다.
애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.
그리드 항목이 몇 개의 열(column)로 확장되는지 또는 항목이 끝나는 열(column)의 줄의 위치를 정의한다.
그리드 항목이 시작되는 열(column)의 줄의 위치를 정의한다.
그리드 항목이 몇 개의 행(row)으로 확장되는지 또는 그리드 항목이 끝나는 행(row)의 위치를 정의한다.
그리드 항목이 시작될 행(row)의 위치를 정의한다.
하나 이상의 CSS 카운터 값을 늘리거나 줄인다.
하나 이상의 CSS 카운터를 만들거나 재설정한다.
목록의 마커의 모양을 설정한다.
2차원 이미지를 나타낸다.
〈url〉 | 〈image()〉 | 〈image-set()〉 | 〈cross-fade()〉 | 〈element()〉 | 〈gradient〉
<url>로 외부의 리소스를 연결하거나 <image-set()>, <cross-fade()>, <element()> 값으로 생성된다. 또한 그라디언트도 가능하다.
현재 image()는 지원하지 않는다.
두 가지 이상의 색상 간 점진적인 전환으로 구성된 특수한 유형의 이미지를 나타낸다.
background: linear-gradient(to right, #FF0000, #00FF00, #FFFF00);
선형 그라데이션
background: radial-gradient(#FF0000, #00FF00, #FFFF00);
원형 그라데이션
모든 함수를 표시하지 않을 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
요소의 배경과 관련된 모든 속성을 한 번에 설정하는 속기 속성이다.
선택자를 갖는 요소에 배경 이미지를 설정한다.
이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.
〈url()〉 | 〈src()〉src( 〈string〉 〈url-modifier〉* )따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
url( 〈string〉 〈url-modifier〉* ) | 〈url-token〉
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
모든 함수를 표시하지 않을 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
선택자를 갖는 요소에 배경 이미지를 설정한다.
요소의 클리핑 범위를 설정한다.
모든 함수를 표시하지 않을 수도 있다.
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
symbols 디스크립터는 system 디스크립터가 지정한 마커 구성 알고리즘에서 사용하는 심벌을 지정한다.
system이 cyclic, numeric, alphabetic, symbolic, fixed의 경우 symbols 디스크립터로 하나 이상의 심벌을 지정해야 한다.
〈symbol〉+아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
CSS에서 사용되는 기호를 나타낸다. 이미지(<image>)를 사용하는 경우 기본 개체의 크기는 1em x 1em의 정사각형이다.
〈string〉 | 〈image〉 | 〈custom-ident〉
임의의 사용자 정의 문자열을 표현한다.
모든 속성을 표시하지 않을 수도 있다.
애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.
그리드 항목이 몇 개의 열(column)로 확장되는지 또는 항목이 끝나는 열(column)의 줄의 위치를 정의한다.
그리드 항목이 시작되는 열(column)의 줄의 위치를 정의한다.
그리드 항목이 몇 개의 행(row)으로 확장되는지 또는 그리드 항목이 끝나는 행(row)의 위치를 정의한다.
그리드 항목이 시작될 행(row)의 위치를 정의한다.
하나 이상의 CSS 카운터 값을 늘리거나 줄인다.
하나 이상의 CSS 카운터를 만들거나 재설정한다.
목록의 마커의 모양을 설정한다.
2차원 이미지를 나타낸다.
〈url〉 | 〈image()〉 | 〈image-set()〉 | 〈cross-fade()〉 | 〈element()〉 | 〈gradient〉
<url>로 외부의 리소스를 연결하거나 <image-set()>, <cross-fade()>, <element()> 값으로 생성된다. 또한 그라디언트도 가능하다.
현재 image()는 지원하지 않는다.
두 가지 이상의 색상 간 점진적인 전환으로 구성된 특수한 유형의 이미지를 나타낸다.
background: linear-gradient(to right, #FF0000, #00FF00, #FFFF00);
선형 그라데이션
background: radial-gradient(#FF0000, #00FF00, #FFFF00);
원형 그라데이션
모든 함수를 표시하지 않을 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
요소의 배경과 관련된 모든 속성을 한 번에 설정하는 속기 속성이다.
선택자를 갖는 요소에 배경 이미지를 설정한다.
이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.
〈url()〉 | 〈src()〉src( 〈string〉 〈url-modifier〉* )따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
url( 〈string〉 〈url-modifier〉* ) | 〈url-token〉
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
모든 함수를 표시하지 않을 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
선택자를 갖는 요소에 배경 이미지를 설정한다.
요소의 클리핑 범위를 설정한다.
모든 함수를 표시하지 않을 수도 있다.
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
카운터의 정수 값을 문자열 표현으로 변환하는데 사용될 알고리즘을 지정한다.
cyclic | numeric | alphabetic | symbolic | additive | [fixed 〈integer〉?] | [ extends 〈counter-style-name〉 ]
로마 숫자와 같은 부호 값 숫자 체계를 나타내는 데 사용되며 다른 위치의 숫자를 재사용하여 다른 값을 얻는 대신 더 큰 값을 위해 추가로 숫자를 정의한다. 이러한 시스템에서 숫자의 값은 숫자의 자릿수를 더하면 알 수 있다.
additive-symbols 디스크립터를 하나 이상 포함해야 한다.
지정된 심벌를 알파벳 번호 체계에 따라 숫자로 해석한다. 알파벳 체계를 사용하여 'a' 부터 'z'까지 문자를 카운터 스타일의 심벌로 지정하면 처음 26개까지는 'a', 'b', .., 'z'로 출력이 되지만 그 이후에는 'aa', 'ab', 'ac', ... 패턴으로 계속된다.
심벌 디스크립터에는 두 개 이상의 심벌이 포함되어야 하며 그렇지 않으면 카운터 스타일이 유효하지 않다. 심벌 디스크립터에 제공된 첫 번째 카운터 심벌은 1로, 다음 심벌은 2로 해석되는 식으로 처리된다. 이 시스템은 양수 카운터 값에 대해 엄격하게 정의된다.
제공된 심벌 목록을 순환한다. 심벌 목록의 끝에 도달하면 처음으로 돌아가서 다시 시작한다. 이 시스템은 심볼이 하나만 있는 간단한 불럿(bullet) 스타일이나 여러 개의 심볼이 있는 스타일에 유용하다. 심볼 디스크립터에 심볼을 하나 이상 지정해야하며 그렇지 않으면 카운터 스타일이 유효하지 않다.
작성자가 다른 카운터 스타일의 알고리즘을 사용하되 음수 기호 또는 접미사와 같은 다른 측면을 변경할 수 있다. 카운터 스타일이 extends 시스템을 사용하는 경우 지정되지 않은 디스크립터는 초기 값을 사용하는 대신 지정된 확장 카운터 스타일에서 가져와야 한다.
symbols 또는 additive-symbols 설명자를 포함하지 않아야 한다. 그렇지 않으면 카운터 스타일 유효하지 않다.
유한한 심벌 세트를 정의한다. 이 시스템은 카운터 값이 유한한 경우에 유용하다. 심벌 디스크립터에 심벌을 하나 이상 지정해야 하며 그렇지 않으면 카운터 스타일이 유효하지 않다.
이 시스템을 지정할 때 첫 번째 심벌 값이 시작되는 위치를 나타내는 정수를 뒤에 제공할 수 있다. 생략하면 첫 번째 심벌 값은 1이 된다.
카운터 심벌을 자릿수 번호 체계의 숫자로 해석한다. 숫자 체계는 알파벳 체계와 유사하다. 다만 numberic에서는 첫 번째 카운터 기호를 0부터 해석한다.
심벌 디스크립터에 카운터 심벌을 두 개 이상 지정해야 하며 그렇지 않으면 카운터 스타일은 유효하지 않다.
제공된 심벌 목록을 순회한다. 순회 주기마다 카운터 표현에 사용되는 심벌이 두 배, 세 배 등으로 증가한다. symbols 디스크립터에 심벌을 하나 이상 지정해야 하며 그렇지 않으면 카운터 스타일은 유효하지 않다. 이 카운터 시스템은 양수 카운터 값에 대해서만 작동한다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
트리 범위(tree-scoped)의 이름이며 ASCII 대소문자를 구분하지 않는 <custom-ident> 이다.
임의의 사용자 정의 문자열을 표현한다.
모든 속성을 표시하지 않을 수도 있다.
애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.
그리드 항목이 몇 개의 열(column)로 확장되는지 또는 항목이 끝나는 열(column)의 줄의 위치를 정의한다.
그리드 항목이 시작되는 열(column)의 줄의 위치를 정의한다.
그리드 항목이 몇 개의 행(row)으로 확장되는지 또는 그리드 항목이 끝나는 행(row)의 위치를 정의한다.
그리드 항목이 시작될 행(row)의 위치를 정의한다.
하나 이상의 CSS 카운터 값을 늘리거나 줄인다.
하나 이상의 CSS 카운터를 만들거나 재설정한다.
목록의 마커의 모양을 설정한다.
<number-token> 유형 플래그가 'integer'인 소숫점이 없는 정수를 표현한다.
[HYPHEN-MINUS]?[0-9]
0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.
| Modules | ||
|---|---|---|
| Module Name | Status | Summary |
| CSS Counter Styles Level 3 | 편집자 초안 | 사용자 정의 counter 스타일을 정의할 수 있게 한 Last review date: 2022-5-30 |