코드스피츠 css 렌더링 강의 내용 정리
Float
•
bfc, ifc가 아닌 line box로 그려짐
1.
line box 공식
•
float div가 등장하면 bfc가 새로 생김. float bfc는 위에 생김.
•
float은 새로운 bfc를 만듦.
2. text, inline guard
•
float는 inline 요소에 대해 가드로 작동함. 즉, 자신의 영역은 못 건드리게 함. = 따라서 inline 요소는 float 요소를 인식함
•
반면, block 요소에 대해서는 가드하지 않음 = block 요소는 float 요소를 인식하지 않음
•
인라인 요소는 hello는 float에 의해 밀려남. DOM 구조와 상관없이 World도 인라인 요소이므로 밀려남.
•
block 요소들은 float를 신경쓰지 않고 모두 자신의 width를 차지함
3. line box
•
line box 내에서 float가 차지한 영역은 신경쓰지 않음 → 처음 float을 뺀 나머지 영역이 line box 영역이 됨.
•
line box는 height도 봄. 3번째 float에서 쓸 영역은 100height만 있으면 되므로 줄어듦
•
4번째까지는 그릴 수 있으나 5번째는 width 150이므로 나머지 가용 영역을 쓸 수 없음
•
그래서 나머지 가용 영역은 버리고, 마지막 4번째 밑을 바운더리로 잡고 해당 가용 영역 안에 넣을 수 있으면 5번째를 넣음. 만약에 그래도 부족하면 그 다음으로 적은 height 바운더리인 3번째, 그래도 부족하면 1번째와 2번째 밑을 바운더리로 잡음
•
5번째 왼쪽도 공간이 부족하므로 5번째 밑을 베이스라인으로 잡고 6번째를 생성
•
그 다음으로 적은 height는 2번이므로 2번을 베이스라인으로 잡고 7번을 그림
•
float = right보다 더 오른쪽에 그리지 않고, left보다 더 왼쪽에 그리지 않음
•
그럼 남은 공간은 빨강, 초록 박스를 제외한 공간임
•
인라인 요소인 ABC는 3, 4 박스 사이에 위치하게 됨
overflow
•
css 2.1 visual formatting model에 정의되어 있음
•
visible, hidden, scroll, inherit, auto
◦
일반적인 브라우저는 auto가 visible과 일치함
•
기본값은 대부분 auto = 자식의 크기가 커지면 부모도 같이 커짐 (geometry의 크기가 직접 변함)
•
scroll: 내 geometry를 넘어가는 콘텐츠가 생기면 스크롤 바를 만듦
◦
내 geometry가 너비 200인데 너비 300짜리 콘텐츠가 안에 생기면 가로 스크롤바 생김
•
overflow-x / y
◦
overflow를 x축, y축 따로 관리하는 스펙
◦
놀랍게도 module lv.3 "draft" 상태: recommendtation까지 갔다가 draft로 바뀜
◦
transform, border radius가 나오면서 이것들과의 충돌을 해결하여 draft로 새로 제안됨
•
text-overflow
◦
css2.1 module lv.3
◦
clip, ellipsis
•
overflow가 hidden, scroll 속성을 가질 때 → 이 때만 float랑 관련 있음
◦
(overflow)이 값을 갖는 요소로부터 새로운 BFC를 만든다는 규약이 있음
◦
first line box bound를 인식해서 만듦
•
3번째 div는 overflow:hidden 속성이 없으므로 새로운 BFC를 만들지 않고 두번째 BFC에 속하게 됨
•
마지막 레드 C의 line box 밑을 베이스라인으로 했을 때, 오렌지 D는 height가 부족해 그릴 공간이 없음 → 그래서 요소는 화면에서 사라지고 공간만 차지함
•
오렌지 D만큼 height 가 밀린 상태에서 블랙 박스 생성
•
7번 공간에서 float 왼쪽에는 가용영역이 없으므로(left 보다 더 왼쪽에 위치할 수 없고 right보다 더 오른쪽에 위치할 수 없음) 레드 E는 사라짐
•
빨간 박스가 overflow: auto인데 ABC8까지 안늘어나는 이유는?
◦
단, line box때문에 가드 작동으로 밀려난 경우는 overflow: auto여도 늘어나지 않음.
◦
렌더링 시스템과 프레그먼트 시스템의 차이: 렌더링 시스템에서 geometry를 설정해도, fragment의 라인 박스 시스템때문에 ABC8까지 그려짐. 따라서 geometry 영역만큼 칠하는 background: red는 abc1까지만 칠한 것. 즉, 라인 박스로 인해 밀려난 인라인 콘텐츠는 공간을 차지 하지 않음.
홀라홀라~!
여기까지를 고전 레이아웃이라고 함
