코드스피츠 css 렌더링 강의 내용 정리

https://youtu.be/_o1zsrBkZyg

graphics system

• .을 찍는 일 (픽셀로 이루어진 화면)

  • x, y, width, height 와 같은 고정된 숫자로 표현 (fixed number system)
  • 하지만 이런 시스템은 다양한 기기의 환경에 적응할 수 없음
    • 모니터 해상도 말고도 브라우저의 크기, 모바일의 가로/세로 모드도 영향을 준다.
  • 그래서 범용성 있는 graphic system을 생각하게 됨

  *ui에 있는 여러 요소들을 chrome 이라고 한다.

⇒ abstract calculator: 고정된 숫자로 표현하지 않고%, left, block, inline 이라는 메타포, 공식이자 함수를 사용하게 됨.

• %: 비율로 표현하겠다. 공식이자 함수. 해상도가 주어지면 크기를 반환
• right: 부모 width에서 자신의 width를 뺀 다음 그 숫자를 자신의 x 좌표로 삼음
  • 부모가 100, 자신이 10이면 90 위치에 자신을 놓는다.

⇒ components: 복잡한 화면을 그리기 위해 추상화된 그래픽스 시스템 내에서 공통적인 엘리먼트를 만들게 됨

⇒ framework: 해당 컴포넌트가 일정한 규칙과 사용방법을 지키도록 하게 되어있다면 프레임워크라고 함

rendering system

• graphics뿐 아니라 범용적으로 사용되는 말
• 내가 원하는 모습으로 다시 그려내는 일
• 데이터를 어떻게 그림으로 표현하는가.
  • 그림으로 표현하기 위한 정보는 뭘까?
• 2단계: 영역을 나눈 뒤 그린다
  • geometry calculate: 박스 영역을 나눔.
  • fragment fill: 하나하나 칠하는 대상을 fragment라고 함. fill은 색칠하는 것
  • 브라우저도 똑같다. reflow → repaint 과정을 거친다.

css specifications