CSS Rendering System, Normal Flow, Float, Overflow

1. CSS ‑ Rendering1강

2. CSS ‑ History
FixedNumber System
Abstract Calculator
RenderingSystem
Component

3. CSS ‑ FixedNumber System
확정된값을기준으로그리는시스템
ScreenSize/ ChromeSize/ Hierarchy 의한계

4. CSS ‑ Abstract Calculator
현재우리가 사용하고 있는시스템
float, inline, %, left, right
추상화란?
공통되는특성이나속성따위를추출하여파악하는적용
추상화되어있는계산방식을통해Reactive하게 표현할수있는
System
For, If와같은개념

5. CSS ‑ RenderingSystem
Geometry Calculate= Position, Flow ‑> Reflow
Fragment Fill= Painting‑> Repaint
Reflow = 지형이바뀐다. = 바뀐지형이모두다시Repaint 되어야함.
Repaint = 바뀐지형에다시Fragment Fill이진행됨
Geometry Calculate를이해하는것이중요하다.

6. CSS ‑ Component
Abstarct Calculator를기반으로주제별로군집되어있는CSS의형태
CSS Framework
Bootstrap, Materialize

7. CSS ‑ NormalFlow
VisualFormattingModel
i. BlockFormattingContext (BFC) ‑ 줄단위로그리는것
ii. InlineFormattingContext (IFC) ‑ 옆으로그리는것
iii. RelativePositiong(RP) ‑ 옆에서끼어드는것
3가지알고리즘을통해Rendering된다.
Position
i. Static(Default) = NormalFlow
ii. Relative= NormalFlow
iii. Absolute
iv. Fixed
v. Inherit

8. CSS ‑ BFC, IFC
BFC = BlockFormattingContext
IFC = InlineFormattingContext
문서가 생성되면Root BFC 하나가 생성되며이R‑BFC를기준으로
offset(위치값)이결정된다.
BFC의영역크기는부모의BFC 영역크기에의해결정된다.
IFC의경우최초에앞에존재하는IFC를기준으로다음IFC의offset이
결정된다.
IFC는경계면(Guard)을만나면다음줄로넘기는속성을갖고있다.
R‑BFC 내에BFC와IFC의단위가 계속쌓인다.
IFC의Guard의종류는BFC의Guard와Float(LineBox) Guard가 있
다.

9. CSS ‑ overflow와IFC
overflow(visible‑ default)
컨텐츠가 넘어가게 되면영역의크기(Context)가 같이늘어나게 된
다.
공백문자를기준으로별개의영역을IFC로적용한다.
경계면을만나면다음줄로내린다(IFC의알고리즘)
IFC의word‑breaking
TextNode모든문자(글자하나하나)에IFC 알고리즘을적용
해주는TextNode속성. 경계면을만나는하나의문자를기준
으로줄바꿈이이루어진다.

10. CSS ‑ RelativePosition
Static으로그려진NormalFlow의위치를기준으로새롭게 Offset값이
설정되어그려지는(Reflow) 것을의미한다.
다시말해, RP의진행방식은NormalFlow가 먼저계산된이후에
RelativePosition이해당영역에서진행된다. (offset이바뀐다=
Reflow)

11. CSS ‑ Float (Reflow)
left, right, none, inherit
NormalFlow 영역을벗어나Linebox의원리로그려지게 하는속성
새로운BFC를생성한다.
(NormalFlow에그려진IFC) IFC 요소들에게 Guard역할을한다.
Guard요소가 된다= 넘지못한다.
IFC 요소들은Float가 있는자리에접근할수없다.
NormalFlow 위에떠있고, inline요소의x좌표에영향을준다.

12. CSS ‑ Linebox의배치방식‑ BFC
Float Box가 배치될수있는영역(상위의BFC)을기준으로자기가 차지
할수있는자리를계산하여차지함.
즉Float 영역중부모의BFC 영역을기준으로자기가 들어갈 수있는공
간을left 또는right 방향을기준으로찾아가서그려진다.
먼저영역이잡혀있으면잡혀있는영역을기준으로위치를정하여자기가
들어갈 수있는공간을찾는다.
Top라인을기준으로Linebox 영역이존재하면, 그 영역의offset top을
기준점으로두고 자신의offset top값을정하며, Linebox 영역이아닌
BFC 영역이있는경우는무시한다.

13. CSS ‑ Linebox의배치방식‑ IFC
float의right, left 값은공간을찾을때시작하는방향을의미함
float 영역내에IFC가 들어가면float 영역중빈공간부터찾아들어간
다.
IFC가 차지하는공간 = Left보단오른쪽Right보단왼쪽

14. CSS ‑ overflow
visible= 자동으로공간이확장된다.
NormalFlow의알고리즘= BFC, IFC
hidden
scroll
auto(visible)
inherit

15. CSS ‑ overflow (visible이아닐때)
overflow(visible이아닐때) ‑ hidden, scroll
Geometry 즉reflow에영향을끼친다.
새로운BFC를생성한다.
BFC를양산= 성능저하= overflow 마다BFC 생산됨

16. CSS ‑ overflow (visible이아닐때)
withFloat = withLinebox
First linebox bound= Linebox 영역이있을때Linebox 영역을기준
으로자기가 들어갈 수있는빈공간의위치를찾아서그 위치에새로운
BFC를생성한다.
Normalflow의BFC가 존재하고 Linebox 영역에겹치지않는
NormalFlow의영역위에overflow BFC 새로그려진다. 반대로
영역이없으면그려지지않지만NormalFlow는Linebox 영역에서
확인했듯이여전히존재한다. = BFC의양산
hidden을여러개 사용하면표현되지않은overflow‑hidden영역의
offset top에영향을받아서그 다음영역을시작점으로잡고 그려진다.
Linebox 영역이끝나면일반적인블럭처럼보이게 된다.

17. CSS ‑ text‑overflow
clip
ellipsis (…)

18. CSS ‑ 1강 끝
Q & A

19. 감사합니다.
이자료는'코드스피츠72 ‑ CSS Rendering1회차' 영상을기반으로정리한
내용입니다.
YoutubeLink
코드스피츠72 ‑ CSS Rendering1회차