본문 바로가기

퍼블리싱

DOM, HTMP

둘을 비슷한 개념이라고 이해했었다...

알면 알수록 순서가 얼마나 중요한지 깨달음


1. DOM 의 개념 : 웹 페이지에 대한 인터페이스

- 크롬, 앳지 등. 콘텐츠나 css 등을 읽고 조작할 수 있는 API 제공

 

2. 웹 피이지가 만들어지는 과정

- 원본 HTML 을 읽고, View 포트에 띄우기까지의 과정 = 이를 Critical Rendering Path 라고 한다.

  Critical Rendering Path 의 대략적인 2가지 스텝은 다음과 같은데

        step1. 읽어들인 내용을 파싱해서, 최종적으로 랜더링 할 내용을 결정함.

        step2. 그리고 랜터링 수행

- 이때 랜더링을 위해 랜더트리가 생성되는데, 이는 HTMLCSS로 구성

   이 랜더트리를 생성을 위해 다음 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