'relative'에 해당되는 글 1

  1. 2009.12.08 CSS Position 이야기 (9)
2009.12.08 19:54 | 개발이야기

오늘은 position에 대해 이야기를 해 볼까 합니다.
position 속성은 해당 박스의 위치 기준점을 결정하는 역할을 하는 녀석으로,
기본적으로 position 속성이 갖는 값은 static, relative, absolute, fixed 네가지가 있습니다.
일단, 테스트를 해볼 목적으로 박스를 몇 개 만들어 보고 기본적인 스타일을 적용 시켜 보도록 하겠습니다.

HTML

CSS


위와같이 작성을 하고 브라우저로 불러오면 아래와 같이 요소들이 딱딱 붙어있는 문서를 만날 수 있습니다.


아무 속성을 주지 않으면 기본적으로 position: static 과 동일한 상태를 유지합니다.
static인 상태에서는 위치를 지정해주는 top, left, bottom, right 의 오프셋이 적용되지 않습니다.

자, 그럼 이제 css를 몇군데 살짝 수정해서 relative는 어떤녀석인지 보도록 하겠습니다.


CSS를 위와같이 수정을 하면 다음과 같은 화면을 볼 수 있습니다.


우리가 수정한 요소를 보면 #1번 요소와 #3, #4번 요소의 CSS를 수정 했는데요,
수정을 했더니 위치가 조금씩 변경이 되어있음을 확인 할 수 있습니다.

relative 속성값은 기준점을 상대적(relative)으로 잡습니다.

쉽게 생각해서 해당 요소가 static으로 있을때의 위치를 기준으로 top에서 얼마만큼,
left에서 얼마만큼 움직인다고 생각하면 됩니다.

위의 static일때의 위치와 비교를 해서 보면 어떻게 움직인건지 한눈에 확인 할 수 있습니다 ^^;

다음은 absolute 값인데요, 일단 CSS를 아래와 같이 수정 해 보도록 하겠습니다.


위와 같이 수정을 하면 다음과 같이 화면이 변하는 것을 확인할 수 있습니다.


재미있게 변했는데요, inner요소 자체가 위로 올라가고, inner요소 안에 있던 #4번 요소가
inner 요소 안의 최상단에 위치하게 되고, #1, #2, #3, #5번 요소는 웹문서 영역의 원점(좌측 상단) 을 기준으로
우리가 지정해준 위치대로 위치하게 됩니다.

absolute 값은 말 그대로 '절대적' 인 좌표값을 지정해주는 값입니다.
이전의 static이나 relative와는 달리 자신이 위치했던 공간은 싹 사라지고
그 위에 레이어를 덧붙히듯 붕 뜨는 효과를 가져오게 됩니다.

말 그대로 '절대적' 인 좌표를 갖는다고 생각하시면 됩니다..^^

여기서 #3번 요소는 조금 더 설명이 필요한데요,
그쪽부분은 inner 요소가 static이라 오프셋을 가지지 않아서 위와같이 보이게 되는겁니다.

한번 inner요소가 오프셋을 줘 보도록 하겠습니다.


이렇게 오프셋을 주고나면 화면은 요렇게 변하게 됩니다.


즉, inner요소 밖에 있는 #1, #2, #5번 요소는 웹문서의 좌측상단을 원점으로 해서 보여지게 되고,
inner요소 안에 있는 #3번 요소의 경우 inner요소의 좌측 상단을 원점으로 해서 요소 안에 오프셋을 가지게 됩니다.

#3번 요소의 부모요소(inner)의 left와 top값을 그대로 반영 후, #3번 요소의 값을 반영했다고 보면 됩니다.

마지막으로 fixed가 남아있네요..^^;

fixed는 ie6에서는 구현이 되지 않습니다..^^ 위의 예제에서 #3번요소만 fixed로 바꿔보도록 하겠습니다.


이렇게 바꿔서 보면 inner요소 안에 있던 #3번 요소가 부모요소인 inner밖으로 삐져나오는것을 확인 할 수 있습니다.


이 fixed값은 기본적으로 화면의 좌측 상단을 원점으로 갖게 해주는데요,
재밌는점은 웹문서가 스크롤이 생겨 스크롤을 할 시, 해당 요소는 항상 같은 위치에 고정적으로 보여지게 됩니다.


이처럼 말이죠..^^

absolute와 fixed의 큰 차이점은 이렇게 화면에 고정적으로 보여진다는점,
즉 absolute는 부모요소의 오프셋을 받아와서 거기서 자신의 오프셋을 정하지만,
fixed는 해당 화면을 기준으로 오프셋을 결정한다는 점 입니다.

이러한 요소의 오프셋을 주는건 가끔 꼬이면 막막하게 느껴질때가 많습니다.
여러 요소들이 중첩되어있는 경우라면 더 심각하죠..^^;

이러한 네가지 값에 따라 어떤식으로 오프셋이 변하는지를 확실하게 알고 가면
조금 시간이 걸릴뿐, 요소들의 위치를 잡는데 큰 도움이 되지 않을까 합니다.

'개발이야기' 카테고리의 다른 글

CSS : Float 흐름끊기  (2) 2009.12.10
CSS : Float  (0) 2009.12.09
CSS Position 이야기  (9) 2009.12.08
CSS Sprite 를 이용한 간단한 롤오버 메뉴  (2) 2009.12.07
IE8 다음 지도 API Polyline문제  (9) 2009.11.24
다음 지도 API를 이용한 GPS정보 처리  (3) 2009.10.22
  1. Favicon of http://luvmaya.tistory.com BlogIcon M'ya (2009.12.08 22:55)
    오-
    하지만, 개인적으로 난 겹치는 스타일 안좋아해.
  2. haef (2010.01.31 01:10)
    잘봤습니다 ^^감사합니다~
  3. 생플 (2010.11.04 23:29)
    정말 이해하기 쉽게 작성을 하셨네요. 잘 보았고, 많은 도움이 되었습니다. 감사 합니다.
  4. Favicon of http://minsangk.com BlogIcon 민상k (2011.03.11 18:53)
    다른 사람이 짜놓은 CSS 섞인 코드를 가지고 씨름하고 있는데, 많은 도움이 되었습니다.

    ps: 제가 만든 물결 플래시도 반갑구요^^
    • Favicon of https://codebuzz.tistory.com BlogIcon Nasty (2011.03.17 13:13 신고)
      앗...^^ 민상k님께서 만드신 플래시였군요..ㅎㅎ
      많은 도움이 되셨다니 다행입니다
      앞으로 계속 쭉 관련글을 써야하는데
      요새 정신없이 바쁘다는 핑계만 대네요..ㅠㅠ
  5. lznuscr (2012.08.03 14:30)
    어라? 1,2,3,5 앱솔루트하고 4는 그냥 놔둿을때 왜 4랑 이너가 좌측상단 모서리로 올라가나요? 인터넷 브라우저 버젼이 달라서 그런가요?
    • Favicon of https://codebuzz.tistory.com BlogIcon Nasty (2012.08.23 15:25 신고)
      답글이 많이 늦었네요..^^;
      마크업 구조상 1,2,inner, 5가 같은 레벨이 있는 요소구요
      inner 안에 3,4 가 들어가 있는 구조인데요

      absolute 포지션을 주게되면
      해당 요소가 가지고 있는 고유의 공간이 사라지고
      지정된 위치로 옮겨가게 됩니다

      relative 포지션은 고유의 공간은 유지한 채
      본인이 있던 위치에서 지정된 위치로 옮겨가는거죠

      absolute 포지션을 주었을때
      해당 요소의 부모 요소가 relative나 absolute값을 가지지 않는다면
      자식 요소(포지셔닝을 할 요소)는
      relative 혹은 absolute를 갖는 상위요소를 찾게 되고
      기준점은 해당 상위요소의 좌측 상단이 됩니다
      만약 조건을 충족하는 상위요소가 없다면 결국엔
      화면의 좌측 상단이 기준점이 되지요

      예제에서 1,2,5번은 absolute로 주었을때, 상위 요소가 body 이기 때문에
      body의 좌측 상단, 즉 화면의 좌측 상단을 원점(0,0)으로 잡고
      top, left의 offset을 준 만큼 포지션을 잡게 됩니다
      여기서 absolute로 지정되면 해당 요소가 잡고있던 공간이 사라지기 때문에,
      2번다음 요소인 inner가 1,2번이 있던 공간으로 올라가게 되지요

      3번의 경우 absolute에 top 60px, left 40px를 주었는데요
      3번 부모요소인 inner가 relative혹은 absolute등을 갖고있지 않기때문에 좀더 상위의 요소를
      찾게 됩니다. 즉, inner의 상위요소는 body가 되기때문에
      다른 1,2,5번 요소와 마찬가지로 화면 좌상단을 원점으로 해서 위에서 60px 아래,
      왼쪽에서 40px 오른쪽에 위치하게 되는거지요..

      4번요소의 경우에는 inner와 마찬가지로 포지션값을 주지 않았기 때문에
      3번요소가 absolute로 되면서 3번 요소가 있던 공간이 해제가 되면서 3번이 있던 곳으로
      끌려 올라가는 현상이 생긴겁니다 ^^;

      inner에 relative를 준 예제와 함께 비교하면서 보시면 이해가 쉬울듯 합니다
  6. ㅁㅁ (2013.05.28 09:24)
    소스코드 보기가 불편하네요 ..