CSS 카운터: 스타일리시한 번호 지정 기능 활용 가이드

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

웹 개발자, 스타일링 및 레이아웃 작업에 관심 있는 개발자, JavaScript 사용을 피하고자 하는 경우

핵심 요약

• counter-reset와 counter-increment를 통해 카운터 변수를 초기화 및 증가할 수 있음
• ::before/::after와 counter() 함수를 결합하여 동적 번호 표시 가능
• counters() 함수를 사용한 중첩 구조(예: 1.1, 1.2) 및 스타일 커스터마이징(예: upper-roman) 지원
• JavaScript 의존 없이 가볍고 유지보수가 쉬운 번호링 솔루션 제공

섹션별 세부 요약

1. CSS 카운터 소개

• counter() 함수는 HTML 리스트 대신 동적 번호 생성에 사용 가능
• counter-reset으로 초기값 설정, counter-increment로 증가값 지정
• content 프로퍼티와 결합하여 ::before/::after에 번호 삽입 가능

2. 기본 사용법

• body { counter-reset: section; }로 카운터 초기화
• h2 { counter-increment: section; }로 각 요소별 카운터 증가
• h2::before { content: "Section " counter(section) ": "; }로 "Section 1:", "Section 2:" 형태 표시

3. 중첩 구조 및 커스터마이징

• counters(section, ".")로 중첩 번호(예: 1.1, 1.2) 생성
• counter(section, upper-roman)으로 로마자(예: I, II) 또는 알파벳(예: a, b) 스타일 적용
• div.chapter { counter-reset: subsection; }로 세그먼트별 카운터 리셋 가능

4. 활용 사례 및 제한사항

• 사용 예시: 커스텀 목록, 단계별 가이드, 자동 업데이트되는 네비게이션
• 장점: 가볍고 유지보수가 쉬움, CSS만으로 구현 가능
• 제한: 복잡한 로직은 JavaScript 필요, 브라우저 호환성 테스트 필요

결론

• counter()와 counters()를 활용해 스타일리시한 번호링을 구현할 수 있음
• 중첩 구조와 커스터마이징 옵션을 통해 다양한 디자인 적용 가능
• 초기 구현은 간단한 예제부터 시작, 복잡한 프로젝트에서는 JavaScript와 병행 사용 권장