counterReset 속성이란?
HTML DOM의 counterReset 속성은 CSS 카운터를 특정 값으로 초기화하거나 새로 생성할 때 사용하는 속성입니다. 주로 카운터 값을 증가·감소시키는 counterIncrement 속성과 함께 사용되며, 두 속성을 조합하면 목록 번호 등을 자유롭게 제어할 수 있습니다.
문법(Syntax)
counterReset 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.counterReset = "none | name number | initial | inherit"
속성값 설명
| 값 | 설명 |
|---|---|
| none | 기본값으로, 어떤 카운터도 초기화하지 않습니다. |
| name | 지정한 이름(name)의 카운터를 초기화합니다. |
| id number | 선택자가 나타날 때마다 해당 ID의 카운터를 지정한 숫자 값으로 초기화합니다. 기본 초기화 값은 0입니다. |
| initial | 이 속성을 기본(initial) 값으로 설정합니다. |
| inherit | 부모 요소의 속성 값을 상속받습니다. |
예제
다음 예제는 목록 항목 뒤에 카운터 값을 표시하고, 버튼 클릭 시 counterReset 속성을 변경하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
li::after {
counter-increment: demo_var 10;
content: " " counter(demo_var) ".";
}
</style>
<script>
function changeCounterReset(){
document.getElementsByTagName("ul")[0].style.counterReset="demo_var";
document.getElementById("Sample").innerHTML="순서 없는 목록의 카운터 초기화 값은 demo_var입니다.";
}
</script>
</head>
<body>
<ul>
<li>Demo =</li>
<li>Demo =</li>
<li>Demo =</li>
<li>Demo =</li>
<li>Demo =</li>
<li>Demo =</li>
</ul>
<p>아래 버튼을 클릭하면 위 목록의 counterReset 값이 변경됩니다.</p>
<button onclick="changeCounterReset()">counterReset 변경</button>
<p id="Sample"></p>
</body>
</html>
실행 결과
페이지를 처음 열면 각 목록 항목 뒤에 10씩 증가하는 카운터 값이 표시됩니다.
“counterReset 변경” 버튼을 클릭하면 다음과 같이 카운터 초기화 값이 적용됩니다.
참고 사항
counterReset 속성만으로는 화면에 아무 변화가 나타나지 않으며, 반드시 counter-increment 속성과 content 속성의 counter() 함수를 함께 사용해야 카운터 값을 확인할 수 있습니다. 이 속성은 목록 번호를 사용자 정의하거나 문서 내 장·절 번호를 자동으로 생성할 때 특히 유용합니다.