counter-increment 속성

counter-increment 속성은 예를 들어 문단이나 제목과 같은 요소의 자동 번호 매기기를 설정합니다. counter-reset 속성, after 및 before 의사 요소, 그리고 그 안에 counter 함수가 사용되는 content 속성과 함께 사용됩니다. 더 나은 이해를 위해 예제를 살펴보는 것을 권장합니다.

구문

선택자 {
	counter-increment: 이름 [단계] | none;
}

값

값	설명
이름	카운터의 이름입니다. (클래스나 id 이름과 같은) 일반적인 단어입니다. 공백으로 구분하여 여러 이름을 지정할 수 있습니다. 이 경우 여러 카운터가 동시에 변경됩니다.
단계	양의 정수 또는 음의 정수입니다. 선택적 매개변수입니다.
`none`	현재 선택자에 대한 카운터 증가를 금지합니다.

기본값: none.

예제

문단이 자동으로 번호가 매겨지도록 만들어 봅시다:

<div id="parent">
	<p>텍스트</p>
	<p>텍스트</p>
	<p>텍스트</p>
	<p>텍스트</p>
	<p>텍스트</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test;
	content: counter(test);
}

예제

번호 매기기 외에 추가 텍스트도 넣어봅시다. 우리의 경우 숫자 앞에 № 기호와 뒤에 점을 추가합니다:

<div id="parent">
	<p>텍스트</p>
	<p>텍스트</p>
	<p>텍스트</p>
	<p>텍스트</p>
	<p>텍스트</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test;
	content: "№" counter(test) ".";
}

예제

10부터 번호 매기기를 시작해 봅시다. 이를 위해 카운터의 초기값을 우리가 원하는 값보다 1 작은, 즉 9로 설정합니다:

<div id="parent">
	<p>텍스트</p>
	<p>텍스트</p>
	<p>텍스트</p>
	<p>텍스트</p>
	<p>텍스트</p>
</div>

#parent {
	counter-reset: test 9;
}
#parent p::before {
	counter-increment: test;
	content: "№" counter(test) ".";
}

예제

이제 번호 매기기가 "2" 단계로 이루어지도록 해봅시다. 이를 위해 단계로 2를 설정합니다:

<div id="parent">
	<p>텍스트</p>
	<p>텍스트</p>
	<p>텍스트</p>
	<p>텍스트</p>
	<p>텍스트</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test 2; /* 2를 설정 */
	content: "№" counter(test) ".";
}

예제

이전 예제에서 번호 매기기가 2부터 시작했지만, 우리는 1부터 시작하기를 원했습니다. 왜 그렇게 되었을까요? counter-reset이 카운터 값을 0으로 재설정한 후, counter-increment가 자신의 단계(기본적으로 1)를 추가하기 때문입니다. 그래서 이전에는 우리의 번호 매기기가 1부터 시작했습니다. 이제는 2가 추가되므로 번호 매기기가 2부터 시작합니다.

이 문제를 해결하기 위해 카운터의 초기 값을 -1로 설정하면 이제 번호 매기기가 1부터 시작하여 2씩 증가하게 됩니다:

<div id="parent">
	<p>텍스트</p>
	<p>텍스트</p>
	<p>텍스트</p>
	<p>텍스트</p>
	<p>텍스트</p>
</div>

#parent {
	counter-reset: test -1;
}
p::before {
	counter-increment: test 2;
	content: "№" counter(test) ".";
}

같이 보기

카운터 값을 0으로 재설정하는 속성 counter-reset