CSSOM(CSS Object Model)

CSSOM

브라우저에서 우리 HTML 파일을 분석하게 되면 HTML에 있는 요소들을 Document Object Model로 변환했는데

사용자가 정의한 스타일 CSS는 어디로 가나?

 

CSS 스타일은 브라우저가 어떻게 이해하는지 대해서 알아본다. 

 

DOM  +  CSS = CSSOM(compute styles, based on CSS, cascading rules)

                 external

                 embedded

                 inline

                 user-agent stylesheet

 

브라우저에서 Document Object Model을 만들게 되면 사용자가 정의한 CSS를 병합해서 CSSOM이라는 것을 만들게 된다.

 

그 말은 브라우저가 HTML 파일을 Document Object Model로 만들었다면 사용자가 HTML 파일 안에 들어 있는 스타일

임베디드된 스타일이나 사용자가 CSS파일에 정의한 CSS나 아니면 우리가 HTML 태그에 정의한 스타일 요소들이나 또 아니면 이런 스타일이 따로 지정이 되어 있지 않아도 브라우저상에서 기본적으로 가지고 있는 스타일이 있다.

 

그래서 이런 모든 스타일에 관련된 정보들을 합해서 즉 DOM과 CSS의 요소를 병합해서 CSS DOM이라는 즉, CSS Object Model이라는 트리를 다시 만들게 된다. CSSOM에서는 우리가 정의한 스타일뿐만 아니라, 브라우저에서 기본적으로 설정된 모든 속성값들 즉, cascading 룰에 따라서 합해진 이런 compute styles, based on CSS, cascading rules 모든 CSS 값들이 정의되어져 있다.

 

이것을 computed styles라고 부른다. 이제 모든 것들이 이미 다 계산된 스타일을 말한다. 예를 들어보면(참고영상) 만약 우리가 HTML에서 폰트 사이즈를 14라고 지정을 했다면 모든 요소들에게는 각각 14가 적용되어진다. 즉, 각각의 태그에서 폰트 사이즈를 지정하지 않았지만 우리가 제일 부모인 HTML에서 폰트 사이즈를 14라고 하게 되면 cascading 룰에 따라서 body 모든 자식 요소들이 14로 기본적으로 설정이 되는거다.

 

그래서 CSSOM에는 모든 계산된 이런 스타일의 관련된 속성들이 다 포함되어져 있다. HTML에는 padding이 이렇게 되어있고 body에는 백그라운드 색깔과,  text-align이 center로 지정되어 있고 span에는 이렇게(color: white로) 그래서 모든 아이들이 합해져서 여기에 등록이 되는 것이다.

 

그래서 브라우저가 우리으l html 파일을 읽게 되면 제일 처음 Document Object Model 트리를 만들게 되고,

그다음에 CSS 파일을 읽은 다음에 전부 다 계산해서 최종적으로 확정된 이 CSS 스타일의 트리를 만들게 된다.

이제 이거 다음에 DOM과 CSSOM을 합해서 즉 최종적으로 브라우저에 표기될 아이들만 Render tree에 선별 되어져서 표기가 되는 것이다.

 

Render tree에 body 부분만 들어 있는 게 확인이 된다. 왜냐면 html head에 있는 이 아이들은 사용자 눈에 절대 안보이기 때문이다. 그리고 만약에 html의 section이 display가 none으로 되어있으면 우리가 CSS에서 display를 none으로 설정하면 사용자에게 보여지지 않는다. 그래서 만약 이 section에 display: none이라고 설정이 되어있으면

최종 Render 트리에는 secion이 포함되지가 않는다.

 

그래서 render 트리에는 사용자에게 궁극적으로 보여지는 아이들만 선별이 되어서 이렇게 DOM과 CSS의 스타일이 합해져서 최종적으로 이렇게 트리가 만들어지는 것이다. 예를 하나 더 들면 span의 opacity가 0, visibility가 hidden으로 설정이 되어 있다면, 사용자 눈에는 보이지 않지만 사실 요소는 거기에 있다.

 

다만 투명도가 0으로 되어있거나 visibility속성이 hidden으로 되어져 있기 때문이다. 이제 이런 아이들은 Render 트리에 포함이 되지만 display가 none으로 되어있다면 아예 사용자 눈에 보이지 않는 이런 속성값들은 Render 트리에 포함이 되지 않는다. 이제 이런 차이점을 조금 이해하고 있자.

 

브라우저가 아무라 간단한 html 페이지라고 할지라도 이렇게 사용자에게 보여주기까지는 굉장히 많은 절차가 진행된다.

먼저 DOM으로 변환해서 CSSOM을 만들어서 최종적인 스타일을 전부 다 계산한 다음에 Render 트리를 만들어서 사용자에게 보여 주게 되는 것이다.

 

그리고 CSSOM에는 CSS에는 cascading이라는 것이 규칙이 존재하기 때문에 우리가 CSS를 따로 정의하지 않았어도 브라우저에서 설정된 이런 기본적인 CSS 파일이 있따면 그것들이 전부 다 적용이 된다. 또는 내가 각각의 요소에 폰트 사이즈를 지정하지 않았지만 부모 요소에서 폰트 사이즈를 지정하게 되면 cascading룰에 따라서 이렇게 밑에 있는 자식 요소들도 동일한 이런 속성값을 가질 수 있다.

 

좀 더 세부적인 Rendering path에 대해서도 알아보고 어떤 점들을 주의해야 하는지, 브라우저 위에서 성능이 좋은 웹페이지 웹어플리케이션을 만들기 위해서는 어떤 점들을 유의해야 되는지에 대해서도 알아보자.

 

 

 

 

 

 

 

 

 

 

 

 

참고 : https://academy.dream-coding.com/courses/browser101

프론트엔드 필수 브라우저 101 (자바스크립트 마스터 | 디버깅, 성능 분석, 실전 프로젝트 10개)