diff options
Diffstat (limited to 'files/ko/web/css/_colon_disabled/index.html')
| -rw-r--r-- | files/ko/web/css/_colon_disabled/index.html | 129 |
1 files changed, 129 insertions, 0 deletions
diff --git a/files/ko/web/css/_colon_disabled/index.html b/files/ko/web/css/_colon_disabled/index.html new file mode 100644 index 0000000000..5a65d93de2 --- /dev/null +++ b/files/ko/web/css/_colon_disabled/index.html @@ -0,0 +1,129 @@ +--- +title: ':disabled' +slug: 'Web/CSS/:disabled' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:disabled' +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>:disabled</code></strong> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 모든 비활성 요소를 나타냅니다. 비활성 요소란 활성(선택, 클릭, 입력 등등)하거나 포커스를 받을 수 없는 요소를 말합니다. 반대 상태인 활성 요소도 존재합니다.</p> + +<pre class="brush: css no-line-numbers notranslate">/* 모든 비활성 <input> 선택 */ +input:disabled { + background: #ccc; +}</pre> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<p>다음 예제는 사용자가 청구 주소 입력 칸을 켜거나 끌 수 있는 기능을 <a href="/ko/docs/Web/JavaScript">JavaScript</a> {{event("change")}} 이벤트를 통해 구현한 기본적인 배송 양식입니다.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><form action="#"> + <fieldset id="shipping"> + <legend>배송지</legend> + <input type="text" placeholder="이름"> + <input type="text" placeholder="주소"> + <input type="text" placeholder="우편번호"> + </fieldset> + <br> + <fieldset id="billing"> + <legend>청구지</legend> + <label for="billing-checkbox">배송지와 동일:</label> + <input type="checkbox" id="billing-checkbox" checked> + <br> + <input type="text" placeholder="이름" disabled> + <input type="text" placeholder="주소" disabled> + <input type="text" placeholder="우편번호" disabled> + </fieldset> +</form> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">input[type="text"]:disabled { + background: #ccc; +} +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">// 페이지 로딩이 끝날 때까지 기다림 +document.addEventListener('DOMContentLoaded', function () { + // `change` 이벤츠 수신기를 체크박스에 부착 + document.getElementById('billing-checkbox').onchange = toggleBilling; +}, false); + +function toggleBilling() { + // 청구지 텍스트 입력 칸을 모두 선택 + var billingItems = document.querySelectorAll('#billing input[type="text"]'); + + // 하나씩 토글 + for (var i = 0; i < billingItems.length; i++) { + billingItems[i].disabled = !billingItems[i].disabled; + } +} +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample('예제', 300, 250)}}</p> + +<h2 id="명세">명세</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-disabled', ':disabled')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Defines the semantics of HTML and forms.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Defines the pseudo-class, but not the associated semantics.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("css.selectors.disabled")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li> + <p>{{Cssxref(":enabled")}}</p> + </li> +</ul> |