<CSS> 레이아웃 (3) - 포지셔닝

- 포지셔닝이란?

앞서 배운 CSS 레이아웃의 기본 토대가 되는 박스 모델을 바탕으로, 웹 문서의 화면을 각 위치에 맞게 구성하는 것을 말한다. 박스 모델을 원하는 위치로 움직여 포지셔닝할 수 있는 속성들은 아래와 같다.

 

 

1) box- sizing박스 너비의 기준을 정한다. 기본적으로 width 속성은 박스 모델 요소 중 콘텐츠 영역에 해당하는 가로 길이를 나타낸다. 따라서 박스 너비를 지칭할 때, 가로 길이를 콘텐츠 영역까지만 지정한다면 box-sizing에 content-box(기본값)를, 테두리 영역까지 포함한다면(padding 영역을 포함) border-box를 넣어 설정할 수 있다. - box-sizing: content-box / box-sizing: border-box

/* 테두리까지 박스인 경우 */
box-sizing: border-box;
width: 300px; /* 박스 모델 전체 너비 */
padding: 30px;
border : 2px solid red;

/* padding과 border 좌우값을 각각 뺀 콘텐츠 영역의 너비는 236px이 된다. */

 

 

2) float

박스 모델을 왼쪽이나 오른쪽 구석에 배치한다. 따라서 float의 값으로 쓸 수 있는 것은 left, right 그리고 아무쪽도 아닌 none이다. float는 한 번 사용하면 다음에 오는 요소도 똑같이 적용이 되기 때문에 이를 해제할 수 있는 속성이 필요하다. 그럴 때 쓰는 것은 clear 속성이다.

/* float 속성 */
float: left;
clear: left; /* float 왼쪽 해제 */
float: right;
clear: right: /* float 오른쪽 해제 */

/* 무조건 기본 상태로 되돌리기 */
clear: both;

 

 

3) position

웹 문서 안의 요소들을 자유자재로 배치할 수 있다. 속성 값으로는 다음과 같은 것들이 있다.

- static : 문서의 흐름에 맞추어 배치

- relative : 이전 요소에 자연스럽게 연결해 배치, 위치 지정 가능

- absolute : 원하는 위치에 배치

- fixed : 지정한 위치에 고정하여 배치

static을 제외한 나머지는 top, bottom, left, right 속성을 이용해 좌표를 설정할 수 있다. 각각 위에서 얼마나 떨어져 있는지, 아래에서 얼마나 떨어져 있는지, 왼쪽, 오른쪽에서 얼마나 떨어져 있는지를 나타낸다. 양수와 음수 모두 사용가능하다.

 

주의할 점은 박스를 움직일 때에 기준이 되는 위치다. relative의 경우, relative가 없었다면 원래 있었어야 할 위치를 기준으로 배치가 된다. absolute의 경우, position 속성이 relative인 요소인 부모 요소나 조상 요소의 위치를 기준으로 배치가 된다. 따라서 absolute 속성은 absolute 속성의 박스를 감싸는 <div>를 만들고 position을 relative로 지정한 후 사용한다. fixed는 브라우저 창을 기준으로 배치가 된다.

 

 

4) visibility

특정 요소를 화면에 보이게 하거나 보이지 않게, 혹은 겹치도록 설정한다. 속성으로는 다음과 같은 것들이 있다.

- visible : 화면에 요소를 표시하는 기본값이다.

- hidden : 화면에서 요소를 감추지만, 요소가 차지하는 영역은 그대로 남는다.

- collapse : 표 내에서 지정하면 각 속성들을 겹치도록 설정할 수 있다.

 

 

5) z-index

요소를 쌓는 순서를 정한다. 숫자가 작을수록 가장 아래, 맨 뒤로 가게 된다. 무조건 맨 앞에 표시해야 한다면 값을 z-index: 999;나 z-index: 1000;처럼 매우 큰 값을 사용하면 된다.

 

 

 

 

 

참고 : 도서 <Do it! HTML5+CSS3 웹 표준의 정석>