CSS에서 counter-reset 속성은 새로운 카운터를 생성하거나 기존 카운터의 값을 초기화할 때 사용하는 속성입니다. 문서 내 특정 요소에 자동 번호를 매기고 싶을 때 counter-increment 및 content 속성과 함께 사용하면 매우 유용합니다.
counter-reset 속성의 동작 원리
counter-reset은 지정한 선택자가 나타나는 시점에 카운터를 0(또는 지정한 값)으로 설정합니다. 이후 counter-increment로 카운터 값을 증가시키고, ::before 또는 ::after 가상 요소의 content 속성에서 counter() 함수를 호출해 번호를 화면에 표시할 수 있습니다.
주요 속성 조합
- counter-reset: 카운터를 생성하거나 특정 값으로 초기화
- counter-increment: 카운터 값을 1씩(또는 지정한 값만큼) 증가
- content + counter(): 증가된 카운터 값을 콘텐츠로 출력
counter-reset 사용 예제
아래 예제는 body 요소에서 'section'이라는 이름의 카운터를 초기화하고, 각 <h2> 제목 앞에 자동으로 "Fruit 1 -", "Fruit 2 -" 형태의 번호를 붙여주는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Fruit " counter(section) " - ";
}
</style>
</head>
<body>
<h1>Fruits</h1>
<h2>Mango</h2>
<h2>Kiwi</h2>
</body>
</html>
실행 결과
- Fruit 1 - Mango
- Fruit 2 - Kiwi
이처럼 counter-reset을 활용하면 HTML 목록 태그 없이도 제목이나 섹션에 체계적인 자동 번호를 부여할 수 있어, 긴 문서나 튜토리얼 페이지의 구조화에 큰 도움이 됩니다.