CSSOM(CSS Object Model) 이란?

@KOBU Agency unsplash

CSSOM(CSS Object Model) 이란?

웹 사이트를 브라우저 상에 표현할 때 서버로부터 받은 정보를 브라우저가 렌더링 엔진을 통해 파싱 하는데 이때 두 가지 요소를 파싱 하는데 하나는 HTML 또 하나는 CSS입니다. 
이때 HTML을 파싱 하여 자료를 구조화한 것을 DOM이라 하고 CSS 내용을 파싱 하여 자료를 구조화한 것을 CSSOM이라 합니다.
즉 DOM처럼 CSS의 내용을 해석하고 노드를 만들어 트리 구조로 만든 것을 CSSOM이라 합니다.

 

CSSOM이 트리구조인 이유

어떻게 본다면 CSS는 트리 구조일 필요가 없습니다.
DOM의 경우 태그 별로 위아래가 이미 존재하고 문서 구조화를 통해 다양한 작업을 수월하게 할 수 있습니다.
하지만 스타일은 위아래가 없는데 트리 구조라는 게 이상합니다.

이는 CSS가 기본적으로 하향식으로 규칙을 적용하는 방식을 따르기 때문입니다.

만약 CSS 문서의 내용이 HTML 내용에 중복되어 적용되어있을 경우 브라우저는 최종적인 스타일을 계산할 때 일반적인 규칙에서 시작해 더 구체적인 방식을 적용하는 식으로 짜여있습니다.

결국 스타일을 적용하는 방식 때문에 트리구조가 짜여있다고 볼 수 있습니다.
따라서 HTML과 CSS는 결합되어 문서를 나타내기 때문에 CSSOM 또한 DOM처럼 위아래 관계를 가지게 되고 그로 인해 트리구조가 생기는 것이라 볼 수 있습니다.