CSS 카운터 증가 속성
예시
카운터("my-sec-counter")를 만들고 <h2> 선택기가 나타날 때마다 하나씩 늘립니다.
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: "Section "
counter(my-sec-counter) ". ";
}
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
속성 은 counter-increment
하나 이상의 CSS 카운터 값을 늘리거나 줄입니다.
이 counter-increment
속성은 일반적으로
counter-reset 속성 및
content 속성과 함께 사용됩니다.
기본값: | 없음 |
---|---|
상속: | 아니요 |
애니메이션 가능: | 아니요. 애니메이션 가능 에 대해 읽기 |
버전: | CSS2 |
자바스크립트 구문: | 개체 .style.counterIncrement = "하위 섹션"; |
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
counter-increment | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
CSS 구문
counter-increment: none|id|initial|inherit;
속성 값
Value | Description |
---|---|
none | Default value. No counters will be incremented |
id number | The id defines which counter to increment. The number sets how much the counter will increment on each occurrence of the selector. The default increment is 1. Negative values are allowed. If id refers to a counter that has not been initialized by counter-reset, the default initial value is 0 |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
더 많은 예
예시
카운터("my-sec-counter")를 만들고 <h2> 선택기가 나타날 때마다 하나씩 줄입니다.
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Decrement "my-sec-counter" by 1 */
counter-increment:
my-sec-counter -1;
content: "Section "
counter(my-sec-counter) ". ";
}
예시
"섹션 1:", "1.1", "1.2" 등으로 섹션 및 하위 섹션에 번호 매기기:
body
{
/* Set "section" to 0 */
counter-reset: section;
}
h1
{
/* Set "subsection" to 0 */
counter-reset: subsection;
}
h1::before
{
/* Increment "section" by 1 */
counter-increment: section;
content: "Section " counter(section) ": ";
}
h2::before {
/* Increment "subsection" by 1 */
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
예시
카운터를 만들고 <h2> 선택기가 나타날 때마다 로마 숫자를 사용하여 하나씩 증가시킵니다.
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: counter(my-sec-counter,
upper-roman) ". ";
}
관련 페이지
CSS 참조: :: 유사 요소 이전
CSS 참조: ::후 유사 요소
CSS 참조: 콘텐츠 속성
CSS 참조: counter-reset 속성
CSS 함수: counter() 함수
HTML DOM 참조: counterIncrement 속성