CSS 카운터로 제목이나 목록 번호를 자동 생성합니다.
counter-reset으로 시작하고 counter-increment로 증가시키며 content에서 counter() 값을 표시합니다. 시각적 번호일 뿐 문서 의미에는 HTML ol이 더 적합할 수 있습니다.
이번 예제의 출발점은 counter-reset: section; counter-increment: section;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 카운터 시작값을 3으로 바꾸세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
화면에 보이는 카운터 값이 데이터나 접근 가능한 이름으로 반드시 전달된다고 가정하지 마세요.
직접 바꿔보세요카운터 시작값을 3으로 바꾸세요.