css 포지셔닝과 주요속성들

1) CSS 포지셔닝이란

 

css포지셔닝은 브라우저 화면 안에 각 컨텐츠 영역을 어떻게 배치할지를 결정하는 것을 말하며 관련 속성으로는 

 

float와 position 속성이 있다.

 

 

 

2) box-sizing 속성

 

box-sizing 속성은 박스 너비 기준 정하는 속성이다.

 

즉, width 속성값을 컨텐츠 영역너비값으로 사용할지, 패딩과 테두리까지 포함시킬지 결정할 수 있다.

 

기본형은 아래와 같다.

 

box-sizing: content-box | border-box

 

속성값	설명
content-box	width속성 값을 컨텐츠 영역 너비 값으로 사용
border-box	width속성 값을 컨텐츠 영역에 테두리까지 포함시켜 사용

 

3) float 속성

 

float속성은 왼쪽이나 오른쪽으로 배치시키는 속성이다.

 

기본형은 아래와 같다.

 

float : left | right | none

 

속성값	설명
left	해당 요소를 문서의 왼쪽으로 배치
right	해당 요소를 문서의 오른쪽으로 배치
none	좌우 어느 쪽으로도 배치시키지 않는다

아래 예제 소스와 결과를 보여준다.

div태그는 블록레벨요소로서 기본적으로 한 줄에 하나씩만 표현되지만 float속성을 주게 되면 한 줄에 여러개 표현이 가능하게 된다. 

위의 예제는 3개 div중에서 2개 div는 float속성에 left를 마지막 하나는 right 값을 지정했을 때 결과를 보여준다.

 

아래 예제는 3개 div중에서 1개는 float:left, 1개는 float:none, 나머지 하나는 float:right 값 지정했을 때 소스와 결과를 보여준다.

결과에서 볼 수 있듯이 float:none 결과값은 해당 div태그를 해당 줄의 끝까지 가도록 설정된다. 그 다음 div는 float:right 지정하였으며 결과는 새로운 줄에서 오른쪽에 위치하게 된다.

 

4) position 속성

position 속성은 웹문서 안에 요소들을 자유자재로 배치할 수 있게 하는 속성이다.

기본형은 아래와 같다

position : static | relative | absolute | fixed

속성값	설명
static	요소를 문서의 흐름에 맞추어 배치한다
relative	이전 요소에 자연스럽게 연결해 배치하되 위치를 지정할 수 있다
absolute	원하는 위치를 지정해 배치한다.
fixed	지정한 위치에 고정해 배치한다

* static

position 속성의 기본값이며 요소를 나열한 순서대로 배치한다. 특정위치를 지정하는 속성들(top, left 등) 은 사용할 수 없다. 단, float 속성은 함께 사용할 수 있다.

 

* relative

요소를 나열한 순서대로 배치할 수 있으며 특정위치를 지정하는 속성들(top, left 등)을 함께 사용할 수 있다.

위치를 지정하는 속성을 사용할 때 좌표 계산은 static으로 설정시 배치되어야 할 위치를 기준으로 하여 이동하게 된다.

relative 관련 예제로 소스와 결과를 올린다

 

아래 예제는 relative 사용하지 않은 경우를 먼저 보여준다.

소스에서 id1과 id2의 width를 각각 30%, 70%로 주었고 float:left, float:right로 각각 설정했다

width를 30%, 70% 설정했다는 의미는 브라우저 폭 기준으로 30%, 70% 크기를 계산해서 width로 셋팅했다는 의미이다.따라서 결과적으로 "박스1" 블록이 브라우저 전체폭의 30%를 차지하고 바로 옆에 이어서 "박스2"블록이 70%폭을 차지하면서 배치된다.

 

이 상태에서 박스2의 left 시작 위치를 박스1에서부터 10px을 띄우고 싶은 경우

position : relative로 설정한 후 left : 10px; 로 지정할 수 있다. 이렇게 하면 박스2의 원래 위치 기준으로 10px 이동하여 배치된다.

 

아래는 해당 소스와 결과이다.

* absolute 

해당 속성을 사용하면 left, right, top, bottom 속성값을 이용해 요소를 원하는 위치에 배치할 수 있다.

이때 기준이 되는 위치는 가장 가까운 부모 요소 중 position속성이 relative 또는 absolute인 요소이다.

그래서 보통 absolute 사용하려면 해당 요소를 감싸는 div를 만들고 position : relative 또는 absolute로 지정한 후 사용한다.

아래는 예제로 소스와 결과를 보여준다.

 

위 예제에서 아이디 RB, LT 요소들은 부모 요소인 child_container 위치를 기준으로 배치된다.

또한 child_container 요소는 부모요소인 container 위치를 기준으로 배치된다.

만일, child_container의 position이 static이라면 RB, LT 요소들은 relative나 absolute 속성값을 가지고 있는 가장 가까운 부모 요소인 container 요소의 위치를 기준으로 배치된다.

 

* fixed 속성값

fixed 속성값은 문서의 흐름과 상관없이 위치를 좌표로 결정하지만 좌표는 브라우저 창 기준이 된다.

따라서 브라우저 창이 스크롤 되더라도 그대로 위치를 유지한다.