CSS Counter (CSS 자동 번호 매기기)

코드 작업 중 01,02,03,04와 같이 연속되는 요소의 숫자를
list의 데코레이션 말고 다른 방법과 스크립트로 말고도 처리하는 방법이 있단걸 알아서 정리해보려고 한다!

---

<style>
.gnb .gnbList {
    counter-reset: gnbCounter; 
}

.gnb .gnbItem {
    counter-increment: gnbCounter; /* li 하나마다 +1 */
}

.gnb .gnbItem .gnbNum::before {
    content: counter(gnbCounter, decimal-leading-zero); /* 01, 02, 03... */
}
</style>

CSS 카운터(counter)는 CSS만으로 자동 번호 매기기를 할 수 있는 기능!
마치 워드 문서에서 "번호 매기기" 기능을 쓰는 것처럼,
HTML은 그대로 두고 CSS가 알아서 1, 2, 3... 순서를 붙여주는거다!

한 줄씩 뜯어보자

1. counter-reset: gnbCounter;

.gnb .gnbList { counter-reset: gnbCounter; }

gnbCounter는 임의로 지은 카운터 변수 이름(원하는 이름 아무거나 가능, myNum이든 abc든 상관없)
counter-reset은 "여기서부터 이 카운터를 0으로 초기화해서 새로 시작할게"라는 뜻!
.gnbList(즉 <ul>)에 선언했으니, 분류 리스트가 시작될 때마다 카운터를 0부터 새로 센다는 의미이다.

2. counter-increment: gnbCounter;

.gnb .gnbItem { counter-increment: gnbCounter; }

.gnbItem은 각각의 <li>이다.
counter-increment는 "이 요소를 만날 때마다 카운터를 1씩 증가시켜라"는 뜻!
즉, <li>가 하나 나올 때마다 gnbCounter가 0→1, 1→2, 2→3... 이렇게 자동으로 처리

3. content: counter(gnbCounter, decimal-leading-zero);

.gnb .gnbItem .gnbNum::before { content: counter(gnbCounter, decimal-leading-zero); }
이 부분이 실제로 화면에 숫자를 보여주는 코드이다. 세 가지 요소가 합쳐져 있습니다.

::before: 이건 "가상 요소(pseudo-element)"라는 개념인데,
.gnbNum 이라는 실제 태그(span) 안쪽 맨 앞에 가짜 콘텐츠를 하나 끼워 넣는다는 뜻.
HTML 코드를 건드리지 않고도 CSS만으로 글자를 추가할 수 있게 해준다.
content:: ::before나 ::after를 쓸 땐 반드시 content 속성으로 "무엇을 넣을지" 지정.

counter(gnbCounter, decimal-leading-zero)

"현재 gnbCounter 값을 가져와서,한 자리 숫자면 앞에 0을 붙여서 보여줘"라는 뜻.
(decimal-leading-zero가 바로 01, 02 처럼 0을 채워주는 스타일 옵션)

전체 흐름 정리

<ul class="gnbList">          ← 여기서 카운터 0으로 리셋
  <li class="gnbItem">        ← 카운터 +1 (→ 1) → 화면엔 "01"
    <span class="gnbNum">     ← ::before로 "01" 삽입
  <li class="gnbItem">        ← 카운터 +1 (→ 2) → 화면엔 "02"
  <li class="gnbItem">        ← 카운터 +1 (→ 3) → 화면엔 "03"
  <li class="gnbItem">        ← 카운터 +1 (→ 4) → 화면엔 "04"
</ul>

즉, HTML의 <li> 개수가 바뀌어도(분류가 5개, 6개가 되어도) CSS가 알아서 순서대로 번호를 매겨준다는 게 핵심! JS 없이도 자동 인덱싱이 되는 거죠.