CSS

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

선인장777 2023. 6. 4. 11:33

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