문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======CSS Counters======
<WRAP left notice 80%>
  * description : CSS Counters
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-05
</WRAP>
<WRAP clear></WRAP>
\\
CSS 카운터는 CSS 규칙에 의해 값이 증가할 수 있으면서, 사용된 횟수를 추적하기 위해 CSS에 의해 유지되는 "변수"입니다\\ 
카운터를 사용하면 문서에서의 위치에 따라 콘텐츠의 모양을 조정할 수 있습니다\\
\\
=====Automatic Numbering With Counters=====
CSS 카운터는 "변수"와 같습니다. 변수 값은 CSS 규칙에 의해 증가될 수 있습니다 (사용되는 횟수를 추적함).\\
\\
CSS 카운터로 작업하기 위해 다음 속성을 사용합니다.\\
  * ''%%counter-reset%%'' - 카운터를 만들거나 재설정합니다.
  * ''%%counter-increment%%'' - 카운터 값을 증가시킵니다.
  * ''%%content%%'' - 생성된 콘텐츠를 삽입합니다.
  * ''%%counter()%%'' 또는 ''%%counters()%%'' 함수 - 요소에 카운터 값을 추가합니다.
CSS 카운터를 사용하려면, 먼저 ''%%counter-reset%%''으로 생성해야 합니다.\\
\\
다음 예제는 페이지 (바디 셀렉터에서)에 대한 카운터를 만든 다음, 각 %%<h2>%% 요소에 대한 카운터 값을 증가시키고\\ 
각 <h2> 요소의 시작 부분에 "Section <value of the counter> :"를 추가합니다.\\
<code css>
<!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>
</code>
\\
=====Nesting Counters=====
다음 예제에서는 페이지 (섹션)에 대해 하나의 카운터와 각 <h1> 요소 (하위 섹션)에 대해 하나의 카운터를 만듭니다.\\ 
"섹션"카운터는 "섹션 <value of the section counter>"이 있는 각 <h1> 요소에 대해 계산되고\\ 
"subsection(하위 섹션)"카운터는 "<value of the section counter>이 있는 각 <h2> 요소에 대해 계산됩니다.<value of the subsection counter>":\\
<code css>
<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>
</code> 
\\
카운터의 새 인스턴스가 자식 요소에서 자동으로 생성되기 때문에, 카운터는 __개요목록__(outlines lists)을 만드는 데 유용할 수 있습니다.\\ 
여기서 우리는 ''%%counters()%%'' 함수를 사용하여, 서로 다른 레벨의 중첩 카운터 사이에 문자열을 삽입합니다.\\
<code css>
<!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>
</code>
===Result===
{{:wiki:css:css_note:nestedcounters.png?600|}}\\
\\
=====CSS Counter Properties=====
|      Property      |                          Description                                  |
^ content            ^ ::before와 ::after 가상 요소와 함께 사용하여 생성된 콘텐츠를 삽입합니다.  ^
| counter-increment  | 하나 이상의 카운터 값을 증가시킵니다.                                    |  
^ counter-reset      ^ 하나 이상의 카운터 값을 생성하거나 재설정합니다.                          ^
\\


{{tag>오션 CSS Counters}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
