코드스피츠76 - CSS Rendering을 보고 정리한 글 입니다.
렌더링은 어떠한 대상이 있으면 내가 원하는 모습으로 그려내는 모든 것(브라우저에서도 동일하게 렌더링 된다.)
일반적으로 보다 구체적이고 시각적(꼭 시각적일 필요 없고, 이해하기 쉬운)인 형태로 바꿔주는 것
렌더링 되는 순서
- 영역을 나눈다.(박스를 찾는다.)
Geometry Calculate(지오메트릭 카큘레이트)로 어떻게 영역이 나눠졌는지 먼저 계산 - fragment를 채운다.(색칠을 한다.)
Fragment Fill(프레그먼트는 하나하나 색칠하는 조각을 말한다.)로 박스를 색칠한다.
왜 px대신 프레그먼트가 사용될까?
⇒ px은 중립적이지 않고 상대적이기 때문에! 예를 들어 640px이라고해서 모든 해상도에서 같은 640개가 아니라 상대적이게..
Graphics System: 점을 어떤 방식으로 찍는가
Rendering System: 어떤 체계를 통해서 그림이 표현되는가 → 그림을 표현하기 위한 정보는 대체 뭐지?
Geometry(지오메트릭)을 계산하는 방법을 리플로우라고 하고,
리플로우 된 영역안을 채우는 Fragment Fill을 리페인팅이라고 한다.
