오늘 한 일
- 강의 중 float 챕터 수강 완료
공부한 내용
float
Block 요소들을 가로 배치를 하기 위해 사용
What happens
1. 부모요소에 포함되지 않는 자식요소
.child red에 float값을 주게 되면 원래 있던 자리가 빈공간으로 인식되어서 형제 박스들이 자리를 채우기 위해 앞으로 이동한다.
→ 200x600 이었던 부모 박스의 width x height값이 200x400으로 변경됨
2. Block으로 변경되는 display 값
- float 값을 주게되면
inline, lnline block, block요소들이block으로 변한다.
3. float 설정을 주게 되면 block의 기능이 변함
- 따로 width를 선언하지 않은 경우, width = 부모의 contetn-box의 100%
→ float값을 주게되면 display 값이 block 으로 바뀌어도 자신의 컨텐츠 길이만큼만 차지한다.
- 따로 width를 선언한 경우, 남은 공간은 margin으로 자동으로 채움
→ float를 사용하면 자동으로 생기는 마진이 더 이상 생기지 않음 (마진을 줄 수 없다는 것이 아님XXX)
부모 height값이 0이 되면 레이아웃에 붕괴가 온다.
이렇게..
4. inline 요소는 float의 위치를 안다.
.child blue에 margin 값을 적용하면 p태그의 컨텐츠 요소들이 이동함
How to fix it
overflow: hidden;
부모 요소인 .parent가 자식 요소인 .child들의 크기를 인식함
Clearfix
오로지 float로 인해 망가진 레이아웃을 고치기 위해 만들어진 속성
- left
float: left;의 위치 파악 - right
float: right;의 위치 파악 - both
float: left;와float: right;의 위치 파악
가상 요소 (Pseudo-Element)
html에는 존재하지 않는 가상 요소를 적용하여 레이아웃을 만드는 방법
- 부모요소에 content, displat, clear를 줌
- display의 값이 block인 요소에만 사용 가능
- 반드시 content 속성을 적어야 함
::before 가장 첫번째에 임의의 가상 요소가 생김
::after 가장 마지막에 임의의 가상 요소가 생김
왜 최근 들어서 float를 안 쓰는지 알게 된 좋은 강의 내용이었다. flexbox를 위한 큰 그림...
