[CSS]pseudo-elements(의사요소),ShadowDOM

pseudo요소..

 

발음은 수도라고 한다...  (어려운 영어의 세계)

 

선택한 요소의 특정 부분을 스타일 지정할 수 있는 키워드.

앞에 콜론 두 개를 붙이는 것을 기억하자!! [pseudo class(:)와 구별하기 위해서 두 개 적용]

 

속성 요소들은 아래와 같다. (시범적 단계인 것은 제외함 , ::grammar-error, ::spelling error, ::target-text 속성들)

 

• ::after /*맨 마지막 부분에 특정 요소(글자, display 등) 추가*/

 

• ::backdrop /* 뷰포트가 생성되면 특정 요소 추가 */
• ::before /*맨 앞 부분에 특정 요소 추가*/

 

• ::cue /*전체 신호 집합에 특정 요소 적용 ex) 비디오 - 홈페이지에 접속하자마자 예상치 못하게 영상이 재생되는 것을 방지*/
• ::cue-region /* cue와 같지만 개별로 적용할 때 사용*/ 

::cue-region {
  color: yellow;
  font-weight: bold;
}

::cue-region | ::cue-region( <selector> )

 

• ::first-letter /*첫번째 글자 부분에 특정 요소 추가*/
• ::first-line /*첫 줄에 특정 요소 추가*/
• ::file-selector-button /*파일 선택 버튼 특정 요소 추가*/

 

• ::marker /*글머리 기호나 숫자를 포함하는 목록 항목의 마커 상자를 선택*/

 

• ::part() /*Shadow tree내에서 일치하는 요소 속성을 가진 요소에 특정 요소 추가*/

::part( <ident>+ )

• ::placeholder /* <입력> 또는 <텍스트 영역> 요소에서 자리 표시자 텍스트에 특정 요소 추가*/

'It must be 9 digits' 부분이 palceholder

• ::selection /*강조 표시한 문서 부분에 특정 요소 추가*/
• ::slotted() /*HTML 템플릿 내의 슬롯에 배치된 모든 요소에 특정 요소 추가*/

/* Selects any element placed inside a slot */
::slotted(*) {
  font-weight: bold;
}

---

/* The first line of every <p> element. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

위와 같은 코드를 적용하면

첫번째 줄은 항상 대문자, 파란색 글자로 표시된다.

 

쉬운 예제로

.font::first-letter {
    font-size: 50px;
}

첫번째 글자만 커졌다!!

---

#login:after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:

이 예제는 login 아이디를 가진 요소에 마우스 커서를 올리면 배경을 어둡게 하기 위해서 위와 같이 적용.

 

출처 :https://codepen.io/css-tricks/pen/DLezKg

---

이 의사 요소를 활용 한 것으로 굉~장히 좋은 예제는 바로

float를 사용하고 나서 clear: both를 적용할 때!!

 

자식요소 맨 마지막에 일일이 넣는것은 코드도 지저분해보인다..

 

따라서 이것을 넣으면 간단 해결!

.box::after {
  content : '';
  display : block;
  clear : both;
}

---

위에서 Shadow DOM 이라는 개념이 나왔는데 이것이 뭐.냐.면

HTML 개발시 코드가 너무 복잡해지지 않기 위해 숨겨놓은 HTML 요소

그래서 Shadow DOM

 

이것을 확인하려면!!

개발자 도구 -> 톱니바퀴 모양 (설정)

 

쟤를 켜준다.

저 분이 Shadow DOM

shadow DOM을 통해서 찾은 pseudo 요소!!

input::-webkit-input-placeholder {
  color : red; 
}

위의 요소를 이용해서 스타일 준 예제!!

이 부분을 보고 해당 스타일을 참고할 수도 있다. 개이득!

---

위에서 -webkit-로 나온 부분은

크롬, 오페라, 사파리, Edge 브라우저에서만 동작하는 스타일을 만들고자할 때 사용한다.

파이어폭스는 -moz-

익스플로러는 -ms-

(display:flex 호환성에 대해서 배울때 IE는-ms-을 붙여야 작동한다길래 뭔소리가 했더니 이거였다)

---

자 shadowDOM을 찾는건 알았으니까

 

이제 어떻게 만드는지 우리도 해보자

Shadow DOM 만드는법

땋

이렇게 스타일도 줄 수 있다.

위의 코드 단점은 모든 label태그에 같은 style이 적용된다. 이럴때 필요한 게 shadowDOM!

이렇게 shadowDOM에 넣음으로써 외부의 영향이 가지 않기때문에

원하는 태그에만 스타일을 줬다!!!

이벤트리스너 적용도 가능.

---

이런식 이렇게 모듈화해서 개발하면 자바스크립트를 컴포넌트안에 담아서 보관할 수 있다.

어떻게???

class만들어서 class만 export해서 가져다 쓰면된다!!

---

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

Pseudo-elements - CSS: Cascading Style Sheets | MDN

https://hans-j.tistory.com/145

[JavaScript]DOM이란?

---

 

코딩애플 강의로 듣고 작성했습니다.