(1) DOM의 기본 개념
✅ javascript가 생긴 이유
a. 브라우저에서 쓰려고 만들어진 JS에요!
b. 본연의 역할 : 웹 페이지를 동적으로 만들기 위해!
즉, HTML문서를 조작해서 생명력을 불어넣어주기 위해 만들어진 언어
✅ 웹 페이지가 뜨는 과정
1️⃣사용자가 브라우저에 ‘**www.naver.com’ 주소를** 입력
1. 클라이언트가 서버에게 ‘요청(request)’를 했네요.
2. 여러분이 크롬을 통해 클라이언트의 역할을 하는 것 🚀
💡 사용자 = 브라우저 = 클라이언트 (같은 의미)🙂
2️⃣ HTML 문서를 서버로부터 수신
네이버서버는 여러분(=브라우저 =클라이언트)에게 ‘응답(response)’형태 => HTML 문서(document)
3️⃣브라우저가 HTML 파일을 해석(parsing 파싱)
1. 브라우저에는 기본적으로 렌더링(번역) 엔진
- 서버가 클라이언트(여러분)에게 준 HTML문서를 렌더링 한다는 것
2. 랜더링 엔진이 HTML문서에 코드 한줄, 한줄 보면서 ‘해석'.
💡 해석은 언제 필요할까요?
- 서버로부터 받아 온 문서 javascript는 이해할 수 없기 때문에 javascript가 알아들을 수 있는 방법으로 ‘해석’하는 과정 필요
4️⃣ javascript가 알아들을 수 있는 방식으로 해석한 내용을 토대로 DOM Tree를 구성해요.
DOM Tree랑 CSSOM Tree를 묶어서 Render Tree를 구성
결국, 브라우저 화면에 그리기 위한 최종 버전을 만들어냄.
그리고 나서 브라우저에 그림을 그리기 위한 레이아웃 계산 → **페인팅 과정**시작.
**렌더 트리(Render Tree)**는 HTML, CSS 및 JavaScript 문서를 파싱하여 브라우저에서 실제로 렌더링되는 최종 문서 모델을 나타내는 객체의 계층 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav>
<ul>
<li>첫번째 메뉴</li>
<li>두번째 메뉴</li>
<li>세번째 메뉴</li>
</ul>
</nav>
<main>
<h1>메인 영역의 제목입니다</h1>
<img
src="https://mblogthumb-phinf.pstatic.net/MjAyMTAzMTRfNSAg/MDAxNjE1NzI1MDgxOTc1.7NT2i3qiu9mm9-XpyiIJxxoXcqigfWu7GlU99HY1TZQg.Zv5Gckdnyxy18efpnOXHVVDL-6cuLGNH9qc3F-pEuO4g.PNG.erke2000/372-3725123_download-browsers-png-transparent-image-web-browser-plug.png?type=w800"
alt="이미지없음"
/>
</main>
<footer>copyright.</footer>
</body>
</html>'Javascript' 카테고리의 다른 글
| React_Lv1. My Todo List 만들기 (0) | 2023.12.28 |
|---|---|
| DOM-API 실습 (1) | 2023.12.19 |
| 콜백함수 제너레이터(Generator) (0) | 2023.12.19 |
| 비동기 작업의 동기적 표현 - Promise (0) | 2023.12.19 |
| 콜백함수_promise (1) | 2023.12.18 |
