1-2 Rendering System

렌더링#

렌더링이라는 말은 그래픽스에서만 쓰는 것이 아니다.

  • 데이터베이스의 내용 → JSON 으로 렌더링

어떠한 대상이 있으면 내가 원하는 모습으로 다시 그려내는 것이다.

일반적으로

  • 보다 구체적이고 시각적인형태로 바꿔주는 것.

그래픽스에서

  • 그림을 그리기 위한 데이터 → 그림으로 바꿔내는 것

그림을 표현하기 위한 정보는 대체 무엇일까?

브라우저, 자바스크립트의 도움없이 만들 수 있을까?

보통 2단계를 통한다

Geometry Calculate#

1단계는 영역을 나누고 박스를 찾는 것이다.

Fragment Fill#

그러고 나서 색칠을 한다.

Fragment#

색칠하는 과정에서 하나하나 칠하는 대상

픽셀이라는 단어는 중립적이지 않아서 쓰지 않는다.#

일반적으로, 아래 두 해상도가 일치할까?

  • 핸드폰에서 HTML 뷰포트를 scale 로 했을 때 나오는 해상도
  • 핸드폰의 픽셀 해상도 → 훨씬 더 많다.

픽셀의 비율#

여기서 1px 은 무엇일까? QHD 에서 실제 물리적인 화소 4개가 1픽셀이된다.

레티나의 원리가 폰트 12px 을 영어로 썼는데 이쁘게 나온다. 12공간안에 점이 엄청 많을 것이다.

모든 공간을 가리키는 중립적인 단어를 fragment#

1픽셀을 채우는 것이 아니라 해당 물리적인 점을 다 채워야 한다.

reflow/repaint#

렌더링은, geometry 계산하고 fragment 를 채운다.

브라우저에서 (브라우저마다 용어가 다를 수 있음)

  • geometry 계산 하는 과정 → reflow
  • reflow 된 영역안에 채우는 행위 → repaint
Last updated on