목차
:defined 예제 - 표준태그 및 사용자정의태그 선택 :defined 정의 :defined 구문 :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>
결과보기
