shadow DOM

dev

Shadow DOM을 알아보자

이전 글에서 DOM에 대해서 알아봤습니다. 쉬운 내용은 아니었지만, 브라우저가 어떻게 HTML과 CSS, JS를 렌더링하는지 알 수 있었을 겁니다. 이제는 한단계 올라가봅시다. HTML의 모든 요소와 Style로 이루어진 DOM은 global한 범위에 있습니다. 어떤 요소가 얼마나 많은 부모를 가지고 있든지 간에, getElementById나 querySelector를 통해서 접근이 가능하죠. CSS도 마찬가지고요. 그 덕분에 우리는 부모는 신경쓰지 않고 모든 요소의 Style을 한꺼번에 변경할 수 있습니다. div { color: red; } 그런데 이렇게 잘 사용하다가 어떤 div와 그에 속한 자식들에게는 color를 blue로 줄 필요가 생겼습니다. 이럴 때는 어떻게 해야 될까요? 바로 이럴 때 필..

dev

DOM을 알아보자

최근에 회사에 새로 입사한 신입이랑 이야기를 하던 도중, DOM이 뭔지 모른다는 충격적인 이야기를 들었습니다. HTML이 그대로 웹 브라우저에 나타나는 것으로 생각하고 있던 것이죠. 정확하게 말하자면 DOM은 브라우저마다 다르게 나타날 수 있습니다. 그것을 통일하기 위한 표준은 존재하지만요. 그래서 이번 포스팅에서는 DOM과 브라우저가 어떻게 HTML, CSS, JS를 사용자에게 보여주는지를 아주 간략하게 설명드리고자 합니다. 간략하게 설명하려다보니 내용이 다소 부실할 수도 있겠습니다. 자세한 내용을 원하시는 분들은 직접 MDN을 찾아서 확인해보시는 것을 추천합니다. DOM의 정의 DOM(Document Object Model)은 웹 페이지에 대한 프로그래밍 인터페이스(Programming Interfa..

이루크
'shadow DOM' 태그의 글 목록