TIL - 20220626

 온라인 강의를 들을 때, 다른 생각을 자주 하게 되어 집중을 제대로 하지 않는 것 같다고 느끼는 경우가 자주 있다. 그래서, 2회 차 강의를 들을 때 제대로 이해가 되지 않는다고 생각해서 1회 차를 다시 듣는 것이기 때문에, 이번엔 1회 차 강의를 들으면서 조금 더 집중력을 끌어올리고자 강의에서 말하는 내용들을 텍스트로 다음과 같이 작성했다.

 

코드스피츠76 - CSS Rendering 1회 차 1/2

Normal flow는 CSS에서 공식적으로 등장하는 고유 명사이자 브라우저가 그리는 주요 방식이다.

Normal Flow에는 두 가지 계산 공식이 있다. Block Formatting Contexts와 Inline Formatting Contexts.

Relative Formatting Contexts도 있지만 이건 Position model에 정의되어 있다.

그렇기에 실제 Normal flow를 계산하는 방법은 Block Formatting Contexts와 Inline Formatting Contexts라고 얘기할 수 있다.

 

Block은 한 줄을 다 먹는다. 

Block Formatting Contexts에서 유일하게 계산할 것은 다음 block이 y 자리가 어딘지만 신경 쓰면 된다.

첫 번째 block의 heigh이 두 번째 block의 y. 안에 있는 block 요소의 height이 나의 height.

 

Inline Formatting Contexts은 가로 한 줄이 아닌 컨텐츠가 갖고 있는 내용만큼 가로 크기를 가진다. 또한 두 번째 요소는 첫 번째 요소가 가로길이만큼 떨어진 자리에 위치한다. Inline Formatting Contexts에서 부모 요소의 크기보다 자식 요소의 크기가 커지게 된다면 다음 줄로 넘어가게 된다.

 

div 기본은 block. 렌더링 시스템과 dom의 구조는 무관하다. 태그의 구조가 렌더링의 구조와 일치하지 않는다.

position: relative는 먼저 static으로 그리고 상대적으로 위치를 이동시킨다.

position: static과 position: relative가 충돌하면 relative가 위로 올라온다.

html 기본 값은 모두 position: static이다.

 

코드스피츠76 - CSS Rendering 1회 차 2/2

float는 Block Formatting Contexts와 Inline Formatting Contexts 공식으로 그려지지 않는다. linebox라는 공식으로 그려진다.

 

Normal flow는 bfc, ifc, relative로 이 세 가지 원리로 이루어진다.

 

float를 만들 때마다 geometry 계산이 까다로워진다.

float는 inline 요소에 대해서 guade로 작동한다.

 

linebox는 가용할 영역 중에 float만 신경쓴다.

 

float 요소를 못 넣게 되면 현재 linebox 경계면 하단 혹은 baseline에 있는 빈 공간이 linebox의 영역이 된다.

 

linebox에서 overflow: hidden인 block 요소 다음에 또 block 요소가 온다면 이 두 요소가 합쳐져 새로운 요소가 된다.

 

확실히 강의를 듣고 텍스트로 옮겨볼 때 강의 그대로 옮길 수 없어서 강의를 부분 부분 다시 듣게 되므로 한 번 듣기만 하는 것보다 텍스트로 옮겨보는 게 집중에 있어서 더 도움이 되는 것 같다. CSS 강의는 이렇게 텍스트로 정리해야겠다.