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

counter-resetCSS 속성과 counter-increment 속성을 조합하여 자동 증가하는 카운터를 만들고, content 속성과 함께 생성된 카운터 값을 표시합니다.

이 표는 이 속성의 사용 설명과 버전 기록, 그리고 이 속성이 자바스크립트 스크립트에서 사용하는 문법을 나타냅니다.

counter-reset 사용 문법

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

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

다음 예제는 counter를 사용하는 방법을 보여줍니다.-reset 속성.

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

더 읽기

다음 튜토리얼을 참조하세요:CSS 패seudo 요소。

관련 속성:content，counter-increment。