[CSS] counter 사용법

카운터 값 조작하기

CSS counter를 사용하려면 먼저 counter-reset (en-US) 속성(초깃값 0)을 사용하여 초기화 해야합니다. 동일한 속성으로 값을 특정 값으로 바꿀 수도 있습니다. 초기화 된 counter의 값은 counter-increment (en-US)에 따라 증가하거나 감소합니다. counter의 이름으로 "none", "inherit", "initial"은 사용불가합니다. 이런 이름을 사용하면 선언은 무시됩니다.

 

기본 예제

여기서는 제목 앞에 숫자를 붙여봅니다.

CSS

body {
  counter-reset: section;                       /* counter 이름을 'section'으로 지정합니다.
                                                   초깃값은 0입니다. */
}

h3::before {
  counter-increment: section;                   /* section의 카운터 값을 1씩 증가시킵니다. */
  content: "Section " counter(section) ": ";    /* section의 카운터 값을 표시합니다. */
}

Copy to ClipboardCopy to Clipboard

HTML

<h3>Introduction</h3>
  <h3>Body</h3>
  <h3>Conclusion</h3>

Copy to ClipboardCopy to Clipboard

결과

 

 

참고> 

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters#%EC%B9%B4%EC%9A%B4%ED%84%B0_%EA%B0%92_%EC%A1%B0%EC%9E%91%ED%95%98%EA%B8%B0

CSS 카운터 사용하기 - CSS: Cascading Style Sheets | MDN