HTML DOM Style counterIncrement 속성 – CSS 카운터 값 증가·감소 방법 총정리

HTML DOM의 Style counterIncrement 속성은 하나 이상의 CSS 카운터(counter) 값을 증가시키거나 감소시키는 데 사용되는 속성입니다. 이 속성은 보통 counterReset 속성과 content 속성과 함께 사용되어 목록 항목에 자동 번호를 매기는 등의 기능을 구현할 때 활용됩니다.

counterIncrement 속성 문법

counterIncrement 속성을 설정하는 기본 문법은 다음과 같습니다.

object.style.counterIncrement = "none|id|initial|inherit";

각 속성값의 의미는 아래 표와 같습니다.

값	설명
none	기본값(default)으로, 카운터를 증가시키지 않습니다.
id number	지정한 id에 해당하는 카운터를 주어진 숫자만큼 증가시킵니다. 기본 증가값은 1이며, 0이나 음수 값도 사용할 수 있습니다.
initial	해당 속성을 초기값으로 설정합니다.
inherit	부모 요소의 속성값을 상속받습니다.

counterIncrement 속성 예제

다음 예제는 버튼을 클릭하면 목록(li) 요소의 카운터 증가값을 변경하는 코드입니다.

<!DOCTYPE html>
<html>
<head>
<style>
    ul {
        counter-reset: demo_var;
    }
    li::after {
        counter-increment: demo_var 10;
        content: " " counter(demo_var) ".";
    }
</style>
<script>
    function incrementCounterVal(){
        document.getElementsByTagName("li")[0].style.counterIncrement="demo_var 2";
        document.getElementById("Sample").innerHTML="카운터 증가값이 이제 2씩 올라갑니다.";
   }
</script>
</head>
<body>
    <ul>
        <li>Demo =</li>
        <li>Demo =</li>
        <li>Demo =</li>
        <li>Demo =</li>
        <li>Demo =</li>
        <li>Demo =</li>
    </ul>
    <p>아래 버튼을 클릭하면 위 목록의 카운터 증가값이 변경됩니다.</p>
    <button onclick="incrementCounterVal()">카운터 값 증가</button>
    <p id="Sample"></p>
</body>
</html>

실행 결과

위 코드를 실행하면 각 목록 항목 뒤에 10씩 증가하는 번호(10., 20., 30...)가 표시됩니다.

HTML DOM Style counterIncrement 속성 – CSS 카운터 값 증가·감소 방법 총정리

그런 다음 “카운터 값 증가(Increase Counter Value)” 버튼을 클릭하면 첫 번째 li 요소의 counterIncrement 값이 demo_var 2로 변경되어, 카운터가 2씩 증가하도록 동작이 바뀌는 것을 확인할 수 있습니다.

HTML DOM Style counterIncrement 속성 – CSS 카운터 값 증가·감소 방법 총정리

정리

counterIncrement 속성은 JavaScript를 통해 동적으로 CSS 카운터의 증가 단계를 조절할 수 있는 강력한 도구입니다. counter-reset으로 카운터를 초기화하고, content 속성의 counter() 함수로 값을 화면에 출력하는 방식으로 함께 사용하면, 별도의 수동 번호 입력 없이도 유연한 자동 넘버링 기능을 구현할 수 있습니다.