하나 이상의 CSS 카운터 값을 늘리거나 줄인다.
카운터의 값을 지정하고자 할 때는 상위 요소에게 counter-reset
속성으로 사용하고자 하는 카운터 명(<custom-name>)을 지정해야 한다.
[ <counter-name> <integer>? ]+ | none
<counter-name>
에서는 상위 요소에서 counter-reset
속성으로 재설정한 카운터의 이름을 지정한다.
<integer>
는 시작 값으로 지정되며 생략시 0
의 기본 값을 갖는다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
<custom-ident> 타입의 카운터의 이름을 나타낸다.
임의의 사용자 정의 문자열을 나타낸다.
모든 속성을 표시하지 않을 수도 있다.
애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.
그리드 항목이 몇 개의 열(column)로 확장되는지 또는 항목이 끝나는 열(column)의 줄의 위치를 정의한다.
그리드 항목이 시작되는 열(column)의 줄의 위치를 정의한다.
그리드 항목이 몇 개의 행(row)으로 확장되는지 또는 그리드 항목이 끝나는 행(row)의 위치를 정의한다.
그리드 항목이 시작될 행(row)의 위치를 정의한다.
하나 이상의 CSS 카운터를 만들거나 재설정한다.
목록의 마커의 모양을 설정한다.
<number-token>
유형 플래그가 'integer
'인 소숫점이 없는 정수를 표현한다.
[HYPHEN-MINUS]?[0-9]
0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.
다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.
어떠한 값도 설정하지 않음을 나타낸다.
counter-increment: [<counter-name> <integer>?]+;
실제로 카운트가 설정되는 요소의 상위 요소에게 아래와 같이 counter-reset
속성에서 사용하고자 하는 카운터 명을 재설정해야 한다.
counter-reset: <counter-name>;
element.style.counterIncrement = "mycounter 1";
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Lists and Counters Module Level 3 | 초안 작업 | 목록 카운터와 관련된 스타일, 위치 지정 및 값을 조정하는 기능을 설명한다. Last review date: 2022-5-28 |