# shadow dom

gorapa100

Shadow DOM는 캡슐화된 DOM으로 HTML document에 독립적이다.

soosoorim

Shadow DOM HTML 개발시 코드가 너무 복잡해지지 않기 위해 숨겨놓은 HTML 요소들이 있는데 이것을 Shadow DOM이라고 부른다. 하지만 아무나 볼 수는 없어서 '어둠을 보는 눈'이 필요한데 이걸 얻는 법이 있다. 일단 크롬 개발자도구 셋팅 변경이

wltn39

737

soosoorim

pseudo-class상태에 따라서 스타일을 줄 수 있는 Pseudo-class 셀렉터<button> <input> <a> 등 클릭할 때 스타일을 다르게 줄 수 있는 셀렉터hover, focus, active 스타일 넣을 때 순서는 꼭 이렇게 선언해야

x5foddl

<input type="file">입력 시 버튼이랑 글자 이렇게 2개의 HTML요소가 생성된다<input type="range">, <progress> 이런것들도 비슷한데 왜 그럴까용?Shadow DOME이란?HTML개발시 코드가 너무 복잡해지지안힉 위

rageboom

: 웹 컴포넌트의 특장점은 캡슐화이고 이를 통해 재사용 가능한 컴포넌트 제작을 쉽게 해준다.여기서 Shadow DOM이 핵심 기술로 사용된다.: Shadow DOM은 숨겨진 DOM 트리(Shadow tree)로 Shadow root에서 시작되어 원하는 어느 요소(Sha

049494

Shadow DOM : 일반적으로는 볼 수 없는 숨겨진 HTML Web Component와 합쳐 쓰면 HTML 모듈화를 할 수 있다. 예시) 내부적으로 여러개의 div를 이용해서 만들어진 것임. 숨겨진 코드를 확인하기 위해서는 개발자도구 -> 설정 -> show u

sangbooom

아래 내용들은 자바스크립트 완벽가이드 15장 중의 일부분입니다.input prefix에 검색 아이콘이 있고 사용자가 x 아이콘을 클릭하면 input 요소에 입력된 내용을 지우는 검색박스 가 필요하다. 이 검색 박스 하나를 추가할 때마다 아이콘을 넣고 입력된 내용을 지우

yejineee

👉 JSFiddle에서 Shadow DOM 예시 확인하기 web에서 중요한 것은 캡슐화이다. 캡슐화를 통해 다른 부분에는 영향을 주지도, 받지도 않으면서 그 자체의 구조, 스타일, 행동을 유지할 수 있게 된다. shadow DOM은 DOM을 캡슐화한 것이다. shadow DOM을 통해 element에 캡슐화된 DOM을 붙일 수 있게 된다. 📕 ...