본문 바로가기
CSS

박스모델 div 의 position 특성

by 똑똑한 영장류 2015. 7. 2.

박스모델 position 특성



웹 페이지 작성할 때, table 로 구획정리하지않고 div 로 구현한 후, css를 이용해서 조정하는 방법을 사용한다.

근데, 위치 조정할 때마다 헷갈리고 그러네..ㅡ.ㅡ


요점만 간략히 정리해보면서 머리에 쏙 집어넣어야겠다.


소스작성은 대개...


html 에서는 아래처럼 작성하고,


<div class="box1">

hello

</div>


css 에서 아래처럼 작성한다.


.box1 {

  width: 100px;

  height: 200px;

  position: fixed; 

  top: 10px;

  left: 10px;

}


위 예에서 box1 에 position 속성으로 fixed 라는 것을 사용하고 위치를 top 10px, left 10px 라고 적었다.

의미는??

위치 정렬 기준이 fixed이고, 그걸 기준으로 할때 위에서, 왼쪽에서 각각 10px 떨어뜨려놔라~라는 의미다.

fixed는 머고? 그걸 기준으로 할 때는 멀 기준으로 한다는 거여??


흠...이제부터 알아보는거지...


박스모델에 사용할 수 있는 position 속성은 아래 4가지가 있단다.


1. static

2. relative

3. fixed

4. absolute


사용법은 위의 예처럼, 박스모델의 css 에 

position을 fixed, relative, absolute 중 하나로 지정하고 top, left, right, bottom 의 값을 설정해 준다.

이 값들은 원래~위치를 기준으로 위에서 얼마, 왼쪽에서 얼마..등등의 상대값의 의미를 가지게 된다.(응? 원래 위치???)


그럼, 원하는 목적에 따라서 relative를 사용하던지, fixed를 사용하던지, absolute를 사용하던지 해야하겠는데...

각각이 다르게 동작을 할거라는건 당연한거고..어떻게 다른지를 머리에 잘 집어넣어놔야겠는데...


static

이 중, static 이라는 녀석은 position 속성이 주어지지 않았을 때 적용되며, 브라우저는 지가 정해놓은 정렬 기준에 따라 박스모델을 위치시킨다.

아무런 속성을 주지않았을 때, 브라우저가 박스모델을 정렬했을 경우의 위치를 원래 위치라고 하자.


div같은 박스모델이 여러개가 있으면 크기에 따라서 한 줄(좌우방향으로)에 두개 세개씩 위치시키던지, 들어갈 자리가 모자라면 아래로 내리던지 브라우저가 알아서 한다. 이렇게 정리된 위치가 원래 위치다.


static 은 특별히 사용할 일은 없겠다. 안 적으면 static 이니까...


relative 

원래 위치를 기준으로 top, left 등 살짝 위치를 밀어준다.

하지만, 원래 위치에 있을 때의 공간을 그대로 차지하게 되며 다른 박스모델이 그 공간에 침범할 수 없다. 원래 있을 위치에서 이동을 했지만, 그 원래 위치가 차지한 공간에 다른 박스모델이 못 들어간다는거다. 다른 말로 normal flow에 영향을 미친다고 이야기한다. normal flow 라는 건 브라우저가 정렬할 때 고려하는 순서라고나 할까, 브라우저가 정렬을 할 때, 이 공간도 감안해서 정렬을 한다는 거다.


fixed

relative가 원래의 위치를 기준으로 상대값을 지정해줬다면, 이녀석은 기준값이 그냥 브라우저 화면이다.

브라우저 창을 기준으로 top, left등을 지정해준다.브라우저 창 크기가 바뀌어도 말 그대로 fixed 되어있겠다.

중요한 것은 fixed 속성을 가지게 되면 normal flow에서 제거된다. 브라우저가 정렬을 시도할 때, fixed 속성을 가진 박스모델은 제외시킨다. 이녀석이 원래 있던 공간에 다른 박스모델이 들어갈 수 있다. fixed는 그냥 핀으로 콕! 꽂아둔것같다.


absolute

이녀석은 무얼 기준으로 하는가? 이 박스모델을 감싸고 있는 부모 박스 모델의 위치를 기준으로 한다. 단! 이때 부모 박스모델은 static 이 아니어야한다. 만약, static이 아니면서 부모가 없으면 계속 찾아올라가다가 <html>을 만나 부모로 삼는다.

이녀석도 normal flow에서 제거된다.




정리해보면, 브라우저가 기본적으로 가지고 있는 정렬 기준 static이라는 것이 있다. 원래 위치~라는 것이고,


relative : 원래 위치 기준 살짝살짝 밀어주기 : 브라우저는 원래의 공간을 감안해서 다른 박스들을 정렬한다.

fixed : 브라우저 창 기준 살짝살짝 밀어주기 : 브라우저는 원래의 공간이 없는 듯 다른 박스들을 정렬한다.

absolute : static속성이 아닌 부모 위치 기준 살짝살짝 밀어주기 : 브라우저는 원래의 공간이 없는 듯 다른 박스들을 정렬한다.




이미지 캡쳐는 다음에...














'CSS' 카테고리의 다른 글

CSS margin, padding 한줄에 적을 때 순서  (3) 2013.01.09

댓글