[CSS Rendering] 고전 레이아웃

CSS Rendering - 1 정리 blog

코드스피츠 유투브강의-2

---

Float ( left, right, none, inherit)

• New BFC
• Float over normal flow
• text, inline guard - float는 inline 요소의 가드로 작동한다.
• Line Box - BFC, IFC에 따라 그려지는것이 아니라, Line Box에 따라 그려진다.

 

---

New BFC - Normal Flow + Float Model

See the Pen QWWgVaJ by YunJeong (@melangyun) on CodePen.

두번째 div에서 float를 지정해주는 즉시 이전까지의 BFC를 파기하고 새로운 BFC영역이 시작된다.
- 새로운 BFC영역은 inline (영역)공간의 차지하는 끝까지 높이를 차지한다.
- 새로운 BFC영역에 sky blue 가 들어갔으며, 영역 위에 초록 영역이 떠있는 것이다.

따라서 float를 여러개로 설정하는 순간부터 geometry 영역의 계산이 복잡해진다.

 

---

Float over normal flow, Inline guard

See the Pen bGGRxMx by YunJeong (@melangyun) on CodePen.

왜 이렇게 그려지는걸까?
float 영역으로 새로운 BFC 영역이 만들어졌고, Hello는 inline요소이다.
하지만 녹색 div영역이 float속성을 갖고있으며, inline영역의 guard 로 작동하므로 guard 바깥으로 밀려나게 된다.

정말 주의할점은, 돔의 포함관계와 상관없이 inline 영역만 guard 되고, bock요소는 guard 되지 않아 하늘색 div는 default값과 같이 left 0 로 작동한다.(block 요소는 float되기만 할 뿐 밀려나지 않는다.)
rgba값을 주지 않는다면 혼동하기 매우 쉬우므로 주의하자.

---

Line Box - float 요소만 오직 고려됨!

See the Pen zYYzmGK by YunJeong (@melangyun) on CodePen.

부모요소가 500px 이고
첫번째 Float 영역을 설정함으로써 새로운 BFC영역으로 설정된다.
BFC영역은 부모의 width 전체가 width값이 된다. 따라서 모든 line box 가 전체 사용 가능한 공간이된다.

중요한건, 첫번째 float 영역이 가장 왼쪽 영역을 차지하고 있기 때문에 line box 자체가 좌측은 사용이 불가능하게 줄어든다.
세번째 박스가 올때에도 가용 linebox가 줄어들어 두번째 div만큼 우측 linebox가 줄어들고 3번째 div가 오게된다.
height도 점점 div 의 높이에 맞춰서 줄어든다.

그렇다면, linebox 가 줄어들어 올 수 없는 상황인, 5번째는 어떻게될까?

가장 마지막 linebox 의 바닥면에서 가용 linebox 를 상성하여 새로운 linebox가 생성되고 5번째 div가 생성된다.
바닥면을 기준으로 float right 시의 우측 공간은 더이상 사용 불가능한 공간이다.

7번째 div. 활용가능한 linebox 중 가장 높은 바닥면은 2번 div이다. 7번 div는 float left이므로, 더이상의 left 영역은 존재하지 않는다. linebox로 활용이 불가능해지는 공간이 되었다.

마지막 ABC영역은 float 가 아니다.하지만 부모 div 중 유일한 normal flow 속성을 가진 div이므로, 첫번째로 오게된다.
+ float 는 inline 은 guard 하지만 bock 은 그렇지 않다. 따라서 위와 같이 구현된다. 

linebox로 밀린 inline 요소들은 그림은 그려지지만 geometry와는 상관이없이 진행된다.

---

Float 에 관한 특약사항 - OverFlow

 

아래 수많은 overflow들 중 overflow(css2.1 formatting model)이 hidden 이나 scroll을 가질 때만 float 와 관련이 있다.

• NEW BFC - 새로운 BFC를 만든다.
• First line box bound 

See the Pen bGGRxmm by YunJeong (@melangyun) on CodePen.

상단의 케이스에 비교하여, 새로운 BFC 를 생성하여 다시 계산하는데, 가장 우선적으로 활용 가능한 linebox에 들어가게된다. 실제로 div(block 요소)임에도 불구하고 실제 width 값이 줄어든다.

D의 경우, 원래대로라면 block 요소는 width 100%로 그려지고 inline 의경우 활용가능한 Linebox에 표기되야하지만, 활용 가능한 Linebox 중 높이가 맞는 곳이 존재하지 않고 - > 아예 표기되지않는다.
하지만 여전히 height는 차지하고 있음에 유의하자. 이후 E도 마찬가지이다.

F부터는 linebox 가 관여하지 않으므로, hidden영역이 존재하지 않는다.

---

overFlow - css2.1 visual formatting model

• visible ( = auto ; 보편적인 브라우저는 모두 visible 로 설정되어있다.)
• hidden
• scroll
• inherit
• Auto

overFlow-x, -y ; overflow module level3 draft

권고안까지 올라갔다가, 이후 새로 출시된 CSS spec 이 나오면서 모순점이 아직 정리되지 않아 다시 draft가 된 케이스.
현재 recommendation 이라고 계속해서 recommendation일 가능성이 적다.

• visible
• hidden
• scroll
• clip
• auto

text-overflow - css2.1 UI Module level3

• clip
• ellipsis

---