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-reset
하나 이상의 CSS 카운터를 생성하거나 재설정합니다.
이 counter-reset
속성은 일반적으로
counter-increment 속성 및
content 속성과 함께 사용됩니다.
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
counter-reset | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
CSS 구문
counter-reset: none|name number|initial|inherit;
속성 값
Value | Description |
---|---|
none | Default value. No counters will be reset |
id number | The id defines which counter to reset. The number sets the value the counter is reset to on each occurrence of the selector. The default number 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 참조: 카운터 증가 속성
CSS 함수: counter() 함수
HTML DOM 참조: counterReset 속성