position
태그를 어떻게 위치시킬지를 정의하며, 아래의 5가지 값을 갖는다.
static: 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없다.
absolute: 절대 좌표와 함께 위치를 지정해 줄 수 있다. 부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 된다.
relative: 원래 있던 위치를 기준으로 좌표를 지정한다.
fixed: 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정한다.
inherit: 부모 태그의 속성값을 상속받는다.
relative 인 컨테이너 내부에 absolute인 객체가 있으면 절대 좌표를 계산할 때, relative 컨테이너를 기준점으로 잡게 된다. (없다면 전체 문서가 기준)
inline, inline block, block
block
div, p, h, li 등이 이에 해당된다.
기본적으로 가로영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된것처럼 보인다.
width, height 속성을 지정할 수 있으며, block 요소 뒤에 등장하는 태그가 그 이전 block 요소에 오른쪽에 배치될 수 있어도 항상 다음줄에 렌더링 된다.
inline
span, b, i, a 등이 이에 해당된다.
block과 달리 줄바꿈이 되지 않고, width와 height를 지정할 수 없다. inline 요소 뒤에 나오는 태그 또한 줄바꿈 되지 않고 바로 오른쪽에 표시된다.
inline-block
block과 inline의 중간 형태로 볼수 있는데, 줄바꿈이 되지 않지만 크기를 지정할 수 있다.
float
float
- float 속성에는 left, right, none 가운데 하나를 값으로 줄 수 있다.
- float 속성을 가진 요소는 부모가 높이를 인지할 수 없어서 부모를 벗어난다.
- none 이 아니라면 display 속성은 무시된다.
float을 해결하는 방법
-
float을 시킬 태그 바깥 마지막에 아무태그나 넣고 clear 속성을 적용하기.
이 기법을 사용할 때에는 HTML코드를 더 입력해야 하는 부담이 있다. -
float을 준 값의 부모 element에 overflow: hidden; 주기.
가장 많이 사용하는 방법
Clear
float 속성을 통해 태그를 부유시킨 이후 문서의 흐름을 제거하기 위해 쓰인다.방향에 따라 3가지 속성을 사용할 수 있다.
left: 좌측 부유 제거
right: 우측 부유 제거
both: 양쪽 모두 제거
