CSS Rendering - Float (코드 스피츠 76회차를 보고 정리)

목차

이전 게시물에서는 CSS의 역사, Normal flow(IFC, BFC, Relative Position) 등을 정리했습니다.

현재에는 flex, grid와 같이 레이아웃을 잡을 때 편리한 CSS모듈이 있습니다. 하지만 이전에는 float를 이용해서 레이아웃을 잡았습니다(고전 레이아웃) 

IE의 서비스 종료가 된 시점에 이것을 배워야 하는 이유는 제 개인적인 생각으로는 두가지가 있습니다.

1. 이전의 레이아웃 방식을 배움으로써 현재의 문법에 대한 이해가 더 깊게 될 수 있다. 

2. IE가 사라졌다곤 하지만, 내가 나중에 이직할 회사에 가면 float가 존재할 수 있다. 그걸 유지보수하려면 알아야 할 것 같다.

라는 생각으로 공부를 했습니다.

 

FLOAT

float를 처음 배울 때는 화면에 둥둥 떠 있는 요소라고 배우고, 이전에는 이것으로 레이아웃을 짰다라는 말만 들었습니다. 이번처럼 자세하게 공부한 것은 처음이네요.(코드 스피츠 짱짱 감사합니다. )

 

특징

- float가 등장한 순간 새로운 BFC영역이 그려지게 됩니다.

- float는 Line Box 공식으로 그려지게 됩니다.

- float는 inline요소의 가드로 작동해서 가드 바깥쪽으로 inline요소가 그려지게 됩니다. 

- block요소는 가드가 이루어져있지 않아서 다 그려집니다.(DOM 구조와 관계 없이 블록 요소 안에 있는 인라인 요소는 가드가 작동합니다.)

Line Box

- 라인박스는 오직 float요소만 신경을 씁니다.

- 라인박스는 가로만 보는 것이 아니라 세로도 보게 됩니다.

- 그릴 영역이 부족하게 되면 현재 라인박스의 가장 바닥면을 기준으로 빈 공간이 라인박스의 영역이 됩니다.

- 라인박스 때문에 inline가드가 작동할 때는 인라인이 부모의 요소를 벗어나더라도 부모의 크기는 커지지 않습니다.(원래는 콘텐츠가 길어지면 height가 커집니다.)

 

FLOAT 특약사항

overflow는 CSS2.1 visual formatting model에 정의되어 있습니다.

Overflow

속성값으로는 visible | hidden | scroll | inherit | auto가 있습니다.

대부분 기본값은 auto(내부에 있는 크기가 커지면 부모도 같이 커진다) 입니다.

-> W3C에 들어가서 확인해보니 default value => visible로 변경된 것 같습니다.

 

visible -> 보일 때 까지 커집니다. visible과 auto는 같은 동작을 합니다.

 

scroll -> 내 geometric을 넘어가면 스크롤을 만듭니다.

hidden -> 내 geometric을 넘어가면 요소를 안보이게 합니다.

 

overflow-x, overflow-y

overflow module level3 draft 단계 

 

왜 드래프트 단계일까?

-> 그 전까지 transform, border-radius 계산이 없었는데 새로운 스펙이 나오면서 기존에 있던 것이 권고안 -> draft로 바뀐 대표적인 예시입니다. (CSS Module은 현재 Recommend라고 해서 계속 Recommend가 아니라고 하셨습니다.)

 

float에서 왜 갑자기 overflow가 나오는 지 궁금했는데 이유가 다 있었습니다.

float에는 특약사항이 있습니다.

 

overflow가 hidden, scroll일 때만 새로운 BFC를 즉시 생성합니다.

그런데 여기서 주의해야할 점은 LineBox의 bound를 인식한다는 사양도 들어있다는 것입니다.

 

 

감사합니다~