12. HTML/CSS(Pseudo-element, Shadow DOM)

■ Pseudo-element

Pseudo-element 기본

.text::first-line {
  color: red;
}
.text::after {
  content: '마지막에 추가';
  color: blue;
}
.text::before {
  content: '처음에 추가';
  color: blue;
}

특정 HTML 요소의 안쪽 일부에 스타일을 줄 수 있음

 

 

Pseudo-element 응용

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

float 속성을 사용한 후에는 마지막에 clear : both 속성을 가진 div 박스를 추가해야 합니다.

참고) 2023.04.25 - [Html] - 2. HTML/CSS(div를 이용한 레이아웃 만들기)

이때, Pseudo-element를 사용하면 div 박스를 하나 더 만들 것 없이 clear : both 속성을 추가할 수 있습니다.

 

 

■ Shadow DOM

Shadow DOM 이란?

HTML 내부적으로 코드가 복잡하지 않게 숨겨놓은 요소들을 Shadow DOM 이라고 합니다.

Shadow DOM을 보기 위해서는 개발자 도구의 Setting 메뉴에서 Show user agent shadow DOM을 체크하셔야 합니다. 

 

 

Shadow DOM을 활용한 스타일 주는법

<input type="file">

input을 보면 개발자 도구에서 위와같이 숨겨져 있던 요소들을 볼 수가 있습니다.

 

/* span 부분에 스타일링 주기 */
input {
  appearance: none;  /* 기본 CSS 안보이게 설정 */
  background-color: blue;
}

/* 버튼 부분에 스타일링 주기 */
input::-webkit-file-upload-button {
  appearance: none;
  background-color: red;
  color: white;
}

그리고 위와 같이 pseudo 속성이 부여된 요소를 찾아 스타일에 변화를 주면 button의 원하는 곳에 스타일을 주는 것이 가능합니다.

(그냥 input에 스타일을 줄 경우 파일 선택 부분은 변하지 않고 오른쪽 부분만 스타일 변경이 생깁니다.) 

appearance: none 을 줘서 기본 HTML CSS를 안보이게 하고 커스텀을 해야 스타일 변경이 가능할 때가 많습니다.

 

 

밑줄 친 셀렉터를 가져와서 CSS 파일에 스타일을 넣는 것도 가능입니다.

 

여기서 -webkit- 은 크롬, 오페라, 사파리, edge 부라우저에서만 동작하는 스타일을만들고 싶을 때 사용합니다.

파이어폭스는 -moz- 를 사용합니다.