======CSS Counters====== * description : CSS Counters * author : 오션 * email : shlim@repia.com * lastupdate : 2021-04-05 \\ CSS 카운터는 CSS 규칙에 의해 값이 증가할 수 있으면서, 사용된 횟수를 추적하기 위해 CSS에 의해 유지되는 "변수"입니다\\ 카운터를 사용하면 문서에서의 위치에 따라 콘텐츠의 모양을 조정할 수 있습니다\\ \\ =====Automatic Numbering With Counters===== CSS 카운터는 "변수"와 같습니다. 변수 값은 CSS 규칙에 의해 증가될 수 있습니다 (사용되는 횟수를 추적함).\\ \\ CSS 카운터로 작업하기 위해 다음 속성을 사용합니다.\\ * ''%%counter-reset%%'' - 카운터를 만들거나 재설정합니다. * ''%%counter-increment%%'' - 카운터 값을 증가시킵니다. * ''%%content%%'' - 생성된 콘텐츠를 삽입합니다. * ''%%counter()%%'' 또는 ''%%counters()%%'' 함수 - 요소에 카운터 값을 추가합니다. CSS 카운터를 사용하려면, 먼저 ''%%counter-reset%%''으로 생성해야 합니다.\\ \\ 다음 예제는 페이지 (바디 셀렉터에서)에 대한 카운터를 만든 다음, 각 %%

%% 요소에 대한 카운터 값을 증가시키고\\ 각

요소의 시작 부분에 "Section :"를 추가합니다.\\

Using CSS Counters:

HTML Tutorial

CSS Tutorial

JavaScript Tutorial

 \\ =====Nesting Counters===== 다음 예제에서는 페이지 (섹션)에 대해 하나의 카운터와 각

요소 (하위 섹션)에 대해 하나의 카운터를 만듭니다.\\ "섹션"카운터는 "섹션 "이 있는 각

요소에 대해 계산되고\\ "subsection(하위 섹션)"카운터는 "이 있는 각

요소에 대해 계산됩니다.":\\ \\ 카운터의 새 인스턴스가 자식 요소에서 자동으로 생성되기 때문에, 카운터는 __개요목록__(outlines lists)을 만드는 데 유용할 수 있습니다.\\ 여기서 우리는 ''%%counters()%%'' 함수를 사용하여, 서로 다른 레벨의 중첩 카운터 사이에 문자열을 삽입합니다.\\
  1. Item
  2. Item
    1. item
    2. item
    3. item
      1. item
      2. item
      3. item
    4. item
  3. item
  4. item
  1. item
  2. item
 ===Result=== {{:wiki:css:css_note:nestedcounters.png?600|}}\\ \\ =====CSS Counter Properties===== | Property | Description | ^ content ^ ::before와 ::after 가상 요소와 함께 사용하여 생성된 콘텐츠를 삽입합니다. ^ | counter-increment | 하나 이상의 카운터 값을 증가시킵니다. | ^ counter-reset ^ 하나 이상의 카운터 값을 생성하거나 재설정합니다. ^ \\ {{tag>오션 CSS Counters}}