[노트] JPG, PNG, SVG & HTML 동작 순서 2024.06.04(화)

2024.06.04(화)

1. JPG, PNG, SVG 차이

• JPG (JPEG)
  • 형식: 손실 압축 이미지 파일 형식
  • 풀네임: Joint Photographic Experts Group
  • 특징:
    • 압축: 손실 압축을 사용하여 파일 크기를 줄임. 
               압축 과정에서 일부 이미지 데이터가 손실되므로 고화질 이미지의 경우 품질 저하가 발생할 수 있음.
    • 색상: 최대 1,670만 색상(24비트 컬러)을 지원.
    • 배경: 투명도를 지원하지 않음.
    • 사용 사례: 사진 및 복잡한 이미지를 저장하는 데 적합.
• PNG
  • 형식: 무손실 압축 이미지 파일 형식
  • 풀네임: Portable Network Graphics
  • 특징:
    • 압축: 무손실 압축을 사용하여 파일 크기를 줄이면서도 원본 품질을 유지.
    • 색상: 최대 1,670만 색상(24비트 컬러)을 지원.
    • 투명도: 알파 채널을 사용하여 투명도 지원. 배경이 투명한 이미지를 만들 수 있음.
    • 사용 사례: 로고, 아이콘, 텍스트가 포함된 이미지, 배경이 투명한 이미지에 적합.
• SVG
  • 형식: 벡터 그래픽 이미지 파일 형식
  • 풀네임: Scalable Vector Graphics
  • 특징:
    • 확장성: 수학적 방정식을 사용하여 이미지를 정의하므로,
                   해상도에 구애받지 않고 크기를 자유롭게 조정 가능.
    • 파일 크기: 일반적으로 이미지의 복잡성에 따라 크기가 결정되며,
                        매우 간단한 이미지는 매우 작은 파일 크기를 가짐.
    • 투명도 및 애니메이션: 투명도와 애니메이션을 지원.
    • 사용 사례: 로고, 아이콘, 간단한 그래픽, 웹 애니메이션 및 인터랙티브한 웹 요소에 적합.
• 요약
  • JPG: 압축으로 인한 적은 용량과 데이터 손실 및 화질 저하
  • PNG: 무손실 압축으로 인한 원본 퀄리티 및 알파 채널을 사용한 투명도 지원
  • SVG: 벡터를 활용한 해상도 구애 받지 않으며 투명도와 애니메이션 모두 지원

---

2. HTML 동작 순서

1. HTML 문서 로드

• URL 입력 및 요청:
  • 사용자가 브라우저에 URL을 입력하거나 링크를 클릭합니다.
  • 브라우저는 DNS 조회를 통해 도메인 이름을 IP 주소로 변환하고, 해당 서버에 HTTP(S) 요청을 보냅니다.
• 서버 응답:
  • 서버는 요청된 HTML 문서를 포함한 응답을 브라우저에 보냅니다.
  • 브라우저는 이 응답을 수신하고 HTML 문서를 파싱하기 시작합니다.

2. HTML 파싱 및 DOM 생성

• HTML 파싱:
  • 브라우저는 HTML 문서를 위에서 아래로 순차적으로 파싱합니다.
  • 각 HTML 태그를 읽고 이를 DOM(Document Object Model) 트리에 추가합니다.
  • DOM 트리는 HTML 문서의 구조와 콘텐츠를 나타냅니다.

3. CSS 파싱 및 CSSOM 생성

• CSS 파싱:
  • 브라우저는 HTML 문서에서 <link> 태그 또는 <style> 태그를 발견하면 CSS 파일을 요청합니다.
  • CSS 파일을 수신하면 이를 파싱하여 CSSOM(CSS Object Model) 트리를 생성합니다.
  • CSSOM은 스타일 규칙을 나타내며, DOM과 결합하여 렌더 트리를 형성합니다.

4. JavaScript 실행

• JavaScript 파싱 및 실행:
  • 브라우저는 HTML 문서에서 <script> 태그를 발견하면 JavaScript 파일을 요청합니다.
  • JavaScript는 기본적으로 파싱과 동시에 실행되므로, 스크립트가 DOM을 조작하거나 스타일을 변경할 수 있습니다.
  • <script src="..."> 태그는 파싱을 일시 중지하고 해당 스크립트를 다운로드 및 실행한 후에 다시 파싱을 계속합니다.

5. 렌더 트리 생성

• 렌더 트리 생성:
  • 브라우저는 DOM과 CSSOM을 결합하여 렌더 트리를 생성합니다.
  • 렌더 트리는 페이지의 시각적 구조를 나타내며, 화면에 어떻게 표시될지를 정의합니다.

6. 레이아웃 (Reflow)

• 레이아웃 계산:
  • 브라우저는 렌더 트리를 기반으로 각 요소의 위치와 크기를 계산합니다.
  • 이 과정은 "레이아웃" 또는 "reflow"라고 불립니다.

7. 페인팅 (Painting)

• 페인팅:
  • 브라우저는 계산된 레이아웃 정보를 바탕으로 화면에 픽셀을 그립니다.
  • 이 과정은 "페인팅"이라고 하며, 요소의 색상, 배경, 테두리 등이 표시됩니다.

8. 디스플레이

• 디스플레이:
  • 최종적으로 렌더링된 콘텐츠가 사용자 화면에 표시됩니다.
  • 브라우저는 필요에 따라 지속적으로 DOM을 업데이트하고 재페인팅합니다.

 

 

• 단순 요약
  • HTML 로드 및 파싱
  • CSS
  • JavaScript
  • 렌더 트리 생성(페이지 표시 정의)
  • 레이아웃, 페인팅, 디스플레이 (렌더 트리 기반 표시)