CSS 카운터(Counter)는 CSS에서 숫자를 자동으로 증가시키거나 감소시키기 위해 사용하는 기능입니다. 이를 통해 목록 항목이나 페이지 번호와 같은 요소에 번호를 매길 수 있습니다. CSS 카운터는 counter-reset, counter-increment, content 속성을 사용하여 설정하고, 스타일을 적용할 수 있습니다.
CSS 카운터 설정 방법
- counter-reset: 카운터의 초기 값을 설정합니다.
- counter-increment: 카운터의 값을 증가시킵니다.
- content: ::before 또는 ::after 의사 요소에서 카운터 값을 표시합니다.
예제
1. 기본 사용법
다음 예제는 번호가 매겨진 목록 항목을 생성합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Counters Example</title>
<style>
/* 카운터 초기화 */
ol {
counter-reset: item;
}
/* 카운터 증가 및 표시 */
ol li {
counter-increment: item;
list-style-type: none;
}
ol li::before {
content: counter(item) ". ";
font-weight: bold;
}
</style>
</head>
<body>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</body>
</html>
이 예제에서는 ol 요소에서 카운터를 초기화하고, li 요소에서 카운터를 증가시키며, ::before 의사 요소를 사용하여 각 항목 앞에 카운터 값을 표시합니다.
2. 중첩된 카운터
중첩된 목록의 경우, 여러 카운터를 사용할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nested CSS Counters</title>
<style>
/* 첫 번째 카운터 초기화 */
ol {
counter-reset: section;
}
/* 첫 번째 카운터 증가 및 표시 */
ol > li {
counter-increment: section;
list-style-type: none;
}
ol > li::before {
content: counter(section) ". ";
font-weight: bold;
}
/* 두 번째 카운터 초기화 및 중첩 카운터 증가 */
ol ol {
counter-reset: subsection;
}
ol ol > li {
counter-increment: subsection;
}
ol ol > li::before {
content: counter(section) "." counter(subsection) " ";
font-style: italic;
}
</style>
</head>
<body>
<ol>
<li>Section 1
<ol>
<li>Subsection 1.1</li>
<li>Subsection 1.2</li>
</ol>
</li>
<li>Section 2
<ol>
<li>Subsection 2.1</li>
<li>Subsection 2.2</li>
</ol>
</li>
</ol>
</body>
</html>
이 예제에서는 중첩된 목록 항목에 대해 두 개의 카운터(section과 subsection)를 사용하여 번호를 매깁니다. 첫 번째 카운터는 ol 요소에서 초기화되고 li 요소에서 증가하며, 두 번째 카운터는 중첩된 ol 요소에서 초기화되고 중첩된 li 요소에서 증가합니다.
See the Pen Untitled by webmini (@webmini) on CodePen.
요약
CSS 카운터는 목록 항목이나 다른 요소에 번호를 매기는 데 유용합니다. counter-reset, counter-increment, content 속성을 사용하여 카운터를 설정하고 표시할 수 있으며, 중첩된 구조에서도 여러 카운터를 사용하여 복잡한 번호 매김을 할 수 있습니다.
제 블로그 목차를 참고하시면 동일한 방식입니다.
728x90
