[코드스피츠/CSS] CSS 렌더링(Float)

전부 다 정리하기보다는 새롭게 알게 된 것들이나 기억하고 싶은 것들을 정리했다.

풀 강의는 유투브에서 확인하는 것이 좋다. 

 

 

float

---

• Line Box로 화면에 그려진다.
• 추가적으로 BFC(Block Formatting Contexts)박스를 만든다. 
• DOM 요소의 포함 관계랑은 상관없이, inline 요소의 가드로 작동한다. 이 때 다시말해 float 안에는 inline 요소가 들어가지 못한다.
• 반면, block 요소는 floatting되지만 실제 화면에서 부모 요소만큼의 width를 차지한다.

See the Pen float과 inline, block by 고주디 (@1two13) on CodePen.

 

이 예제를 보면 float 특징을 조금 더 확실하게 알 수 있다. inline과 block 엘리먼트 모두 floatting 되었으나 block 엘리먼트의 경우 부모 요소만큼의 width를 차지하고 있는 것을 알 수 있다. 

 

 

line box

---

float을 제대로 사용하려면 line box를 알아야 한다. line box를 계산할 때는 float 요소만을 고려하기 때문이다. 

 

처음에는 BFC 전체 영역으로 line box를 시작하지만 float를 만나는 순간 남은 영역이 line box가 된다.(가로, 세로 모두 고려된다.)

만약 남은 영역보다 사용해야할 영역이 큰 경우, 현재 line box의 가장 바닥면을 기준으로 새로운 line box의 영역을 그린다. 

영상이 4년전이라 그런지 조금 바뀐 부분이 있는 거 같다. 만약 남은 영역보다 사용해야할 영역이 큰 경우, 파기된 공간을 제외한 남은 공간에 새로운 line box 영역을 그린다. 사파리에서 코드를 실행시켜보면 쌤과 같은 출력 화면을 확인할 수 있지만, 크롬에서는 쌤과 다른 화면이 출력되어 알게되었다. 하지만 이에 대한 공식문서 내용은 찾지 못해서 일단 실험 결과를 적어둔 것이기 때문에 참고만 하는 것이 좋을 것 같다. 이거에 대한 답을 아시는 분들은 제발 댓글을 남겨주세요! 🆘

 

 

빈 공간은 right와 left 사이만 유효하다. 

float가 left인 경우 line box에서 가장 왼쪽에 있는 왼쪽 공간은 파기되고, float이 right인 경우에 가장 오른쪽에 있는 오른쪽 공간은 파기된다. 이 말은 ABC8의 위치를 보면 이해가 될 것이다.

See the Pen Untitled by 고주디 (@1two13) on CodePen.

728x90

영역 확인

기억해야 할 중요한 포인트는 line box 때문에 line 요소가 밀려서 가드 작동으로 늘어날 때는 영역이 늘어나지 않는다는 것이다. 

 

 

overflow

---

overflow 값이 hidden이나 scroll을 가질 때만 float과 연관이 있다. 왜냐하면 이 값을 가지는 요소로부터 새로운 BFC를 생성하는 규칙이 있기 때문이다. 단, 새로운 BFC를 생성할 때 line box의 바운더리를 인식하여 생성한다.  

 

위의 예제를 살짝 바꿔봤다. 여기서는 A가 전체 <div>라인, 즉 한 줄을 전부 차지하지 않고, 정말 딱 화면에 보이는 크기만큼을 가지고 있다.

See the Pen Untitled by 고주디 (@1two13) on CodePen.

A는 화면에 보여지는 크기만큼만 차지하고 있다.

overflow:hidden; 속성을 주고, 화면에 그릴 공간이 없을 때 BFC는 공간(height)을 차지하고 있지만 화면에 그려지지는 않는다. hidden박스가 사라져서 안보이는게 아니라 그릴 공간이 없어서 보이지 않는 것이다.

 

 

참고자료

---

• 코드스피츠

반응형

 

---

질문이나 잘못된 점은 댓글로 남겨주세요 :)💖