HTML 을 이용한 화면에 UI 표현하기

브라우저에서 UI를 볼 수 있는 것은 이 HTML 을 분석해서 보여줄 수 있습니다.  이 HTML은 요소(Element)들로 구성되어 있습니다.

돔 이란? (Document Object Model)

• 돔(문서 객체 모델)은 메모리에 웹 페이지 문서 구조를 트리구조로 표현해서 웹 브라우저가 HTML 페이지를 인식하게 해줍니다.
• 위에서 보는 웹 페이지를 이루는 요소들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미합니다.

돔 조작

위에 보이는 DOM 트리를 DOM 에서 제공해주는 API를 이용해서 조작할 수 있습니다.  이 API를 이용해서 DOM 구조에 접근하거나 원하는 요소(Element)를 수정하거나 없애거나 할 수 있습니다.

이렇게 DOM을 조작해서 화면을 변경시켜줄 때 브라우저 내부에서는 어떠한 과정을 통해서 바뀐 화면을 변경시켜주는지 알아보겠습니다.

웹 페이지 빌드 과정(Critical Rendering Path CRP)

브라우저가 서버에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기 전에 여러 단계가 있습니다.

웹 브라우저가 HTML 문서를 읽고, 스타일 입히고 뷰포트에 표시하는 과정입니다.