웹 브라우저에서 HTML 코드를 출력하는 과정을 집짓기에 비유하기, 개발자도구 열어보기
1. 개발자 도구의 Element는 무엇일까?
F12를 누르면 개발자 도구가 나타난다. 이때, element 탭을 열면, 긴 HTML코드가 등장한다.
그러나 이는 이 웹페이지의 HTML코드의 원본은 아니다. 여기서 수정을 하면, 바로 현재 웹페이지에 반영은 되지만, 연결된 html 코드 자체가 수정되는 것은 아니다. element의 내용은 웹 브라우저가 이 웹페이지에 대한 html코드를 해석하여 출력한 결과로 (물론 매우 동일한 부분이 많지만) 출력된 값과 함께 문서의 구조 등이 담긴 내용이지 원본 코드가 아니다.
원본 html 코드를 보려면 Element탭이 아닌 Sources 탭에서 html 코드를 찾아야한다.
2. 웹 브라우저가 웹페이지를 출력하는 과정은 집짓기와 비슷하다.
html 코드를 받아서 웹 페이지에 띄우기 위해서는 웹 브라우저가 html 코드를 이해하고 출력하는 과정이 필요하다.
집 짓는 과정에 비유한다면, HTML 코드는 집 설계도다. 그리고 이 HTML 설계도를 웹브라우저(크롬, 엣지 등)가 해석하는 과정은 집짓기처럼 크게 4단계로 나누어 아래처럼 비유해볼 수 있다.
1단계 : 구조세우기 (=파싱)
집 설계도를 읽어 어떤 방이 어디에 있고, 창문은 어디에, 어떤 위치로 둘지 이해하고 구조를 세우는 과정
↓
2단계 : 꾸미기 (=CSS적용)
집 공간의 색상, 크기 등 디자인하는 과정
↓
3단계 : 문 달기, 창문, 버튼 달기 (=자바스크립트 실행)
집에서 움직여야 하는 것들, 문이 열리거나 스위치를 누르면 전등이 켜지는 동작 등이 가능하게 하는 과정
↓
4단계 : 최종 완성 (=렌더링)
각 단계의 흐름을 이해했다면, 간단한 설명을 읽어보자.
1단계 파싱 : HTML 을 읽고 구조를 세우기
- 브라우저는 우리가 웹 페이지에 접속했을때, HTML 코드 파일을 읽고 '파싱'을 시작한다.
- '파싱'은 HTML 코드의 내용을 이해하여 구조화하는 과정이다. 가령, <h1> 팡귄랜드 </h1>이 있으면, 브라우저에서는 이것은 큰 제목인 '팡귄랜드'구나하고 이해한다. 이렇게 HTML문서를 해석하여 문서의 구조화된 표현을 완성한다. 이를 DOM (Document Object Model) 이라고 하며, 이 DOM을 통해 웹페이지의 구조, 콘텐츠를 접근하고 수정할 수 있도록 한다.
* 여기서 DOM(Document Object Model)이란 문서의 구조된 표현으로, 아래 예시를 보면, 왼쪽의 html코드를 오른쪽 DOM 트리에서 계층적인 구조로 표현한 것을 알 수 있다.
TMI. 그러면 잠깐 의문이 생길 수 있다. 개발자 도구에서 Element탭을 열어보면, 왼쪽과 같은 html 형식에 가깝지 오른쪽의 DOM트리와는 영 다르게 생겼다. 왜 그럴까?
개발자 도구에서 보이는 것은 HTML형식으로 가공해놓은 DOM 트리의 표현이다. 가독성, 사용성을 위한 디자인적인 선택의 결과인 것이다. DOM 자체는 트리 구조다.
2단계 CSS적용 : 크기, 색상 등의 스타일을 적용하기
- 같은 <h1>태그라도 css 코드에 글자 크기, 색상, 여백등을 지정해놓았다면, 브라우저는 별도의 css 파일을 읽고 (혹은 HTML 코드 내에 같이 들어있을 수도 있음) , 그에 알맞게 스타일을 입힌다.
3단계 JavaScript 실행 : 애니메이션, 내용 바꾸기, 버튼 동작하고 반응하기 등의 동적인 내용을 넣기
- HTML 코드 안에 <script> </script> 태그 안에 있는 자바스크립트 코드들을 실행한다.
- 페이지를 불러오면 오늘 날짜로 텍스트가 바뀌거나, 애니메이션이 동작하거나, 버튼을 누르면 반응이 나오는 등의 동작을 실행하도록 자바스크립트 코드를 실행한다.
4단계 렌더링 : 화면에 출력하기
- 1)부터 3)까지의 모든 과정을 거져 알맞은 내용과 스타일이 적용된 웹페이지가 화면에 나타난다. 우리가 최종적으로 만나게 되는 웹페이지가 나타나는 것!
