CSS 카운터 세트 속성

정의와 사용법

counter-set 속성은 CSS 계산기를 생성하고 특정 값으로 설정하는 데 사용됩니다.

counter-set 속성은 일반적으로 counter-increment 속성과 content 속성과 함께 사용됩니다.

예시

예제 1

계산기("my-counter")를 생성하고, 5로 설정하고, <h2> 선택자가 매번 나타날 때마다 1을 증가시킵니다:

body {
  /* "my-counter"를 5로 설정 */
  counter-set: my-counter 5;
}
h2::before {
  /* "my-counter"를 1 증가시킵니다 */
  counter-increment: my-counter;
  content: "부문 " counter(my-counter) ". ";
}

직접 시도해보세요

예제 2

계산기("my-counter")를 생성하고, 5로 설정하고, <h2> 선택자가 매번 나타날 때마다 1을 감소시킵니다:

body {
  /* "my-counter"를 5로 설정 */
  counter-set: my-counter 5;
}
h2::before {
  /* "my-counter"를 1 감소시킵니다 */
  counter-increment: my-counter -1;
  content: "부문 " counter(my-counter) ". ";
}

직접 시도해보세요

예제 3

부문과 서브 부문 번호를 위해 "Section 10:", "10.1", "10.2" 등의 형식을 사용합니다:

body {
  /* "부문"을 9로 설정 */
  counter-set: 부문 9;
}
h1 {}}
  /* "subsection"를 0으로 설정합니다 */
  counter-set: subsection 0;
}
h1::before {
  /* "section"를 1 증가시킵니다 */
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
h2::before {
  /* "subsection"를 1 증가시킵니다 */
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

직접 시도해보세요

예제 4

계산기를 9으로 설정하고, <h2> 선택자가 나타날 때마다 1을 증가시키며 (로마 숫자를 사용합니다), 생성합니다:

body {
  /* "my-counter"를 9으로 설정합니다 */
  counter-set: my-counter 9;
}
h2::before {
  /* "my-counter"를 1 증가시킵니다 */
  counter-increment: my-counter;
  content: counter(my-counter, upper-roman) ". ";
}

직접 시도해보세요

CSS 문법

counter-set: none|counter-name number|initial|inherit;

속성 값

브라우저 지원

표에서의 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

관련 페이지

참조:::before 가상 요소

참조:::after 가상 요소

참조:CSS 컨텐트 속성

참조:CSS 카운터 인크리먼트 속성

참조:CSS counter() 함수