렌더링

렌더링(Rendering) 은 코드를 사람이 볼 수 있는 화면으로 바꾸는 것입니다.

쉽게 말하면

코드(텍스트) → 렌더링 → 눈에 보이는 결과물

예시

이런 코드가

<h1 style="color: red;">안녕</h1>

이렇게 보이는 것

안녕 (빨간색 큰 글씨)

이 변환 과정이 렌더링입니다.

일상 비유

비유원본렌더링 결과
악보 → 음악악보 (기호)실제 연주되는 소리
레시피 → 요리레시피 (텍스트)완성된 음식
설계도 → 건물도면실제 건물

브라우저 렌더링 과정

HTML, CSS, JS (코드)
       ↓
    파싱 (해석)
       ↓
    DOM, CSSOM 생성
       ↓
    Render Tree 생성
       ↓
    Layout (배치 계산)
       ↓
    Paint (그리기)
       ↓
    화면에 표시

다른 분야에서의 렌더링

렌더링은 웹만의 용어가 아니에요.

분야렌더링 의미
웹HTML/CSS → 웹페이지
영상편집 데이터 → 동영상 파일
3D/게임3D 모델 데이터 → 화면에 보이는 그래픽

한줄 요약

렌더링 = 컴퓨터가 코드/데이터를 해석해서 눈에 보이는 결과물로 만드는 과정

CSLOG에서 보기