position 속성
레이아웃을 배치하거나, 객체를 위치시킬때 사용하는 css 속성이다.
- static (기본값) :위치를 지정하지 않을 때 사용한다.
- relative : 위치를 계산할때 static의 원래 위치부터 계산한다.
- absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다.
- fixed : 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있다.브라우저 화면의 상대 위치를 기준으로 위치가 결정된다.
inline, inline-block, block
html의 태그들은 크게 block 요소와 inline 요소로 나눌 수 있다.
🏁 inline 요소
- display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다.
🏁 block 요소
- display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지한다.
- block 엘리먼트는 inline 엘리먼트와 달리 width, height, margin, padding 속성이 모두 반영이 된다.
🏁 inline-block 요소
- display 속성이 inline-block으로 지정된 엘리먼트는 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. 하지만 inline 엘리먼트에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능해진다.
