position 속성
- static - default값
- relative - 자기 자신의 위치를 기준으로 위치를 이동
- absolute - static이 아닌 부모 요소 또는 가장 가까이 있는 조상 요소를 기준으로 이동
(부모 --> 조상 --> 전부 static이면 body 기준) - fixed - top, right, bottom, and left 값만큼 고정됨 (스크롤과 상관없이)
inline, inline-block, block
-
inline? 다른 요소와 함께 한 행에 위치
margin-top, margin-bottom이 적용되지 않고, line-height 속성에 의해 상하 여백이 발생한다.
너비(width)와 높이(height) 속성이 적용되지 않는다.
인라인 요소의 너비와 높이는 태그가 품고 있는 내부 요소의 부피에 맞춰진다. -
inline-block? 너비와 높이 설정이 가능한 inline
-
block? 요소 하나가 한 줄 전체를 차지함
기본적으로 너비 100%(width:100%)를 가진다.
ex. header, footer, p, li, table, div, h1, div
float
이미지 주변을 텍스트로 감싸기 위한 프로퍼티 (block 요소의 성질이 없어짐)
float 속성에 left, right, none 가운데 하나를 값으로 한다.
float 속성을 가진 요소는 부모가 높이를 인지할 수 없어서 부모를 벗어난다.
-> div를 부모로 두고 clear 속성 / overflow:hidden / 바깥 div도 float시킴
