Browser의 동작 - 2
파싱 일반(Parsing - general)
파싱은 렌더링 엔진에서 매우 중요한 과정이다. 문서를 파싱한다는 건 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미한다. 파싱 결과는 보통 문서 구조를 나타내는 노드 트리로, 파싱 트리(parse tree) 또는 문법 트리(syntax tree)라고 부른다.
예를 들면 2+3-1과 같은 표현식은 다음과 같은 트리가 된다.
위와 같은 내용을 해석해 어떤 값을 얻어야 할 때, 기본적인 파싱 방법은 다음과 같다.
2, +, 3, -, 1을 모두 분리한 다음 '+ 문자는 앞과 뒤를 합쳐준다'와 같이 각각의 문자가 가진 의미(=*토큰)를 기준으로 문법 트리(syntax tree)를 만든다. 트리에 따라서 값의 처리가 일어나게 된다.
DOM
"파싱 트리"는 DOM 요소와 **속성 노드(attribute node)의 트리로서 출력 트리가 된다. DOM은 문서 객체 모델(Document Object Model)의 준말이다. 이것은 HTML 문서의 객체 표현이고 외부를 향하는 자바 스크립트와 같은 HTML 요소의 연결지점이다. 트리의 최상위 객체는 문서이다.
DOM은 마크업과 1:1 관계를 맺는다. 예를 들면 이런 마크업이 있다.
<html>
<body>
<p>Hello World</p>
<div><img src="example.png" /></div>
</body>
</html>이것은 아래와 같은 DOM 트리로 변환할 수 있다.
웹킷 CSS 파서
p, div, .error와 같은 것을 셀렉터(Selectors). margin-top, color와 같은 것을 선언(Declaration)이라고 한다.
시작 브레이스 '{' 와 마침 브레이스 '}'를 찾고, 콜론을 찾아 key 값과 value 값을 매칭하는 단계를 거친다.
DOM 트리와 렌더 트리의 관계
렌더러는 DOM 요소에 부합하지만 1:1로 대응하는 관계는 아니다. 예를 들어 "head" 요소와 같은 비시각적 DOM 요소는 렌더 트리에 추가되지 않는다. 또한 display 속성에 "none" 값이 할당된 요소는 트리에 나타나지 않는다(visibility 속성에 "hidden" 값이 할당된 요소는 트리에 나타난다).
CSS 박스 모델
CSS 박스 모델은 문서 트리에 있는 요소를 위해 생성되고 ****시각적 서식 모델에 따라 배치된 사각형 박스를 설명한다. 각 박스는 콘텐츠 영역(문자, 이미지 등)과 선택적인 패딩과 테두리, 여백이 있다. 각 노드는 이런 상자를 0에서 n개 생성한다.
모든 요소는 만들어질 박스의 유형을 결정하는 "display" 속성을 갖는데 이 속성의 유형은 다음과 같다.
① block - 블록 상자를 만든다.
② inline - 하나 또는 그 이상의 인라인 상자를 만든다.
③ none - 박스를 만들지 않는다.
기본 값은 인라인이지만 브라우저의 스타일 시트는 다른 기본 값을 설정한다. 예를 들면 "div" 요소의 display 속성에 대한 기본 값은 block 이다.
* 토큰 : 단어, 문자열 등 의미를 지니는 최소한의 단위.
** 속성 노드(attribute node) : HTML 속성을 가리킨다. HTML 속성은 태그의 문법 명령어가 다루지 못하는 명령을 보조적으로 담당한다(EX. 이미지 주소 입력, 이미지 대체 텍스트 입력). 또는 제목이나 문단의 글씨 크기, 배경색 등을 바꾸는 CSS 효과를 담당하는 것 또한 속성이다. | HTML 요소인 태그, 값, 속성 살펴보기
*** 뷰포트(Viewport) : 스마트 기기에서 여러 단말기의 해상도에 대응하기 위해 사용. 페이지를 최초 로딩할 때 확대정도, 최대 확대비율, 최소 확대비율 등을 다루는 meta data에 속하는 속성이다. | viewport 정리
**** 시각적 서식 모델 (visual formatting model) : 문서를 처리하여 그것을 시각적 매체에 표시하는 알고리즘. | 시각적 서식 모델
