From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/css/_colon_defined/index.html | 118 +++++++++++++++++++++++++++++ 1 file changed, 118 insertions(+) create mode 100644 files/ko/web/css/_colon_defined/index.html (limited to 'files/ko/web/css/_colon_defined') diff --git a/files/ko/web/css/_colon_defined/index.html b/files/ko/web/css/_colon_defined/index.html new file mode 100644 index 0000000000..89487adbb9 --- /dev/null +++ b/files/ko/web/css/_colon_defined/index.html @@ -0,0 +1,118 @@ +--- +title: ':defined' +slug: 'Web/CSS/:defined' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:defined' +--- +
{{CSSRef}}
+ +

CSS :defined 의사 클래스는 정의된 요소를 선택합니다. 정의된 요소란 브라우저에 내장된 표준 요소와, 성공적으로 정의({{domxref("CustomElementRegistry.define()")}} 메서드 등)한 사용자 지정 요소를 의미합니다.

+ +
/* Selects any defined element */
+:defined {
+  font-style: italic;
+}
+
+/* Selects any instance of a specific custom element */
+simple-custom:defined {
+  display: block;
+}
+
+ +

구문

+ +
{{csssyntax}}
+ +

예제

+ +

정의되기 전까지 요소 숨기기

+ +

다음 코드는 저희의 defined-pseudo-class 데모에서 발췌한 것입니다. (동작 모습 보기)

+ +

이 데모에서는 아주 간단한 사용자 지정 요소를 정의합니다.

+ +
customElements.define('simple-custom',
+  class extends HTMLElement {
+    constructor() {
+      super();
+
+      let divElem = document.createElement('div');
+      divElem.textContent = this.getAttribute('text');
+
+      let shadowRoot = this.attachShadow({mode: 'open'})
+        .appendChild(divElem);
+  }
+})
+ +

그 후, 위의 요소를 표준 <p>와 함께 문서에 넣습니다.

+ +
<simple-custom text="Custom element example text"></simple-custom>
+
+<p>Standard paragraph example text</p>
+ +

CSS에는 다음의 스타일을 작성합니다.

+ +
// Give the two elements distinctive backgrounds
+p {
+  background: yellow;
+}
+
+simple-custom {
+  background: cyan;
+}
+
+// Both the custom and the built-in element are given italic text
+:defined {
+  font-style: italic;
+}
+ +

그리고 아래의 두 규칙을 통해, 정의되지 않은 사용자 지정 요소는 숨기고, 정의가 성공적으로 된 경우에는 블록 레벨 요소로 표시합니다.

+ +
simple-custom:not(:defined) {
+  display: none;
+}
+
+simple-custom:defined {
+  display: block;
+}
+ +

위의 데모는 페이지에 불러올 때 꽤 시간이 걸릴 수 있는 복잡한 사용자 지정 요소 스타일링에 유용하게 쓸 수 있습니다. 로딩이 아직 진행 중일 때, 스타일을 입히지 않은는 못생긴 요소가 페이지에 노출되는 것을 막을 수 있으니까요.

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('HTML WHATWG', 'semantics-other.html#selector-defined', ':defined') }}{{ Spec2('HTML WHATWG') }}
+ +

브라우저 호환성

+ +
+ + +

{{Compat("css.selectors.defined")}}

+
+ +

같이 보기

+ + -- cgit v1.2.3-54-g00ecf