[코드스피츠76] CSS Rendering 1강

Graphics System(점찍는 방법)

• Fixed Number
  • 가장 원시적인 고정값으로 위치 표기
  • 고정된 수는 범용적인 그래픽시스템의 환경에 적용이 불가하다.
• Abstract Calculator
  • metaphor(%, left, block, inline, float⇒ 함수)를 사용 >>> 기준을 잡고 공식을 적용 ⇒ 숫자로 변환
• Components
  • 예 ) html 하나하나의 태그, 부트스트랩의 각 컴포넌트, window application하나하나
• Framework
  • html 체계전체
  • 부트스트랩 자체
  • window 전체

Rendering System (그림 표현 하기 위한 정보는 뭐야?) ⇒ 브라우저에도 동일하게 적용됨

• Geometry Calculate(reflow)
  • 영역 계산, 박스 찾기, 땅따먹기
• Fragment(단편, 조각) Fill(repaint)
  • 영역의 색 칠하기

CSS Specifications

• Level 1 (버전X)
  • 오페라 브라우저 만든이(이하닉스)가 HTML과 css를 분리하자 주장
• Level 2
  • ms가 제안한게 주를 이루며단일 사양 관리가 어려워 관심분야별(맥, 윈도우 )로 렌더링 시스템이 다르므로 Module화
• Level 2.1
  • 일부는 레벨 3까지 올라갔는데 일부는 2.1이 최선이라는 것을 파악하고 더이상 레벨을 붙이지 않음
  • css3라는 별도의 레벨은 없음
  • (3) Syntax / values / cascade / text / color / text / text decor / selectors / fonts / background / ui
• Module Level
  • (1) transforms / masking / compositing / flexbox / effects / grid

Other Specifications

• WICG ( Web Platform Incubator Community Group ) : w3C 외의 단체이며 구글 크롬이 있어서 좀 더 센 단체
• RICG ( Responsive Issues Community Group )

Normal Flow

Position : Geometry의 추상적인 위치를 정의하는 체계이며 모두 계산식

• Static
  • 모든 element는 position static
• Relative
  • Static으로 그리고 relative에 지시된 만큼 상대적으로 위치를 이동시킴
  • static과 relative가 섞여있으면 무조건 relative가 static 위로 올라옴
  • relative끼리는 z-index로 구분
  • geometric은 무조건 static으로 그렸으므로 박스크기, width, height등의 변화는 없음
• static, relative외(Absolute, Fixed, Inherit)에는 normal flow가 부서진다.

Normal Flow

• BFC (Block Formatting Contexts) :
  • 부모만큼 가로 1줄을 다먹음
  • y값만 주의
  • 첫번째 블록 요소의 y값의 height값이 나의 height값
  • IFC가 앞에 왔더라도 BFC가 위치하면 IFC를 멈추고 BFC로 동작
• IFC (Inline Formatting Contexts)
  • 나의 컨텐츠 크기만큼 가로를 먹음
  • 두번째 컨텐츠는 첫번째 컨텐츠 떨어진 x만큼 뒤에 생성됨
  • 부모 width를넘어가면 밑에 줄로 넘어감 (얼마큼 ? : 지금 인라인 구성하는 컨텐츠 중에 제일 큰 컨텐츠의 lineheight만큼 내려감)

** Rendering system(BFC, IFC) 과 DOM은 무관하다

• Relative position

Float

• Line Box 공식 적용 (BFC, IFC)
  • 플로트가 등장하는 순간, 기존의 BFC, IFC 공식을 파기하고 Line Box 생성
  • 플로트는 인라인(블록요소가 아니라) 요소의 가드로 작용해서 플로트 밖에 인라인이 생성 ⇒ 블록요소에서는 라인박스의 가드 역할을 하지 않음
  • 블록요소는 플로팅 되어있을뿐, 블록 크기는 그대로 나옴
  • 라인박스는 오직 플로트만 신경쓸뿐, 이전 플로트가 없을때는 신경쓰지 않고 생성됨
  • 라인박스는 가로와 세로 모두 봄
  • 왼쪽 오른쪽에 차지할 공간이 없다면 베이스라인을 기준으로 새로 라인 박스가 적용됨

Overflow

• css 2.1
• float의 특약사항으로 visible(auto), hidden, scroll, inherit
  • AUTO가 visible(내부 크기가 커지면 부모 크기도 바뀐다)
  • 속성이 hidden, scroll일때만 flow와 관련되어 새로운 BFC(라인박스 바운더리를 인식하며)를 생성한다(규약에 정의)

Overflow-x, -y

• css level3 draft
• visible, hidden, scroll, clip,

Text-overflow

• css2.1