Shadow-DOM

Shadow-DOM

html로 뼈대를 지을 때 너무 복잡해지지 말라고 숨겨놓은 장소가 있다.

이곳은 Shadow-DOM이라는 곳이고!

이것을 볼때 개발자 도구 설정을 들어가서

이 부분을 체크하면 개발자 도구를 열어서 코드를 까 볼 때 shadow-dom의 구역을 자세히 들여다볼 수 있다.

그럼 이제 file 타입의 input 태그의 어두운 부분을 까 볼 수 있다.

이러한 기본적인 모습을 ( 파일 선택 부분은 캡처 잘못해서 왼쪽 잘림 ;; )

개발자 도구로 까 보면

이런 식으로 shadow 자리의 코드를 볼 수 있고, 우리는 이제 이것들을 골라서

css로 꾸미면 된다!

저번에 기록한 pseudo-element 가 보인다. pseudo 클래스를 불러와서 shadow-dom을 스타일링할 수 있다.

내 마음대로 input [type="file"] 꾸미기...

.inner { width: 400px; border: 2px dashed lightslategray; text-align: center; margin: 50px auto; } input[type=file]::-webkit-file-upload-button { appearance: none; cursor: pointer; background: rgb(153, 153, 200); border:none; color: white; padding: 8px; box-sizing: border-box; border-radius: 10px; margin-right: 13px; } input[type=file] { cursor: pointer; color: rgb(109, 109, 118); background: rgb(234, 234, 241); margin: 30px; padding: 10px; border-radius: 10px; }

내 마음대로 range 바 css 스타일링 하기.

range는 말 그대로 범위를 지정하는 input 태그이고, 기본적인 형태는

shadow-dom 구역을 찾아내서 css 스타일링을 하면

volume

.inner2 { margin:50px auto; width: 300px; height: 30px; text-align: center; } input[type=range] { appearance: none; transform: translateX(-90deg); background: rgb(232, 232, 237); width: 300px; height: 8px; } input[type=range]::-webkit-slider-thumb { appearance: none; width: 19px; height: 19px; border-radius: 100px; background: white; border: 3px solid rgb(144, 192, 239); }

+ input [type=range]는 기본적으로 지정된 css 스타일링 요소들이 있기 때문에 이것들을

appearance: none;으로 이것에 포함된 요소들에 지정을 해주어야 내가 임의로 지정한 스타일링을 보이게 할 수 있다.

내 마음대로 progress 바 css 스타일링하기...

progress 바는 상태 진행 바로 자바스크립트로 제어해주면 되고 일단 shadow-dom 요소를 선택해서 꾸미는 것까지만

연습!..

원래는 이러한 모습이다.

그럼 이제 progress 바도 임의로 연습할 겸 스타일링을 합시다... 연습...

progress { appearance: none; } progress::-webkit-progress-bar { background: transparent; } progress::-webkit-progress-inner-element { appearance: none; width: 300px; height: 20px; border: 3px solid rgb(229, 230, 232); } progress::-webkit-progress-value { background: linear-gradient(rgb(156, 187, 237),rgb(145, 189, 231),rgb(166, 218, 251), rgb(185, 185, 222)); height: 13px; }

from http://comrin.tistory.com/49 by ccl(A) rewrite - 2021-10-23 17:27:13