CSS counter 자동 번호

핵심 개념

counter-reset으로 카운터를 초기화하고 counter-increment로 증가시킵니다. ::before의 content:counter(이름)으로 현재 값을 표시합니다. decimal-leading-zero는 01, 02 형식으로 출력합니다. HTML li 마커 없이 CSS만으로 자동 번호 시스템을 구현할 수 있습니다. counter-increment를 지우며 번호가 사라지는 것을 확인하십시오.

코드 분석

CSS3📋 코드 (7줄)

<style>.cc-list{list-style:none;counter-reset:termination;padding:0;margin:0;font-family:monospace;}.cc-list li{counter-increment:termination;padding:10px 10px 10px 44px;position:relative;border-bottom:1px solid #1a1a1a;color:#e8e8e8;font-size:13px;}.cc-list li::before{content:counter(termination,decimal-leading-zero);position:absolute;left:10px;color:#10b981;font-weight:bold;font-size:14px;}</style>
<ul class='cc-list'>
  <li>HTML 구조 해체 완료</li>
  <li>CSS 스타일 실험 진행중</li>
  <li>JavaScript 신경망 절단 대기</li>
  <li>React 컴포넌트 분해 예정</li>
</ul>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 CSS 'CSS counter 자동 번호' 코드에서
레이아웃·우선순위·반응형 버그를 찾고
수정 코드와 원인을 단계별로 설명해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'CSS counter 자동 번호'를 사용한 실전 UI 컴포넌트를
3가지 만들어줘. 모바일 반응형까지 포함된 완성 코드로.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 CSS 'CSS counter 자동 번호' 관련 코드 전체를 분석해서
중복 속성, 미사용 셀렉터, 성능 저하 요소를
우선순위별로 정리해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

'CSS counter 자동 번호'가 2026년에도 최선의 방법인지
최신 CSS(컨테이너 쿼리, :has, 서브그리드 등) 기능과 비교해서
솔직히 평가해줘.

⭐ 이것만 기억하세요

CSS counter 자동 번호는 이 3가지만 확실히 잡으세요

1.HTML에서 번호를 수동으로 매기면 항목 순서가 바뀔 때마다 전체 번호를 다시 수정해야 합니다

2.counter-reset으로 초기화하고 counter-increment로 증가시키면 CSS가 자동으로 순차 번호를 생성합니다

3.다음 챕터에서 스크롤 위치를 특정 지점에 자동으로 맞추는 scroll-snap을 배웁니다

💬 이 챕터 질문 보기

CSS3 · CH.32 — 질문하거나 답변을 확인하세요

→

진행도 32 / 34

← 커리큘럼으로 ← 목록으로 (CSS3)