브라우저에서 html 요소를 변환하여 Document Object Model을 만들게 되면, 우리가 정의한 CSS를 병합해서 CSSOM(CSS Object Model)을 만들게 된다.
즉, DOM이 만들어진 이후, html 파일안에 들어있는 스타일 (임베디드형, 인라인형, 브라우저상에서 기본적으로 가지고 있는 스타일 등)에 관련된 정보들을 합해서 DOM과 CSS 요소를 병합해서 CSSOM 이라는 트리를 다시 만듬.
CSSOM에서는, 우리가 정의한 스타일 뿐만 아니라, 브라우저에서 기본적으로 설정된 모든 속성값들 즉, cascading 룰에 따라서 합해진 모든 CSS값들이 정의되어 있다. 이것을 ‘computed styles’ 라고 부른다. 이것은 모든 것들이 이미 계산된 스타일임을 의미한다.
예를 들어 , 위의 이미지에서 html에서 폰트사이즈를 14px로 지정했다면, 아래 모든 요소들에 14px이 적용된다. 즉, 각각의 태그에서 폰트 사이즈를 지정하지 않았지만, 제일 부모인 html에서 폰트 사이즈를 14px 라고 하게 되면, cascading 룰에 따라 모든 자식 요소들이 기본적으로 설정되는 것이다. 그래서 CSSOM에는 이러한 모든 계산된 속성들이 다 포함되어져 있다.
(참고 : https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade )
브라우저가 html을 읽을 때의 순서.
- DOM 변환 -> Document Object Model 트리 생성
- CSS 파일을 읽은 후에, 계산 과정을 거침
- CSSOM 트리 생성
- 최종적으로 브라우저에 표기될 아이들만 선별
- Render Tree 생성
위의 이미지를 보면, Render Tree에 <head> 가 빠진 걸 확인할 수 있다. 이는, head는 사용자눈에 보여지지 않기 때문이다. 만약에 section태그가 display :none; 으로 되어있다면 최종 Render Tree에 그 section 태그는 포함되지 않는다.
만약 visibility: hidden; 이거나 opacity: 0 이라면, 보여지지는 않지만 사실 요소는 있는 것이므로 Render Tree에 포함된다.
즉, Render Tree는 사용자에게 궁극적으로 보여지는 아이들만 선별이 된다.
CSSOM : https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model
