CSS에서 카운터(counter)의 값을 증가시키려면 counter-increment 속성을 사용합니다. 이 속성은 주로 counter-reset 속성과 함께 쓰이며, 문서 내에서 자동 번호 매기기를 구현할 때 유용합니다.
일반적인 사용 흐름은 다음과 같습니다.
- counter-reset: 카운터를 생성하고 시작값을 지정합니다. (기본값은 0)
- counter-increment: 해당 요소가 나타날 때마다 카운터 값을 1씩(또는 지정한 값만큼) 증가시킵니다.
- content:
::before또는::after가상 요소와 함께counter()함수를 사용해 증가된 값을 화면에 표시합니다.
예제
아래 코드는 counter-increment 속성을 활용해 각 과일 항목 앞에 자동으로 번호를 붙이는 예시입니다. 직접 실행해 결과를 확인해 보세요.
<!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
<h2> 요소가 나타날 때마다 section 카운터가 1씩 증가하며, ::before 가상 요소를 통해 증가된 번호가 제목 앞에 자동으로 표시됩니다. 목록이나 문서 섹션에 일련번호를 부여할 때 유용하게 활용할 수 있습니다.