1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
|
---
title: CSS 카운터 사용하기
slug: Web/CSS/CSS_Counter_Styles/Using_CSS_counters
tags:
- CSS
- CSS Counter Styles
- Guide
- Layout
- Reference
- Web
- 번호
- 카운터
translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
original_slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
---
<div>{{CSSRef}}</div>
<p><strong>CSS counters</strong>를 사용하면 문서에서의 위치에 따라 콘텐츠의 모양을 조정할 수 있습니다. 예를 들어, counters를 사용해 웹페이지의 제목에 자동으로 번호를 매길 수 있습니다. Counters는 요소가 몇 번이나 사용되었는지 추적하여 CSS 규칙에 따라 증가하며, 본질적으로 변수입니다.</p>
<h2 id="Using_counters">Counters 사용하기</h2>
<h3 id="Manipulating_a_counters_value">카운터 값 조작하기</h3>
<p>CSS counter를 사용하려면 먼저 {{cssxref("counter-reset")}} 속성(초깃값 <code>0</code>)을 사용하여 초기화 해야합니다. 동일한 속성으로 값을 특정 값으로 바꿀 수도 있습니다. 초기화 된 counter의 값은 {{cssxref("counter-increment")}}에 따라 증가하거나 감소합니다. counter의 이름으로 "none", "inherit", "initial"은 사용불가합니다. 이런 이름을 사용하면 선언은 무시됩니다.</p>
<h3 id="Displaying_a_counter">카운터 표시하기</h3>
<p>Counter의 값은 {{cssxref("content")}} 속성에서 {{cssxref("counter()")}}나 {{cssxref("counters()")}} 함수를 사용하여 표시할 수 있습니다.</p>
<p><code>counter()</code> 함수는 'counter(name)'와 'counter(name, style)' 두 가지 형태로 사용할 수 있습니다. 생성된 텍스트는 가상 요소가 속한 범위에 있는 이름(name)의 가장 안쪽 counter의 값입니다. 텍스트는 지정된 서식(기본값은 십진수<code>decimal</code>)으로 뿌려집니다.</p>
<p><code>counters()</code> 함수도 'counters(name, string)'나 'counters(name, string, style)' 두 가지 형태로 사용할 수 있습니다. 생성된 텍스트는 가상 요소가 속한 모든 범위에서 지정된 이름을 가진 counters의 값으로, 바깥 쪽부터 안쪽까지 값이 주어지며 지정된 문자열로 구분됩니다. counters는 지정된 스타일(기본값은 십진수<code>decimal</code>)로 렌더링 됩니다.</p>
<h3 id="Basic_example">기본 예제</h3>
<p>여기서는 제목 앞에 숫자를 붙여봅니다.</p>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">body {
counter-reset: section; /* counter 이름을 'section'으로 지정합니다.
초깃값은 0입니다. */
}
h3::before {
counter-increment: section; /* section의 카운터 값을 1씩 증가시킵니다. */
content: "Section " counter(section) ": "; /* section의 카운터 값을 표시합니다. */
}
</pre>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3></pre>
<h4 id="Result">결과</h4>
<p>{{EmbedLiveSample("Basic_example", "100%", 150)}}</p>
<h3 id="A_more_sophisticated_example">더 정교한 예시</h3>
<p>카운터가 증가 할 때마다 반드시 표시되어야 하는 것은 아닙니다. 이 예시는 모든 링크를 계산하지만 카운터는 링크에 텍스트가 없는 경우에만 표시되므로 편리한 대체제입니다.</p>
<h4 id="CSS2">CSS</h4>
<pre class="brush: css">:root {
counter-reset: link;
}
a[href] {
counter-increment: link;
}
a[href]:empty::after {
content: "[" counter(link) "]";
}</pre>
<h4 id="HTML2">HTML</h4>
<pre class="brush: html"><p>See <a href="https://www.mozilla.org/"></a></p>
<p>Do not forget to <a href="contact-me.html">leave a message</a>!</p>
<p>See also <a href="https://developer.mozilla.org/"></a></p></pre>
<h4 id="Result2">Result</h4>
<p>{{EmbedLiveSample("A_more_sophisticated_example", "100%", 150)}}</p>
<h2 id="Nesting_counters">중첩 카운터</h2>
<p>CSS 카운터는 자식 요소 안에서 새 인스턴스를 자동으로 만들어주어 목차를 만드는데 유용합니다. {{cssxref("counters()")}} 함수를 사용해 중첩된 다른 레벨의 카운터 사이를 분리하는 글자를 지정할 수 있습니다.</p>
<h3 id="Example_of_a_nested_counter">중첩 카운터 예제</h3>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css">ol {
counter-reset: section; /* ol 요소마다
이름이 section인
새 인스턴스를 생성합니다. */
list-style-type: none;
}
li::before {
counter-increment: section; /* 해당 인스턴스 안에서
section 카운터 값 증가 */
content: counters(section, ".") " "; /* section 카운터 값을
마침표(.)로 구분해 결합하여
표시합니다. */
}
</pre>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><ol>
<li>item</li> <!-- 1 -->
<li>item <!-- 2 -->
<ol>
<li>item</li> <!-- 2.1 -->
<li>item</li> <!-- 2.2 -->
<li>item <!-- 2.3 -->
<ol>
<li>item</li> <!-- 2.3.1 -->
<li>item</li> <!-- 2.3.2 -->
</ol>
<ol>
<li>item</li> <!-- 2.4.1 -->
<li>item</li> <!-- 2.4.2 -->
<li>item</li> <!-- 2.4.3 -->
</ol>
</li>
<li>item</li> <!-- 2.4 -->
</ol>
</li>
<li>item</li> <!-- 3 -->
<li>item</li> <!-- 4 -->
</ol>
<ol>
<li>item</li> <!-- 1 -->
<li>item</li> <!-- 2 -->
</ol></pre>
<h4 id="Result_2">결과</h4>
<p>{{EmbedLiveSample("Example_of_a_nested_counter", "100%", 350)}}</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}}</td>
<td>{{Spec2("CSS3 Lists")}}</td>
<td>No change</td>
</tr>
<tr>
<td>{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}</td>
<td>{{Spec2("CSS2.1")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="See_also">See also</h2>
<ul>
<li>{{cssxref("counter-reset")}}</li>
<li>{{cssxref("counter-increment")}}</li>
<li>{{cssxref("@counter-style")}}</li>
</ul>
|
