Summary
Introduction
김자영 강사님
Code, Conept & Explanation
브라우저의 렌더링 과정
파싱 (parsing)
파싱은 브라우저가 HTML, CSS, JavaScript 같은 코드를 읽고 "이해할 수 있는 구조로 바꾸는 과정"
쉽게 표현하면, 코드를 읽고 이해 → "설계도 만들기"
파싱의 주요 단계
-
HTML 파싱: HTML 코드를 읽어 웹 페이지의 구조(뼈대)를 생성
→ DOM 트리(Document Object Model Tree)를 생성. -
CSS 파싱: CSS 코드를 읽어 웹 페이지의 스타일(색깔, 글꼴 등)을 정의
→ CSSOM 트리(CSS Object Model Tree)를 생성. -
JavaScript 파싱: JavaScript 코드를 읽어 기능(버튼 클릭 시 동작 등)을 정의
→ AST(Abstract Syntax Tree)라는 구조로 변환.
렌더링 (redering)
렌더링은 파싱을 통해 얻은 데이터를 실제로 "화면에 보여주는 과정"
쉽게 표현하면, 설계도를 바탕으로 웹 페이지를 화면에 보여줌
→ "설계도를 실제로 짓기"
렌더링의 주요 작업
브라우저가 HTML(구조)과 CSS(디자인 스타일)을 합쳐서 실제 웹 페이지를 생성
JavaScript가 DOM과 CSSOM을 조작해 화면에 더 복잡한 동작을 추가
참고) 알고리즘 순서
순차, 조건, 반복
렌더링 세부 과정 : 비유로 쉽게 이해하기
-
서버 → 브라우저: 책을 주문하면 필요한 종이(HTML), 색칠 도구(CSS), 메모 기능(JavaScript)이 도착.
-
HTML 파싱 → DOM 생성: 책의 목차와 내용을 정리.
-
CSS 파싱 → CSSOM 생성: 텍스트에 알맞은 색칠.
-
DOM + CSSOM → 렌더 트리: 책을 시각적으로 꾸미고 최종 정리.
-
렌더링: 독자가 읽기 쉽게 완성된 책을 화면에 보여줌.
렌더링 세부 과정
1. HTML 파싱 → DOM 트리 생성
HTML 파일은 DOM(Document Object Model)이라는 구조로 변환
DOM은 웹 페이지의 "뼈대" 역할
예: <'h1>Hello<'/h1> → 트리 구조로 변환.
2. CSS 파싱 → CSSOM 트리 생성
CSS 파일은 CSSOM(CSS Object Model)이라는 구조로 변환
CSSOM은 DOM과 결합되어 스타일을 웹 페이지에 적용
예: color: red; → 요소에 빨간색 적용.
JavaScript 파싱 → AST 생성
3. JavaScript 파일은 AST(Abstract Syntax Tree)라는 구조로 변환
이 과정에서 JavaScript는 DOM이나 CSSOM을 변경 가능
예: 버튼을 클릭하면 화면 내용 변경.
DOM + CSSOM → 렌더 트리(Render Tree)
4. DOM(구조)과 CSSOM(디자인)이 합쳐져 렌더 트리를 만듭니다.
렌더 트리는 실제로 화면에 그릴 내용을 정의합니다.
예: 텍스트, 색상, 크기 등.
5. 화면 그리기 (Painting)
렌더 트리를 기반으로 브라우저가 픽셀 단위로 화면에 요소를 그립니다.
DOM 트리
DOM(Document Object Model)은 HTML 문서를 트리 구조로 변환한 것
브라우저가 HTML을 읽고, 요소 간의 관계(부모-자식 관계)를 정의해 구조화된 형태로 표현
DOM 트리 이해를 돕는 비유
HTML 파일은 "가구 조립 설명서"라면
브라우저는 이 설명서를 읽고, 가구(웹 페이지의 구조)를 조립하는 과정에서 DOM 트리를 만듭니다.
DOM 트리 생성 과정
-
HTML을 위에서 아래로 읽으며 태그들을 하나씩 노드(node)로 변환.
-
각 태그는 노드로 변환되며 부모-자식 관계를 가집니다.
<'html>은 모든 요소의 부모.
<'head>와 <'body>는 <'html>의 자식. -
HTML 태그뿐 아니라, 속성(attribute)과 텍스트도 각각의 노드로 표현
예: <'div class="c1">hello<'/div>에서 class="c1"와 hello도 별도의 노드.
CSSOM 트리
CSSOM(CSS Object Model)은 CSS 스타일 정보를 트리 구조로 변환한 것
CSS 스타일 규칙을 읽고, 이를 DOM과 결합해 렌더링에 필요한 정보를 제공
CSSOM 트리 이해를 돕는 비유
CSS 파일은 "옷 스타일 정보"라고 생각할 수 있습니다.
CSSOM 트리는 옷(스타일 정보)을 웹 페이지 요소(HTML 구조)에 입히기 위해 만들어집니다.
CSSOM 트리 생성 과정
CSS 파일을 읽어 각 규칙을 해석.
스타일 규칙들이 트리 형태로 정리되고, 상속 관계를 표현.
예: body의 font-size가 div에도 적용됨.
렌더 트리 : DOM + CSSOM → 렌더 트리
브라우저는 DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성
렌더 트리는 실제로 화면에 표시될 요소들만 포함하며, 각각의 스타일과 위치 정보를 제공
쉽게 정리하자면
1. DOM 트리: HTML 구조를 트리 형태로 표현 (웹 페이지의 "뼈대").
2. CSSOM 트리: CSS 스타일을 트리 형태로 표현 (웹 페이지의 "옷").
3. 렌더 트리: DOM + CSSOM을 합쳐 화면에 그릴 준비를 마친 결과물.
자바 스크립트의 파싱과 실행
JavaScript는 실행 시점이 중요합니다:
HTML을 위에서부터 차례로 읽다가 <'script> 태그를 만나면,
HTML 파싱을 잠시 멈추고,
JavaScript를 파싱(이해)하고 실행한 후,
다시 HTML 파싱을 진행
DOM 노드 유형
-
Document Node (문서 노드):
DOM 트리의 최상위 노드
HTML 문서를 대표하며, 다른 모든 노드의 부모 역할
예: document 객체를 통해 접근. -
Element Node (요소 노드):
HTML 태그를 나타내는 노드
부모-자식 관계를 통해 구조화되며, DOM 트리의 주된 구성 요소
예: <'body>, <'h1>, <'a> 등이 요소 노드. -
Attribute Node (속성 노드):
HTML 태그에 적용된 속성
예: <'a href="example.com">에서 href가 속성 노드.
속성 노드는 부모 노드(Element Node)를 통해 접근 필요 -
Text Node (텍스트 노드):
HTML 태그 내부의 텍스트 콘텐츠를 나타냅니다.
DOM의 최종 단계로, 자식 노드를 가질 수 없습니다.
예: <'h1>Welcome<'/h1>에서 Welcome이 텍스트 노드.
쉽게 이해하는 DOM과 노드 활용
- Document Node : HTML 문서의 "최상위 관리자"
- Element Node : HTML 태그로 이루어진 "건물의 뼈대"
- Attribute Node : HTML 태그에 추가된 "속성 정보"
- Text Node : HTML 태그 안의 "글자"
노드 접근 비유
- Document Node: 도서관의 "전체 책 목록".
- Element Node: 책의 "제목과 목차".
- Attribute Node: 각 장에 대한 "부가 정보(페이지 수)".
- Text Node: 책의 "본문 내용".
DOM 요소 노드의 취득 (기본 메서드)
DOM을 조작하려면 먼저 HTML에서 원하는 요소를 찾아야 합니다. 이를 위해 JavaScript에서 제공하는 다양한 메서드가 있습니다.
(1) getElementById(id)
특정 id 속성을 가진 하나의 요소를 반환.
반환값: 요소 객체 (없으면 null).
const element = document.getElementById("myId");
console.log(element); // id="myId"인 요소 출력
CSS 선택자를 사용하는 메서드
CSS 선택자처럼 요소를 선택할 수 있는 메서드로, 더 정밀하고 직관적인 방식으로 요소를 찾을 수 있습니다.
querySelector(css selector)
CSS 선택자 문법으로 요소를 찾음.
첫 번째로 발견된 요소 하나만 반환 (없으면 null).
const element = document.querySelector(".myClass");
console.log(element); // 첫 번째 class="myClass"인 요소 출력
querySelectorAll(css selector)
CSS 선택자 문법으로 요소를 모두 찾음.
NodeList 객체를 반환하며, HTMLCollection보다 다루기 편리.
요소가 없으면 빈 NodeList 반환.
const elements = document.querySelectorAll("p.intro");
console.log(elements); // class="intro"인 모든
요소 출력
DOM 요소 탐색의 기본 구조
트리 구조 이해
1. 부모 노드(parentNode): 현재 노드를 포함하는 상위 요소.
2. 자식 노드(children): 현재 노드의 하위 요소들.
3. 형제 노드(sibling): 같은 부모를 공유하는 동등한 위치의 노드.
자주 사용되는 속성들:
- children, firstElementChild, lastElementChild (자식 탐색)
- previousElementSibling, nextElementSibling (형제 탐색)
- parentNode (부모 탐색)
Challenges & Solutions
Results
What I Learned & Insights
Conclusion
