웹사이트 렌더링은 어떻게 되는가?

웹사이트에 접속하면 HTML, CSS, JS 파일이 전송되고, 그것을 브라우저가 읽어서 우리에게 보기 좋게 만들어 준다. 그렇다면 그 과정을 상세히 알아보자. 1. Object Model 만들기 먼저 브라우저가 HTML과 CSS 파일을 받으면 이를 각각 DOM, CSSOM으로 변환한다. DOM은 이전에 알아본 것처럼 HTML의 요소들을 트리구조로 만든 것이다. CSSOM은 CSS Object Model로 CSS의 DOM이라고 할 수 있다. 이 때 중요한 것은 DOM과 CSSOM은 서로 독립적인 데이터 구조라는 것이다. 2. 렌더링 트리 생성 하지만 완전 별개의 DOM과 CSSOM으로는 홈페이지를 보여줄 수 없다. 따라서 이 별개의 모델을 서로 합쳐줘야 한다. 이때 이둘은 DOM을 기준으로 태그에 맞는 C..

DOM API 란?

DOM은 Document Object Model의 약자이다. 프론트엔드에서 이는 HTML에 있는 요소들을 트리 구조로 다루는 모델을 의미한다. HTML 요소들을 DOM으로 접근하면, javascript를 이용해 동적으로 HTML의 내용, 구조, 스타일을 변형시킬 수 있다. DOM에 접근하는 여러 메소드가 있으나 가장 많이 사용되는 것은 querySelector일 것이다. querySelector는 태그, 클래스, 아이디 모두 사용 가능하며 querySelectorAll을 이용해 여러 요소를 한 번에 불러 오는 기능까지 있기 때문에 아주 유용하다. 아래와 같은 HTML이 있다고 해보자. 1 2 3 4 만약 우리가 1번 째 div를 호출하고 텍스트를 바꾸고 싶다면 아래와 같이 할 수 있다. // 호출 let..