레이아웃의 모든 것

position

CSS를 공부하기 전 나에게 포지션이란... i love you...

position은 태그의 위치를 결정하는 CSS이다.
기본적으로 static 상태이고 relative,absolute,fixed로 상태를 변경할 수 있다.

먼저 relative 부터 살펴보자.

relative

relative는 top,right,left,bottom 속성을 사용해 위치조절이 가능하다.
relative는 각각의 방향을 기준으로 태그 안쪽방향으로 이동한다. 바깥쪽으로 이동하고 싶으면 음수를 주면 된다.

absolute

absolute는 static속성을 가지고 있지 않는 부모를 기준으로 움직이는 포지션이다. 부모요소의 상태가 relative, fixed,absolute인 태그가 없다면 body를 기준으로 움직인다.

fixed

fixed는 특정위치에 고정하는 포지션이다.
스크롤을 내려도 그 자리에 고정되어있다.

block,inline,inline-block

HTML에서의 공간은 block,inline,inline-block 세가지 종류가 있다.

block

block은 한줄을 통째로 차지한다.
inline 태그는 내용물의 길이만큼 공간을 차지한다.
높이와 너비, 상하 padding,margin을 줄 수 없다.

inline-block태그도 내용물의 길이만큼 공간을 차지하고
저마다의 높이와 너비를 가질 수 있다.

float

떠있다는 의미를 가진 정렬 방법 중의 하나이다.
요소를 띄우는 속성을 가지고 있는데 띄워진 상태에서는
부모요소가 float을 인식하지 못한다.
때문에 부모요소의 높이값을 조절하거나 float을 해제시킬 임의의 요소를 삽입해야 하는데 그것이 clear속성이다.

clear속성은 float을 해제하고 새롭게 줄 바꿈을 시작해준다.

또하나의 방법으로는 overflow:hidden을 부모요소에 넣어주는 것이다.
이 방법은 부모요소가 float되어있는 요소를 인식하게 만들어준다.