connecting dots

HTML/CSS 1회차 | html 기초, DOM 본문

Live Class/DevCamp

HTML/CSS 1회차 | html 기초, DOM

dearsuhyun 2024. 6. 14. 22:22


웹 개발자가 html을 어떻게 바라보아야 하는가 ?

https://html.spec.whatwg.org/dev/

 

HTML Standard, Edition for Web Developers

About this specification This specification is like no other — it has been processed with you, the humble web developer, in mind. The focus of this specification is readability and ease of access. Unlike the full HTML Standard, this "developer's edition"

html.spec.whatwg.org

 

ASCII

https://ko.wikipedia.org/wiki/ASCI

 

ASCII - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 1972 프린터 사용 설명서에 개시된 아스키 코드 차트표 미국정보교환표준부호(영어: American Standard Code for Information Interchange), 또는 줄여서 ASCII( , 아스키)는 영문

ko.wikipedia.org

 


HTML mdn

https://developer.mozilla.org/ko/docs/Web/HTML

 

HTML: Hypertext Markup Language | MDN

HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS), 또는 기

developer.mozilla.org

 

추천 사이트

 

https://codepen.io/your-work

 

CodePen

An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.

codepen.io

 

https://web.dev/?hl=ko

 

web.dev

모든 브라우저에서 작동하는 최신 웹 환경을 빌드하기 위한 안내입니다.

web.dev

 

Element

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Sample page</title>
 </head>
 <body>
  <h1>Sample page</h1>
  <p>This is a <a href="demo.html">simple</a> sample.</p>
  <!-- this is a comment -->
 </body>
</html>

 

< element이름 속성1="값" 속성2="값" >

element는 여러가지 옵션(속성) 추가 가능

- 감쌀 수 있는 element

<head></head>

 

- 감싸지 않는 element (single element)

<input>

 

태그 <tag>

1. 시각적 요소가 없는 tag (시멘틱 태그, 브라우저에 표시 안됨, 문서 규정 용도)

<p></p>

 

2. 시각적 요소를 가진 tag

<h1></h1> ~ <h6></h6>

 

3. 사용자에게 정보를 받을 수 있는 tag (form tag, interaction tag)

<input>

 

DOM(Document Object Model)

문서 요소를 어떻게 객체화, 관계를 어떻게 할건지 ?

html --> 웹, 파싱(a --> b할 때 c로 변환하여 이 과정을 좀 더 다루기 쉽게)

 

https://web.dev/articles/howbrowserswork?hl=ko

 

브라우저의 작동 방식  |  Articles  |  web.dev

이 페이지는 Cloud Translation API를 통해 번역되었습니다. 브라우저의 작동 방식 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 최신 웹브라우저의 이면 주의:

web.dev

 

 

html을 읽는다 --> DOM 형태로 바꿈(파싱) | CSS도 같은 과정 --> 둘이 합침(attachment)

render tree를 만들고 painting --> display

 

 

 

렌더링(Rendering)은 웹 브라우저가 HTML, CSS, 자바스크립트 등의 웹 페이지 소스를 읽고 이를 사용자가 볼 수 있는 형태로 화면에 그려주는 과정입니다. 렌더링은 웹 페이지가 사용자에게 보여지기 위해 반드시 필요한 과정입니다.

### 렌더링 과정

렌더링 과정은 여러 단계로 나뉘며, 주요 단계는 다음과 같습니다:

1. **HTML 파싱 (Parsing)**:
   - 브라우저는 HTML 코드를 읽고 파싱하여 DOM(Document Object Model) 트리를 만듭니다. DOM 트리는 HTML 문서의 구조와 내용을 나타냅니다.

2. **CSS 파싱 및 적용**:
   - 브라우저는 CSS를 파싱하여 CSSOM(CSS Object Model) 트리를 만듭니다. CSSOM 트리는 CSS 스타일 규칙을 나타냅니다.
   - CSSOM 트리는 DOM 트리와 결합되어 렌더 트리(Render Tree)를 만듭니다. 렌더 트리는 페이지의 각 요소가 어떻게 보일지를 나타냅니다.

3. **JavaScript 실행**:
   - 브라우저는 자바스크립트를 실행하여 DOM이나 CSSOM을 동적으로 변경할 수 있습니다.
   - 이 과정에서 DOM 트리나 CSSOM 트리가 변경되면, 렌더 트리도 업데이트됩니다.

4. **레이아웃 (Layout)**:
   - 렌더 트리의 각 요소에 대해 위치와 크기를 계산하는 단계입니다. 이를 "reflow"라고도 합니다.
   - 브라우저는 각 요소가 페이지에서 어디에 위치하고 얼마나 큰지 계산합니다.

5. **페인트 (Paint)**:
   - 계산된 위치와 크기에 따라 각 요소를 화면에 그리는 단계입니다. 이를 "paint" 또는 "rasterize"라고 합니다.
   - 브라우저는 각 요소의 색상, 배경 이미지, 텍스트 등을 화면에 그립니다.

6. **합성 (Compositing)**:
   - 페인트된 요소들을 하나로 합쳐서 최종적으로 화면에 출력합니다. 여러 레이어가 있다면 이를 합성합니다.

### 예시

간단한 HTML과 CSS 코드의 렌더링 과정을 예로 들어보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rendering Example</title>
    <style>
        body {
            background-color: lightblue;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>​

#### 렌더링 과정

1. **HTML 파싱**:
   - 브라우저는 HTML을 파싱하여 DOM 트리를 생성합니다.
   - DOM 트리: `<html>`, `<head>`, `<body>`, `<div>` 등 각 요소를 트리 형태로 표현.

2. **CSS 파싱**:
   - 브라우저는 CSS를 파싱하여 CSSOM 트리를 생성합니다.
   - CSSOM 트리: `body { background-color: lightblue; }`, `.box { width: 100px; height: 100px; background-color: red; }`.

3. **렌더 트리 생성**:
   - DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성합니다.
   - 렌더 트리: `<body>`와 `.box`의 스타일 정보가 포함된 트리.

4. **레이아웃 계산**:
   - 각 요소의 위치와 크기를 계산합니다.
   - `.box`는 `width: 100px`, `height: 100px`로 설정됩니다.

5. **페인트**:
   - 각 요소를 화면에 그립니다.
   - `body`의 배경색은 `lightblue`, `.box`의 배경색은 `red`로 그려집니다.

6. **합성**:
   - 페인트된 요소들을 합성하여 최종적으로 화면에 출력합니다.

 

 

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

 

DOM 소개 - Web API | MDN

이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한

developer.mozilla.org

 

--> 자바스크립트에게 html을 조작할 수 있게 해주는 도구 !

 

반응형

'Live Class > DevCamp' 카테고리의 다른 글

JS 6회차 | 토이 프로젝트 설명, import/export, axis, express, app.get, SQL  (0) 2024.06.16
JS 1회차 | 식, 값, 문, 실행(run), 변수를 만드는 방법, 메커니즘, 객체의 특징, 함수를 만드는 방법  (0) 2024.06.15
HTML/CSS 3회차 | CSS 기초, flex, grid, 미디어 쿼리, CSS 네이밍 방법론, css framework  (1) 2024.06.15
HTML/CSS 2회차 | CSS 기초, box model, flexbox  (0) 2024.06.14
JS 2회차 | 함수: 일급함수, 즉시실행함수, 화살표함수, 클래스, 메소드, scope, var/let/const, 복사와 참조  (0) 2024.06.14
'Live Class/DevCamp' Related Articles more