position
position프로퍼티의 값은 'static, absolute, relative, fixed'
position 설정 후에 left, right, top, bottom 값으로 위치를 지정한다.
- position : relative; (상대적, 원래 위치를 기준)
- position : absolute; (절대적, 부모위치를 기준)
- position : fixed; (화면에서 고정)
relative
position의 값으로 relative를 지정하면 left, top, right, bottom의 위치값들은 relative가 지정된 태그 그 자신의 위치 에서 위치값만큼 이동한다.
태그를 감싸고있는 부모 태그에게 relative를 지정하면 부모태그를 기준으로 자식태그의 위치값을 지정할 수 있다.
absolute
position의 값으로 absolute를 지정하면 자식태그가 이 블록을 인지하지 못한 채 주어진 절대값을 기준으로 배치된다.
absolute로 지정된 자식태그에게 가장 가까운 부모태그(static을 제외한)를 기준으로 위치값을 지정할 수 있다.
fixed
position의 값으로 fixed를 지정하면 그 태그의 위치는 항상 화면을 기준으로 배치된다.
display
inline
- inline 특성을 가지는 엘리먼트는 새로운 라인에서 시작하지 않으며 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치한다.
- content의 너비만큼만 가로폭을 차지한다.
- inline레벨 요소 내에 block레벨 요소를 포함할 수 없다.
block
- block 특성을 가지는 엘리먼트는 새로운 라인에서 시작해 좌우로 최대한 늘어난다.
- 너비와 높이를 유동적으로 지정 가능하다.
- block레벨 요소 내에 inline레벨 요소를 포함할 수 있다.
inline-block
- inline-block 특성을 가지는 엘리먼트는 block과 inline 레벨 요소의 특징을 모두 갖는다. inline 레벨 요소와 같이 한 줄에 표현되면서 block처럼 너비와 높이를 유동적으로 지정 가능하다.
- inline레벨 요소처럼 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치시킬 수 있다.
float
float 프로퍼티는 본래 이미지와 텍스트가 있을 때, 이미지 주위를 텍스트로 감싸기 위해 만들어진 것이었지만 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용된다.
- float: left; (요소를 왼쪽 정렬)
- float: right; (요소를 오른쪽 정렬. 출력 순서가 역순이 된다.)
- float: none; (정렬하지 않음)
float이 적용된 태그를 뒤따라 오는 태그들이 지정한 방향으로 달려든다.
달려드는 속성을 해지(clear)해줘야만 뒤의 요소들을 다시 배치할수 있다. (자식요소 모두 플롯이 적용되면, 부모요소의 높이가 잡히지 않는다)
float 해지(clear)하는 방법
-
부모 태그에 float 프로퍼티를 선언한다.
이 경우 부모 태그의 너비는 float된 자식태그의 콘텐츠를 표현할 수 있는 만큼만으로 작게 줄어들게 된다. -
부모 태그에 overflow: hidden; 프로퍼티를 적용한다.
이 경우 콘텐츠가 넘칠경우 잘리는 문제가 있다. 가장 많이 사용하는 방법이다. -
부모 태그에 가상요소 :after를 생성 해 주고, clear를 적용한다.
이 경우 불필요한 markup을 줄일 수 있으나 빈 가상요소를 사용해야한다.
/* 가상요소 :after 사용방법 */
.container:after {
display: block;
clear: both;
content: '';
}
.container {
zoom: 1; /* IE 6,7 */
}
