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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
|
---
title: ':checked'
slug: 'Web/CSS/:checked'
tags:
- CSS
- Layout
- Pseudo-class
- Reference
- Web
translation_of: 'Web/CSS/:checked'
---
<div>{{CSSRef}}</div>
<p><strong><code>:checked</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a> 선택자는 선택했거나 <code>on</code> 상태인 <strong>라디오</strong>(<code><a href="/ko/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code>), <strong>체크박스</strong>(<code><a href="/ko/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code>), <strong>옵션</strong>({{HTMLElement("option")}} 요소를 나타냅니다.</p>
<pre class="brush: css no-line-numbers">/* Matches any checked/selected radio, checkbox, or option */
:checked {
margin-left: 25px;
border: 1px solid blue;
}
</pre>
<p>사용자가 요소를 체크했거나 선택한 경우 활성화되고, 체크나 선택을 해제하는 경우 비활성화됩니다.</p>
<div class="note">
<p><strong>참고:</strong> 많은 경우 브라우저는 <code><option></code> 요소를 <a href="/ko/docs/Web/CSS/Replaced_element">대체 요소</a>로 취급하므로, <code>:checked</code> 의사 클래스를 사용한 스타일을 적용할 수 있는 범위도 브라우저마다 다릅니다.</p>
</div>
<h2 id="Syntax" name="Syntax">구문</h2>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Examples" name="Examples">예제</h2>
<h3 id="기본_예제">기본 예제</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><div>
<input type="radio" name="my-input" id="yes">
<label for="yes">Yes</label>
<input type="radio" name="my-input" id="no">
<label for="no">No</label>
</div>
<div>
<input type="checkbox" name="my-checkbox" id="opt-in">
<label for="opt-in">Check me!</label>
</div>
<select name="my-select" id="fruit">
<option value="opt1">Apples</option>
<option value="opt2">Grapes</option>
<option value="opt3">Pears</option>
</select>
</pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">div,
select {
margin: 8px;
}
/* Labels for checked inputs */
input:checked + label {
color: red;
}
/* Radio element, when checked */
input[type="radio"]:checked {
box-shadow: 0 0 0 3px orange;
}
/* Checkbox element, when checked */
input[type="checkbox"]:checked {
box-shadow: 0 0 0 3px hotpink;
}
/* Option elements, when selected */
option:checked {
box-shadow: 0 0 0 3px lime;
color: red;
}
</pre>
<h4 id="결과">결과</h4>
<p>{{EmbedLiveSample("기본_예제")}}</p>
<h3 id="숨겨진_체크박스를_사용해_요소_켜고_끄기">숨겨진 체크박스를 사용해 요소 켜고 끄기</h3>
<p>다음 예제 코드는 <code>:checked</code> 의사 클래스와 체크박스를 사용해, <a href="/ko/docs/Web/JavaScript">JavaScript</a> 없이도 사용자가 켜거나 끌 수 있는 콘텐츠를 구현합니다.</p>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><input type="checkbox" id="expand-toggle" />
<table>
<thead>
<tr><th>Column #1</th><th>Column #2</th><th>Column #3</th></tr>
</thead>
<tbody>
<tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
<tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
<tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
<tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
<tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
</tbody>
</table>
<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label>
</pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css">/* Hide the toggle checkbox */
#expand-toggle {
display: none;
}
/* Hide expandable content by default */
.expandable {
visibility: collapse;
background: #ddd;
}
/* Style the button */
#expand-btn {
display: inline-block;
margin-top: 12px;
padding: 5px 11px;
background-color: #ff7;
border: 1px solid;
border-radius: 3px;
}
/* Show hidden content when the checkbox is checked */
#expand-toggle:checked ~ * .expandable {
visibility: visible;
}
/* Style the button when the checkbox is checked */
#expand-toggle:checked ~ #expand-btn {
background-color: #ccc;
}</pre>
<h4 id="결과_2">결과</h4>
<p>{{EmbedLiveSample("숨겨진_체크박스를_사용해_요소_켜고_끄기", "auto", 220)}}</p>
<h2 id="Specifications" name="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('HTML WHATWG', '#selector-checked', ':checked') }}</td>
<td>{{ Spec2('HTML WHATWG') }}</td>
<td>No change.</td>
</tr>
<tr>
<td>{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}</td>
<td>{{ Spec2('HTML5 W3C') }}</td>
<td>Defines the semantic regarding HTML.</td>
</tr>
<tr>
<td>{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}</td>
<td>{{ Spec2('CSS4 Selectors') }}</td>
<td>No change.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}</td>
<td>{{ Spec2('CSS3 Selectors') }}</td>
<td>Defines the pseudo-class, but not the associated semantic</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
<div>
<p>{{Compat("css.selectors.checked")}}</p>
</div>
|
