둘을 비슷한 개념이라고 이해했었다...
알면 알수록 순서가 얼마나 중요한지 깨달음
1. DOM 의 개념 : 웹 페이지에 대한 인터페이스
- 크롬, 앳지 등. 콘텐츠나 css 등을 읽고 조작할 수 있는 API 제공
2. 웹 피이지가 만들어지는 과정
- 원본 HTML 을 읽고, View 포트에 띄우기까지의 과정 = 이를 Critical Rendering Path 라고 한다.
Critical Rendering Path 의 대략적인 2가지 스텝은 다음과 같은데
step1. 읽어들인 내용을 파싱해서, 최종적으로 랜더링 할 내용을 결정함.
step2. 그리고 랜터링 수행
- 이때 랜더링을 위해 랜더트리가 생성되는데, 이는 HTML과 CSS로 구성
이 랜더트리를 생성을 위해 다음 2가지가 필요함
1). DOM (DOM 트리) : HTML 요소들의 구조화된 표현
2). CSSOM (CSSOM 트리) : CSS 요소들의 구조화된 표현
3. 정리
- DOM 이 HTML 보다 큰 개념
1). DOM 은 원본 HTML 문서를 객체기반 표현방식으로 표현, HTML 들의 그룹.
2). HTML 은 단순 문서 ~ 텍스트 구성, 요소 느낌
4. 최종요약
하나의 View 가 띄워지기 위해서 랜더링이 이루어짐.
이 랜더링을 위해 필요한게 랜더 트리 (DOM 트리 + CSSOM 트리)
랜더 트리는 각각 Load - Parse - Create 가 진행됨
'퍼블리싱' 카테고리의 다른 글
[CSS] background gradient (0) | 2023.09.20 |
---|---|
cvg 에니메이션 적용 (0) | 2023.08.17 |
CSS 기초 _(수정: 2023.11.17) (0) | 2022.10.27 |
Id, Class (0) | 2022.09.30 |
Html5, Css3, Flex (0) | 2022.09.27 |