목차

CSS Counters

  • description : CSS Counters
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-04-05


CSS 카운터는 CSS 규칙에 의해 값이 증가할 수 있으면서, 사용된 횟수를 추적하기 위해 CSS에 의해 유지되는 “변수”입니다
카운터를 사용하면 문서에서의 위치에 따라 콘텐츠의 모양을 조정할 수 있습니다

Automatic Numbering With Counters

CSS 카운터는 “변수”와 같습니다. 변수 값은 CSS 규칙에 의해 증가될 수 있습니다 (사용되는 횟수를 추적함).

CSS 카운터로 작업하기 위해 다음 속성을 사용합니다.

CSS 카운터를 사용하려면, 먼저 counter-reset으로 생성해야 합니다.

다음 예제는 페이지 (바디 셀렉터에서)에 대한 카운터를 만든 다음, 각 <h2> 요소에 대한 카운터 값을 증가시키고
각 <h2> 요소의 시작 부분에 “Section <value of the counter> :“를 추가합니다.

<!DOCTYPE html>
<html>
<style>
    body {
        counter-reset: section;
    }
 
    h2::before {
        counter-increment: section;
        content: "Section "counter(section)":";
    }
</style>
<head>
</head>
<body>
    <h1>Using CSS Counters:</h1>
    <h2>HTML Tutorial</h2>
    <h2>CSS Tutorial</h2>
    <h2>JavaScript Tutorial</h2>
</body>
</html>


Nesting Counters

다음 예제에서는 페이지 (섹션)에 대해 하나의 카운터와 각 <h1> 요소 (하위 섹션)에 대해 하나의 카운터를 만듭니다.
“섹션”카운터는 “섹션 <value of the section counter>“이 있는 각 <h1> 요소에 대해 계산되고
“subsection(하위 섹션)“카운터는 ”<value of the section counter>이 있는 각 <h2> 요소에 대해 계산됩니다.<value of the subsection counter>”:

<style>
    body {
        counter-reset: section;
    }
 
    h1 {
        counter-reset: subsection;
    }
 
    h1::before {
        counter-increment: section;
        content: "Section "counter(section) ". ";
    }
 
    h2::before {
        counter-increment: subsection;
        content: counter(section) "."counter(subsection) " ";
    }
</style>


카운터의 새 인스턴스가 자식 요소에서 자동으로 생성되기 때문에, 카운터는 개요목록(outlines lists)을 만드는 데 유용할 수 있습니다.
여기서 우리는 counters() 함수를 사용하여, 서로 다른 레벨의 중첩 카운터 사이에 문자열을 삽입합니다.

<!DOCTYPE html>
<html>
<head>
    <style>
        ol {
            counter-reset: section;
            list-style-type: none;
        }
        li::before {
            counter-increment: section;
            content: counters(section, ".") " ";
        }
    </style>
</head>
<body>
    <ol>
        <li>Item</li>
        <li>Item
            <ol>
                <li>item</li>
                <li>item</li>
                <li>item
                    <ol>
                        <li>item</li>
                        <li>item</li>
                        <li>item</li>
                    </ol>
                </li>
                <li>item</li>
            </ol>
        </li>
        <li>item</li>
        <li>item</li>
    </ol>
    <ol>
        <li>item</li>
        <li>item</li>
    </ol>
</body>
</html>

Result



CSS Counter Properties

Property Description
content ::before와 ::after 가상 요소와 함께 사용하여 생성된 콘텐츠를 삽입합니다.
counter-increment 하나 이상의 카운터 값을 증가시킵니다.
counter-reset 하나 이상의 카운터 값을 생성하거나 재설정합니다.


, ,