코드 스피츠 - CSS Rendering 1회차 2/2

https://youtu.be/ybNH1a14vQY 를 보고 정리한 내용

Float

• New BFC

• Float over Normal Flow

• Text, Inline guard

• Line Box

LINE BOX 로 나타낸다.

여기서 잠깐 이전시간 복습 Normal Flow가 그려지는 방법: IFC, BFC, Relative

<div style="width:500px">
  <div style="width:50px;background:red"></div>
  <div class="box2" style="width:200px;height:150px;float:left;background:rgba(0,255,0,0.5)"></div>
  <div style="height:50px;background:skyblue"></div>
</div>

투명도를 0.5준 .box2까지가 BFC로 생성된다.

skyblue도 BFC로 그려지지만 .box2 위로 떠있다.

이 현상을 Normal Flow + Float 으로 설명할 수 있다.

BFC영역은 어디까지일까 Float 영역 전체 + 인라인 영역 전체하는 공간 끝까지이다.

Inline Guard

<div style="width:500px">
  <div style="width:50px;background:red"></div>
  <div class="box2" style="width:200px;height:150px;float:left;background:rgba(0,255,0,0.5)"></div>
  HELLO
  <div style="height:50px;background:skyblue">WORLD</div>
</div>

Inline Guard로 작동되기 때문에 inline요소들은 Box2와 겹치지 않고 옆에 붙는다. (혹은 가로값의 합이 부모값보다 크다면 밑으로.. )

Line Box

<div style="width:500px">
    <div class="left" style="width:200px;height:150px"></div>
  <div class="right" style="width:50px;height:150px"></div>
  <div class="right" style="width:50px;height:100px"></div>
  <div class="left" style="width:150px;height:50px">4</div>
  <div class="right" style="width:150px;height:70px">5</div>
  <div class="left" style="width:150px;height:50px">6</div>
  <div class="left" style="width:150px;height:50px">7</div>
  <div style="height:30px;background:red">ABC</div>
</div>

Line Box는 무조건 Float만 신경쓴다. 가로세로 다 본다..

Overflow

css2.1 visual formatting model

visible | hidden | scroll | inherit | auto

• auto - 기본값, 내부의 영역의 크기가 커지면 부모도 커진다.

• visible == auto 일치

• scroll 내 geometry영역을 넘어가면 scroll을 만든다.

• gemetry hidden 안보이게 짤라줘

Overflow-x, y

overflow module level3 draft

visible | hidden | scroll | clip | auto

Text-overflow

css2.1 UI Module level3

clip | ellipsis

Overflow - hidden, scroll

은 float와 관련이 있다.

<div style="width:500px">
    <div class="left" style="width:200px;height:150px"></div>
  <div class="right" style="width:50px;height:150px"></div>
  <div class="right" style="width:50px;height:100px"></div>
  <div class="left" style="width:150px;height:50px">4</div>
  <div class="right" style="width:150px;height:70px">5</div>
  <div class="left" style="width:150px;height:50px">6</div>
  <div class="left" style="width:150px;height:50px">7</div>
  <div style="height:30px;background:red">ABC</div>
  <div class="hidden" style="height:30px;background:red;">A</div>
  <div class="hidden" style="height:15px;background:orange">B</div>
  <div style="height:30px;background:black"></div>
  <div class="hidden" style="height:30px;background:red">C</div>
  <div class="hidden" style="height:30px;background:orange">D</div>
  <div style="height:30px;background:black"></div>
  <div class="hidden" style="backgroud:red">E</div>
  <div style="height:30px;background:black"></div>
  <div class="hidden" style="height:30px;background:orange">F</div>
  <div style="height:30px;background:black"></div>
</div>

• New BFC - 새로운 BFC를 만든다.

• First Line Box Bound

overflow auto라도 inline으로 박스가 늘어나지만 line으로는 박스가 늘어나지 않는다.