[TIL #3-1] position & block & float

1. position 속성

relative

부모 element가 기준 (block level element)

absolute

부모와 관계성이 끊기므로 크기는 자신의 컨텐트 크기(inline)

부모중 position타입이 지정된 부모가 기준이 된다

바로 위 부모에 지정되지 않았다면 postion타입이 나타날때까지 무시하고 올라간다(static 제외)

• offset입력 + 부모{relative} → 부모element가 기준
• offset입력 + 부모element가 없다면 → html최상단이 기준
• offset미입력 → 원래 기본값 자리에 위치

fixed
스크롤을 내려도 위치가 고정

fixed는 부모element의 영향을 받지 않는다!

2. inline-block vs block

block으로 변경시

display : block

inline으로 변경시

display : inline-block
float : left & right

display : inline보다는 inline-block 써라!
inline의 단점들을 커버하는 것이 inline-block

3. float

• float는 flex와 같이 레이아웃을 작성할 때 유용하게 사용되던 도구였지만, 근래들어 flex의 사용이 급증하였다.
• 하지만 실무를 접하는데 있어 기존 문서와 자료들이 float로 만들어져 있는 경우가 많으므로 알고 있어야 함은 필수!

float의 레이아웃시 TIP

nav와 article간 경계선이 겹친다면

margin-left혹은 right 한쪽 값을 -1px로 주어 경계선을 맞춘다

화면 크기에 따라 float가 깨진다면

전체태그에 width값을 고정

Clear : both

이전 float 단락을 따라 흘러내리지 않고 유지할 수 있다.