[javascript] CSSOM( DOM + CSS )

https://developer.mozilla.org/ko/docs/Web/API/CSS_Object_Model

CSS 객체 모델 (CSSOM) - Web API | MDN

 

| CSSOM이란?

 

CSSOM은 

DOM(Document Object Model) + CSS 로 

 

1단계. 브라우저가 페이지를 로드하고 DOM Tree를 만든다.

 

2단계. DOM 트리에 CSS 파일을 읽어 반영한 CSSOM Tree를 만든다.

 

3단계. DOM 트리와 CSSOM 트리를 합하여 최종적으로 브라우저에 표기될 object 들만 모인 Render Tree를 생성한다.

 

 

 

 

| 알아두면 좋은 팁1

 

CSS 속성 중 사용자에게는 보여지지 않도록 설정하는 두 가지 방법이 있는데

 

 

 

* display : none; 

 

으로 설정된 요소는 Render Tree에 포함되지 않고 사용자에게도 보여지지 않으며,

 

 

 

* opacity : 0; (투명도)

* visibility : hidden;

 

으로 설정된 요소는 Render Tree에 포함되지만 동일하게 사용자에게는 보여지지 않는다.

 

 

 

| 알아두면 좋은 팁2

 

CSS는 cascading 규칙이 적용되어 

 

부모요소에서 적용된 속성이 자식들에게도 모두 적용된다.