5. `CSSOM, CSS Object Model`

CSSOM은 CSS Object Model의 약자로, DOM과 비슷한 트리 구조이며, 차이점은 CSS style과 관련된 값들을 가지고 있는 객체 모델이라고 볼 수 있음

우리는 일반적으로 CSS를 통해 HTML 엘리먼트에 스타일을 제공할 수 있으며, 또한 CSS 선택자를 통해 DOM 엘리먼트들을 가져와서 값을 설정하고 스타일을 적용함

어떤 방식으로 스타일을 적용하든, 결국 브라우저는 DOM 엘리먼트에 CSS 스타일을 적용하는 작업을 수행해야 함

DOM을 구성한 이후, 브라우저는 모든 소스(external, embedded, inline, user-agent, etc) 에서 CSS 코드를 읽고 CSSOM을 구성함

이 CSSOM 트리에서 각 노드들은 자신들의 선택자에 맞는 DOM 엘리먼트에 적용될 CSS style 정보들을 포함하고 있음¹

대부분의 브라우저들은 user agent stylesheet이라는 브라우저 자체에서 별도로 제공하는 stylesheet을 가지고 있음 만약 특정 CSS가 가진 속성(ex. display)이 적용되어야 할 HTML 엘리먼트에 user-agent나 개발자가 별도로 정의한 스타일에도 정의가 되어있지 않다면 defalut value로 W3C CSS 기본 규칙을 적용시킴 (<meta>, <script>와 같은 화면 상에 표현되지 않는 DOM 엘리먼트들은 가지고 있지 않음) 이런식으로 color나 font-size같은 상속되는 몇 가지 속성들은 부모의 속성을 상속받기도 함(Cascading) Chrome dev tools의 computed 탭에서 최종적으로 적용된 stylesheet 확인 가능 ↩

5. CSSOM, CSS Object Model