HTML을 이용한 화면에 UI표현하기
브라우저에서 UI를 볼 수 있는 것은 이 HTML을 분석해서 보여줄 수 있습니다.
이 HTML은 요소(Element)들로 구성되어 있습니다.
돔 이란?(Document Object Model)
돔(문서 객체 모델)은 메모리에 웹 페이지 문서 구조를 트리구조로 표현해서 웹 브라우저가 HTML페이지를 인식하게 해줍니다.
또한 위에서 보는 웹 페이지를 이루는 요소들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미합니다.
돔 조작
위에 보이는 DOM 트리를 DOM에서 제공해주는 API를 이용해서 조작할 수 있습니다. 이 API를 이용해서 DOM 구조에 접근하거나 원하는 요소(Element)를 수정하거나 없애거나 할 수 있습니다.
이렇게 DOM을 조작해서 화면을 변경시켜줄 때 브라우저 내부에서는 어떠한 과정을 통해서 바뀐 화면을 변경시켜주는지 알아보겠습니다.
웹 페이지 빌드 과정(Critical Rendering Path CRP)
브라우저가 서버에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기 전에 여러 단계가 있습니다. 웹 브라우저가 HTML 문서를 읽고, 스타일 입히고 뷰포트에 표시하는 과정입니다.
CSS 객체 모델(CSSOM)
CSS Object Model은 JavaScript에서 CSS를 조작할 수 있는 API 집합입니다. HTML 대신 CSS가 대상인 DOM이 라고 생각할 수 있으며, 사용자가 CSS 스타일을 동적으로 읽고 수정할 수 있는 방법입니다.
