CSS 카운터

피자

햄버거

핫도그

CSS 카운터는 CSS가 유지하는 "변수"로, 값은 CSS 규칙을 통해 증가할 수 있습니다(사용 횟수를 추적합니다).

카운터는 문서 내 위치에 따라 외관을 조정할 수 있습니다.

카운터가 포함된 자동 번호

CSS 카운터는 "변수"처럼 사용됩니다. 변수 값은 CSS 규칙을 통해 증가할 수 있습니다(사용 횟수를 추적합니다).

CSS 카운터를 사용하려면 다음 속성을 사용합니다：

  • counter-reset - 카운터 생성 또는 초기화
  • counter-increment - 카운터 값 증가
  • content - 생성된 내용 삽입
  • counter() 또는 counters() 함수 - 카운터의 값을 요소에 추가

CSS 카운터를 사용하려면 먼저 counter-reset 그것을 생성하세요。

아래 예제는 페이지(<body 선택자에서)에 카운터를 생성한 후 각 <h2> 요소에 카운터 값을 증가시키고 각 <h2> 요소의 시작에 "Section <카운터 값>:"를 추가합니다：

예제

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

직접 시험해 보세요

임베디드 카운터

아래 예제는 페이지(서론)에 카운터를 생성하고 각 <h1> 요소(서브 서론)에 카운터를 생성합니다.

"section" 카운터는 각 <h1> 요소에 대해 카운트하며 "Section" 및 section 카운터의 값을 기록합니다. "subsection" 카운터는 각 <h2> 요소에 대해 카운트하며 section 카운터의 값과 subsection 카운터의 값을 기록합니다：

예제

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

직접 시험해 보세요

카운터는 서론 목록을 생성하는 데도 매우 유용합니다. 이는 자동으로 카운터의 새 인스턴스가 서브 요소에서 생성되기 때문입니다. 여기서는 counters() 함수는 다른 수준의 임베디드 카운터 간에 문자열을 삽입합니다：

예제

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

직접 시험해 보세요

CSS 카운터 속성

속성 설명
content ::before와 ::after 의사 요소와 함께 사용하여 생성된 내용을 삽입합니다.
counter-increment 한 개나 여러 개의 카운터 값을 증가시킵니다.
counter-reset 한 개나 여러 개의 카운터를 생성하거나 초기화합니다.