CSS / 자동 증가하는 일련 번호 붙이기

CSS 카운터를 사용하면 제목마다 번호를 직접 입력하지 않아도 순서에 맞춰 일련번호를 표시할 수 있습니다. counter-reset으로 카운터를 만들고, counter-increment로 값을 증가시킨 뒤, 가상 요소의 content에서 counter() 함수로 출력합니다. HTML 내용이 아니라 화면 표시 규칙으로 번호를 관리하는 방법입니다.

초기화·증가·출력을 나누어 설정하기

카운터에는 chapter처럼 용도를 알아볼 수 있는 이름을 붙입니다. 부모에 counter-reset: chapter 0을 지정하면 0으로 시작하는 카운터를 만들고, 번호를 붙일 요소에 counter-increment: chapter를 지정하면 1씩 증가합니다. 증가가 먼저 반영되므로 첫 요소에 표시되는 번호는 1입니다.

counter()는 CSS 속성이 아니라 카운터의 표시 문자열을 만드는 함수입니다. content: counter(chapter) ". "처럼 숫자와 문자열을 함께 조합할 수 있습니다. content를 표시할 ::before 또는 ::after 가상 요소도 필요하며, counter-increment만 선언하면 번호가 눈에 나타나는 것은 아닙니다.

전체 예제: 장·절 번호를 함께 표시하기

다음 코드를 css-counters.html로 저장해 브라우저에서 엽니다. 하나의 h1 아래에 장 제목 h2와 하위 제목 h3를 둡니다. 장 번호는 main에서 초기화하고, 절 번호는 각 chapter 안에서 새로 시작하도록 했습니다. 라이브러리나 JavaScript는 필요하지 않습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS 카운터로 장과 절 번호 붙이기</title>
  <style>
    body { margin: 20px; font: 16px/1.6 "Noto Sans KR", sans-serif; color: #203348; }
main { counter-reset: chapter 0; max-width: 650px; }
    .chapter { counter-increment: chapter; counter-reset: topic 0; }
    .chapter > h2::before { content: "제 " counter(chapter) "장. "; color: #126f86; }
    .chapter h3 { counter-increment: topic; }
    .chapter h3::before { content: counter(chapter) "." counter(topic) " "; color: #126f86; }
  </style>
</head>
<body>
<main>
  <h1>CSS 학습 구성</h1>
  <section class="chapter">
    <h2>선택자</h2>
    <h3>클래스 선택자</h3>
    <p>class 속성으로 요소를 선택합니다.</p>
    <h3>아이디 선택자</h3>
    <p>id 속성으로 요소를 선택합니다.</p>
  </section>
  <section class="chapter">
    <h2>박스 모델</h2>
    <h3>안쪽 여백</h3>
    <p>padding으로 내용과 테두리 사이를 조절합니다.</p>
    <h3>바깥 여백</h3>
    <p>margin으로 요소 바깥 공간을 조절합니다.</p>
  </section>
</main>
</body>
</html>

장 제목은 “제 1장. 선택자”, “제 2장. 박스 모델”로 보입니다. 각 장의 두 하위 제목은 1.1·1.2와 2.1·2.2가 됩니다. 두 번째 chapter에서 topic을 0으로 다시 만들기 때문에 절 번호가 앞 장에서 이어지지 않습니다. chapter의 제목과 하위 제목을 같은 section 안에 묶으면 카운터의 적용 범위도 이해하기 쉽습니다.

시작 번호·증가량·표시 형식 바꾸기

첫 장을 5부터 표시하려면 main의 초기값만 counter-reset: chapter 4로 바꿉니다. 첫 chapter에서 1이 더해져 5가 되고 다음 장은 6이 됩니다. 확인한 뒤 0으로 되돌리세요. 이번에는 chapter의 선언만 counter-increment: chapter 2로 바꾸면 장 번호가 2, 4로 표시됩니다. 두 설정을 동시에 바꾸지 말고 한 값씩 비교합니다.

로마 숫자를 쓰려면 h2::before의 content만 다음과 같이 교체합니다. 이는 숫자의 표시 형식을 바꾸며 카운터의 증가 규칙을 바꾸지는 않습니다. 같은 예제에서 하위 제목을 그대로 두면 그 부분은 계속 십진수로 표시되므로 사이트의 번호 체계에 맞춰 함께 정할 수 있습니다.

.chapter > h2::before {
  content: "제 " counter(chapter, upper-roman) "장. ";
}

기본 초기값 0과 증가량 1에서 장 제목은 I, II로 바뀝니다. 소문자 알파벳 등 다른 목록 스타일도 사용할 수 있으며, 단순히 번호 앞에 0을 붙이고 싶은 경우에는 decimal-leading-zero 같은 표시 스타일을 검토할 수 있습니다.

적용 범위와 HTML 목록을 선택할 기준

장 안의 h3를 하나 더 추가하면 뒤의 절 번호가 자동으로 바뀝니다. HTML의 제목 텍스트에 이미 “1.”을 입력해 둔 상태에서 카운터도 적용하면 번호가 중복되므로 둘 중 한 곳에서만 관리하세요. 특정 영역에만 적용하려면 예제처럼 chapter 내부로 선택자 범위를 제한해 다른 제목이 카운터를 증가시키지 않게 합니다.

작업 순서 자체가 의미 있는 목록이라면 CSS 번호 대신 <ol>과 <li>를 먼저 사용하세요. 카운터의 가상 요소 텍스트는 보조 기술이나 복사·내보내기 환경에서 취급이 달라질 수 있으므로 중요한 식별자를 화면 장식에만 맡기지 않는 것이 좋습니다. CSS 번호는 문서 배치에 따라 다시 계산되며 데이터에 저장된 고유 번호를 대신하지 않습니다.

카운터의 범위와 출력 방식은 MDN의 CSS 카운터 안내와 W3C의 자동 번호와 카운터 정의를 참고할 수 있습니다.