차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:css:css_note:css_counters [2021/04/05 13:36]
emblim98 만듦
+++ wiki:css:css_note:css_counters [2023/01/13 18:44] (현재)
@@ 줄 23: / 줄 23: @@
 다음 예제는 페이지 (바디 셀렉터에서)에 대한 카운터를 만든 다음, 각 %%<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

사용자 도구

사이트 도구

차이

문서 도구