diff options
Diffstat (limited to 'files/ko/web/css/_colon_checked')
| -rw-r--r-- | files/ko/web/css/_colon_checked/index.html | 193 |
1 files changed, 193 insertions, 0 deletions
diff --git a/files/ko/web/css/_colon_checked/index.html b/files/ko/web/css/_colon_checked/index.html new file mode 100644 index 0000000000..337f93d1cd --- /dev/null +++ b/files/ko/web/css/_colon_checked/index.html @@ -0,0 +1,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> |