position 속성
fixed = 스크롤과 상관 없이 정해진 좌표에 위치 고정
absolute = 절대 좌표에 위치 지정
relative = 원래 있던 좌표 기준으로 위치 지정
*absolute와 fixed를 이용해 위치를 지정했을 때는 block의 특성(width="100%")이 사라진다.
*relative에 포함된 absulte는 relative의 위치를 기준으로 위치 지정.
inline, inline-block, block
inline = 줄 바꿈 없이 한줄에 쭉 이어지는 요소들 (span, a,...)
*inline 요소들은 width height 값을 줘도 무시된다. margin과 padding 값도 좌우 값만 반영된다.
inline-block = 한 줄에 쭉 이어지는 요소들이지만 inline 요소들과는 다르게 width height 값 및 margin padding 상하 값도 지정 가능하다.
block = 요소가 한 줄에 쭉 이어지지 않고 하나의 요소가 하나의 줄을 차지한다. ex)p, h1, ,..
*width height margin padding 값 모두 지정 가능
float
= 컨테이너의 옆에 inline요소들이 감쌀 수 있게 요소를 배치하는 것
float: left;
float: right;
float: none; (기본값)
float: inline-start; (컨테이너의 시작부분에 설정)
float: inline-end; (컨테이너의 끝부분 설정)
float: inherit;(부모로부터 상속)
float: initial;(기본값으로 설정)