본문 바로가기
카테고리 없음

CSS Counter로 자동 번호 매기기 완성 — JS 없이 목차·순위 콘텐츠 4가지 구현법

by BOOST YOUR INFORMATION 2026. 4. 17.

 

CSS Counter로 자동 번호 매기기 완성 — JS 없이 목차·순위 콘텐츠 4가지 구현법 참고 이미지
CSS Counter로 자동 번호 매기기 완성

CSS Counter로 자동 번호 매기기 완성 - JS 없이 목차·순위 콘텐츠 4가지 구현법

"CSS Counter"를 쓰면 JavaScript 한 줄 없이 목차 번호, 순위 번호, 단계별 가이드 번호를 자동으로 붙일 수 있다. 블로그 글에 번호가 있는 목차나 TOP 10 랭킹 콘텐츠를 만들 때, 항목을 추가하거나 삭제할 때마다 번호를 수동으로 수정한 경험이 있을 거다. 그 번거로움이 CSS 몇 줄로 해결된다. 마치 엑셀 수식처럼, 항목이 늘어나면 번호가 자동으로 따라온다.

 

📋 목차

🔢 CSS Counter가 뭔가

CSS Counter는 CSS 자체에 내장된 카운팅 기능이다. HTML에 숫자를 직접 입력하지 않아도, CSS가 알아서 요소를 세어서 번호를 붙여준다. counter-reset으로 카운터를 초기화하고, counter-increment로 증가시키고, counter()로 화면에 출력한다. 이 세 가지가 전부다.

ol 태그의 자동 번호와 비슷하지만, CSS Counter는 스타일을 훨씬 자유롭게 조절할 수 있다. 번호 앞에 텍스트 붙이기, 색상 변경, 크기 조절, 원형 배지 형태로 만들기 등 디자인 제약이 없다.

⚙️ CSS Counter 작동 원리 3단계

개념을 코드로 바로 보는 게 제일 빠르다.


/* 1단계: 카운터 초기화 (부모 요소에 선언) */
.list-wrapper {
  counter-reset: my-counter;
}

/* 2단계: 카운터 증가 (번호 붙일 요소에 선언) */
.list-wrapper li {
  counter-increment: my-counter;
}

/* 3단계: 번호 출력 (::before 가상 요소에 삽입) */
.list-wrapper li::before {
  content: counter(my-counter);
}

counter-reset은 카운터 이름을 정의하고 0으로 시작시킨다. counter-increment는 해당 요소가 나타날 때마다 1씩 올린다. content: counter()는 현재 카운터 값을 ::before 가상 요소에 텍스트로 출력한다. 이 흐름만 잡으면 "CSS Counter"는 어렵지 않다.

📋 자동 목차 번호 만들기

블로그 목차에 번호를 자동으로 붙이는 실전 코드다.


<nav class="toc">
  <ul>
    <li>CSS Counter가 뭔가</li>
    <li>작동 원리 3단계</li>
    <li>자동 목차 번호 만들기</li>
  </ul>
</nav>

.toc ul {
  counter-reset: toc-counter;
  list-style: none;
  padding: 0;
}

.toc li {
  counter-increment: toc-counter;
  padding: 8px 0 8px 48px;
  position: relative;
  border-bottom: 1px solid #eee;
}

.toc li::before {
  content: counter(toc-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-weight: bold;
  color: #3B82F6;
  font-size: 0.9rem;
}

decimal-leading-zero는 01, 02, 03처럼 앞에 0을 붙여준다. 목차가 10개 넘어가면 시각적으로 더 깔끔하다. 목차 항목이 추가되거나 삭제되어도 번호는 자동으로 재정렬된다.

🏆 순위형 TOP 리스트 만들기

TOP 10, 베스트 5 같은 순위형 콘텐츠에 "CSS Counter"를 적용하면 1위, 2위 뱃지를 자동으로 붙일 수 있다.


.rank-list {
  counter-reset: rank-counter;
  list-style: none;
  padding: 0;
}

.rank-list li {
  counter-increment: rank-counter;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  margin-bottom: 8px;
  background: #f9fafb;
  border-radius: 8px;
}

.rank-list li::before {
  content: counter(rank-counter);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #3B82F6;
  color: white;
  border-radius: 50%;
  font-weight: bold;
  flex-shrink: 0;
}

/* 1, 2, 3위 강조 */
.rank-list li:nth-child(1)::before { background: #F59E0B; }
.rank-list li:nth-child(2)::before { background: #9CA3AF; }
.rank-list li:nth-child(3)::before { background: #B45309; }

:nth-child로 1, 2, 3위에 금은동 색상을 따로 지정하면 시각적으로 더 임팩트 있다. HTML에는 숫자를 한 글자도 안 쓰고 이렇게 만들 수 있다.

📌 단계별 가이드(Step) 만들기

튜토리얼, 설치 가이드, 레시피처럼 순서가 중요한 콘텐츠에 단계 번호를 자동으로 붙이는 방법이다.


.step-guide {
  counter-reset: step-counter;
}

.step-guide .step {
  counter-increment: step-counter;
  padding-left: 56px;
  position: relative;
  margin-bottom: 32px;
}

.step-guide .step::before {
  content: "STEP " counter(step-counter);
  position: absolute;
  left: 0;
  top: 0;
  background: #10B981;
  color: white;
  font-size: 0.7rem;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

content: "STEP " counter(step-counter)처럼 텍스트와 숫자를 함께 붙일 수 있다. "STEP 1", "STEP 2" 형태가 자동으로 출력된다. 순서가 바뀌어도 번호는 항상 올바르게 유지된다.

🔁 중첩 번호 매기기 — 1.1, 1.2 형식

문서형 블로그나 가이드에서 1.1, 1.2, 2.1 같은 계층적 번호가 필요할 때가 있다. CSS Counter는 중첩도 지원한다.


.doc ol {
  counter-reset: section;
  list-style: none;
}

.doc ol li {
  counter-increment: section;
}

.doc ol li::before {
  content: counters(section, ".") " ";
}

counters()(복수형)를 쓰면 상위 카운터 값을 포함한 중첩 번호가 출력된다. "."은 계층 사이 구분자다. 1.1, 1.2, 2.1, 2.2 형식이 자동으로 생성된다.

⚠️ CSS Counter 쓸 때 주의할 점

counter-reset은 카운터를 리셋하는 요소에만 적용해야 한다. 예를 들어 글 목록 페이지에서 여러 개의 목차를 쓴다면, 각 목차의 부모 컨테이너에 개별적으로 counter-reset을 선언해야 각 목차가 독립적으로 1번부터 시작된다.

생성된 번호(::before 콘텐츠)는 복사가 안 된다. 사용자가 글을 드래그해서 복사할 때 CSS로 생성된 번호는 포함되지 않는다. 번호가 복사 내용에 포함되어야 한다면 HTML에 직접 입력해야 한다.

SEO 측면에서 가상 요소 콘텐츠는 인덱싱에 불안정하다. 구글이 ::before의 content를 읽기는 하지만, 중요한 키워드는 HTML에 직접 넣는 게 안전하다.

✅ 정리

"CSS Counter"는 알고 나면 쓸 곳이 생각보다 많다. 목차, 순위 리스트, 단계 가이드, 중첩 번호까지 JavaScript 없이 전부 구현된다. 특히 항목을 자주 수정하는 콘텐츠에서 진가를 발휘한다. 번호 수정 때문에 글 수정에 드는 시간이 확 줄어든다. 오늘 포스트에서 하나라도 바로 적용해보자.

참고 자료 및 출처

저작자표시 비영리 동일조건 (새창열림)

소개 및 문의 · 개인정보처리방침 · 면책조항

© 2026 ⚡ 정보 부스터 🚀

티스토리툴바

티스토리툴바