CSS counter-increment 속성 사용 방법 및 예제

counter-increment CSS 속성은 하나나 여러 개의 카운터 값을 증가시킵니다. 이 속성은 자동 번호 기능을 만드는 데 매우 유용합니다.

다음 표는 이 속성의 사용 설명과 버전 기록, 그리고 이 속성이 JavaScript 스크립트에서 사용하는 문법입니다.

counter-increment 사용 문법

이 속성의 문법은 다음과 같습니다:

counter-increment: [ identifier integer ]1　or more pairs | none | initial | inherit

아래 예제는 counter를 사용하는 방법을 보여줍니다。-increment 속성。

　　body {
　　　counter-reset: section;
　　}
　　h1　{
　　　counter-reset: category;
　　}
　　h1:before {
　　　counter-increment: section;
　　　content: "Section " counter(section) ". ";　　　　　
　　}
　　h2:before {
　　　counter-increment: category;
　　　content: counter(section) "." counter(category) " ";
　　}

속성 값

아래 표는 이 속성의 값을 설명합니다。

브라우저 호환성

counter-increment 속성의 브라우저 호환성, 아래 표의 숫자는 이 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다; 모든 주요 브라우저는 이 속성을 지원합니다。

더 읽기

다음 튜토리얼을 참조하십시오:CSS 가상 요소。

관련 속성:content，counter-reset。