Shadow DOM

<input type="file">

내가 HTML에 위처럼 적으면 한 개의 태그를 적었는데 두 개의 요소가 생성하는 것을 볼 수 있다. 

이런게 Shadow DOM 때문이라고 한다.

shadow DOM을 보려면 먼저 개발자도구 settings에서 

을 켜주면 볼 수 있다.

<input placeholder="안녕하세요">

HTML에 입력하고 개발자 도구로 클릭해보면 이 부분이

이렇게 나온다 여기서

안녕하세요 라는 회색 글씨의 색을 바꾸고 싶으면

 

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

이렇게 input태그에 pesudo-element를 이용해서 placeholder부분의 -webkit 을 써서 속성을 변경할 수 있다.

 

여기서, -webkit은 크롬, 오페라, 사파리, Edge 의 브라우저에서 동작하는 스타일 일때 이렇게 쓴다.

파이어폭스는 -moz

익스플로러는 -ms 라고 써주면 된다.