박스모델 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 |
|---|
댓글