[selector] CSS - :defined 가상선택자 - 표준태그 및 사용자정의태그 선택 (= :defined선택자 = 디파인드선택자)

1. :defined 예제 - 표준태그 및 사용자정의태그 선택
2. :defined 정의
3. :defined 구문
4. :defined 예제 - 버튼 클릭 시 :defined 스타일 적용

:defined 예제 - 표준태그 및 사용자정의태그 선택

[예제1]  - 사용자정의 태그명에 하이픈(-) 안 들어간 경우, 브라우저가 정의된 요소로 간주.

 

<style>

mybox { font-size: 30px; }

:defined{color:red;}

:not(:defined) {color:blue;}

</style>

<mybox>Loading...</mybox>

<div>홈짱닷컴 Homzzang.com</div>

결과보기

---

[예제2]  - 사용자정의 태그명에 하이픈(-) 들어가 있는 경우, 브라우저가 미정의된 요소로 간주.

<style>

my-box { font-size: 30px; }

:defined{color:red;}

:not(:defined) {color:blue;}

</style>

<my-box>Loading...</my-box>

<div>홈짱닷컴 Homzzang.com</div>

 

결과보기

---

[예제3] - 하이픈(-) 들어간 사용자태그 경우, JavaScript로 사용자정의 태그를 정식 등록 시 정의된요소로 간주됨.

 

<style>

my-box { font-size: 30px; }

:defined{color:red;}

:not(:defined) {color:blue;}

</style>

<my-box>Loading...</my-box>

<div>홈짱닷컴 Homzzang.com</div>

<script>

customElements.define("my-box", class extends HTMLElement {});

</script>

 

결과보기 

:defined 정의

 

표준 태그와 사용자정의 태그를 선택하는 선택자.

 

---

 

1. 사용자정의 태그로 간주되는 경우

• 하이픈 (-) 들어간 태그명(예: my-box)이면서 JS 이용해 공식 등록한 태그. JS로 공식 정의 전 하이픈(-) 들어간 태그명 경우, 브라우저는 이것을 그냥 태그 후보로 간주. 이 경우, :defined 선택자 영향만 안 받을 뿐 해당 태그명을 사용한 스타일 정의 등은 가능.)
• 하이픈 (-) 안 들어간 태그명 사용 경우 (예: mybox). ( 브라우저는 이것을  HTMLUnknownElement 요소로 취급함. 원칙 상, 하이픈(-) 안 들어간 태그명은 사용자정의 태그로 사용할 수 없음. 그래서, JS 이용해 공식 등록조차 할 수 없음.)

 

2.

• CSS4
• IE 제외한 주요 최신브라우저 모두 지원.

:defined 구문

 

:defined { CSS 선언 }

 

:defined 예제 - 버튼 클릭 시 :defined 스타일 적용

 

<style> 

my-box {

  display: flex;

  justify-content: center; /* 가로 중앙 */

  align-items: center;     /* 세로 중앙 */

  border: 2px solid black;

  height: 100px;

  width: 300px;

  padding: 15px;

  position: relative;

}

my-box:not(:defined) {

  border-color: grey;

  color: grey;

}

my-box:defined {

  background-color: yellow;

  border-color: red;

  color: black;

  font-size: 20px;

}

/* 로딩 메시지 표시 */

my-box:not(:defined)::before {

  display: flex;

  justify-content: center; /* 가로 중앙 */

  align-items: center;     /* 세로 중앙 */

  content: "로딩 중...";

  position: absolute;

  inset: 0 0 0 0;

  font-size: 25px;

  background-color: white;

}

/* 로딩 메시지 제거 */

my-box:defined::before {

  content: "";

}

</style>

<my-box>

<p>홈짱닷컴 Homzzang.com</p>

</my-box>

<br>

<button id="btn">사용자정의태그 공식 등록</button>

<script>

const btn = document.querySelector("#btn");

btn.addEventListener("click", () => {

  customElements.define("my-box", class extends HTMLElement {});

  btn.remove();

});

</script>

 

결과보기