CSSOM(CSS Object Model)

CSSOM(CSS Object Model)이란?

웹 사이트를 브라우저상에 표현할 때 서버로부터 받은 정보를 브라우저가 렌더링 엔진을 통해

 

파싱하는데 이 때 두 가지가 요소를 파싱하는데 하나는 HTML, 또 하나는 CSS다.

 

이때 HTML을 파싱하여 자료를 구조화 한것을 DOM이라 하고 CSS 내용을 파싱하여

 

자료를 구조화한 것을 CSSOM이라 한다.

 

즉 DOM처럼 CSS의 내용을 해석하고 노드를 만들어 트리 구조로 만든 것을 CSSOM이라 한다.

CSSOM은 왜 트리구조일까?

잘 생각해보면 CSS는 트리 구조일 필요는 없다.

 

DOM의 경우 태그 별로 상하위가 이미 존재하고 문서 구조화를 통해 다양한 작업을 수월하게 할 수 있다.

 

하지만 스타일은 위아래가 없는데 트리 구조라는게 이상하다.

 

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

 

만약 CSS 문서의 내용이 HTML 내용에 중복되어 적용되어있을 경우 브라우저는 최종적인 스타일을

 

계산할 때 일반적인 규칙에서 시작해 더 구체적인 규칙을 적용하는 식으로 규칙이 짜여져있다.

 

결국 스타일을 적용하는 규칙때문에 트리구조가 짜여져있다고 볼 수 있다.

 

말이 어려운데 결국 HTML과 CSS는 결합되어 문서를 나타내기 때문에 CSSOM 또한

 

DOM처럼 상하 관계를 가지게 되고 그로 인해 트리구조가 생기는 것이라 볼 수 있다.