사실 이쪽은 아무도 안보고
나 혼자 미친X 마냥 떠드는 느낌인지라;; 좀 버려두고 있었는데
며칠 전 어떤분의 요청으로 간만에 포스팅 ㅋ


배치를 할때 플롯과 포지션이 있지만 대부분 앞에서 포스팅한 플롯(float)을 쓰고
포지션으로 배치하는 방법은 잘 쓰지 않는다.

하지만 이것도 가끔 쓸데가 있으니 알아두자.


포지션은 top, left, right, bottom 을 이용해서 위치를 지정하는데 사용법은 간단하다.

 


1. position:relative;

 

앞의 위치값을 기억하고 상대적인 위치를 지정한다.

 

아래는 100x100짜리 빨간 박스에 position:relative; 를 주고,

위에서 100픽셀, 왼쪽에서 100픽셀의 위치를 지정해 주었다.

이때, body에는 패딩20px을 주고

부모인 mother에 400x400짜리 두께가 5px인 검정테두리를 만들면 아래처럼 보여진다.

 

 

 

 

 

 

그럼 빨간박스는 body에 넣은 패딩값과 부모에 들어간 테두리5px에 영향을 받아
위쪽에서 125px, 왼쪽에서 125px인 지점에 위치한다.

물론 여기서 mother를 없애 버리면 body값 20px만 영향을 받는다.

이렇게 다른것들과 연관해서 상대적인 위치를 지정할 때 쓰이는게 position:relative; 이다

 

 

 

2. position:absolute;

 

그 자리에서 떠있기는 한데 플롯이랑 개념이 다르게
부모를 완전 무시하고 혼자만의 자유로운 자아를 가진다. 대기권밖으로 혼자 날라가 있는 느낌이랄까...

 

부모에 position:relative;를 사용하면 그 기준점을 찾는다.
아무런 기준점이 없으면 바디가 그 기준이 된다.
물론 기준점만 잡고 패딩이나 마진같은 그 외의 데이터의 영향은 전부 무시한다.

 

위에서 했던 빨간박스에 파란박스를 추가해서 position:absolute;를 주면
그 차이점을 확실히 알 수 있다.

 

 

 

 

 


그리고 아래는 부모에 position:relative;를 사용해서 기준점을 잡아주었을때의 변화

 

 

 

 


이건 보통 레이어로 띄우는 팝업같은데에 사용한다.

 

 

 

3. position:fixed;

 

아무 영향도 안받고 뷰(view)를 기준으로 항상 고정되어 있다.
메뉴, 로고, 따라다니는 장바구니, 플로팅광고 같은데 사용된다.

 

아래처럼 위에서 100px떨어진곳에 우측으로 붙여 녹색박스를 위치시켰을 때
브라우져의 창을 늘이거나 줄여도 항상 그 위치에 고정되어있다.

 

 

 


현재 블로그 오른쪽의 따라다니는 경고문이 바로 이 position:fixed;를 사용한 것이다.

 

 

포지션은 플롯보다 매우 쉽고 간편한 방법이긴 하지만

팝업같이 꼭 필요한데에만 사용하고 배치할때 가급적이면 사용하지 않는게 좋다.^^

 

 

 

 

 
 
 
 

 

Posted by 두여자 Y&S

댓글을 달아 주세요

  1. 노땅프로그래머

    제가 찾아다니던 css관련 자료중 최고네요.
    이미지와 같이하여 이해도 빨랐습니다.
    이번에 psd파일 몇개로 사이트를 만들라는 오더를 받아서 작업하였는데 db와 개발시간 보다는 css와의 전쟁으로 보낸시간이 작업시간 3/4 을 차지하였으니...쩝!
    진작에 방문했다면 수월한 잡업이 되었을텐데 라는 아쉬움이 남네요.
    그래도 작업하면서 막혔던 부분이 다 풀렸네요.
    다시한번 감사하다는 말씀 드리면서 앞으로도 좋은 포스팅 부탁드립니다.
    종종 찾아뵙겠습니다.
    행복한 인생 되시길~~

    2013.07.31 20:52 [ ADDR : EDIT/ DEL : REPLY ]
    • 네 사이트 제작하면서 프로그래머와 웹디자이너가 html과 css를 정확히 인지하지 않고 있기 때문에 소통면에서 문제가 많이 생긴다고 하더라구요.
      요번에 좋은 경험이 많이 되셨겠네요^^
      님도 행복한 하루되세요~

      2013.08.01 10:04 신고 [ ADDR : EDIT/ DEL ]
  2. 요코문

    진짜 설명 쉽네요!!!
    공중에 떠다니는 .... 최고!

    2013.08.20 10:57 [ ADDR : EDIT/ DEL : REPLY ]
  3. 호랑이기운

    웹디자인으로 전향에서.뭐 이것저것 배우고 있는데..코딩까지할려니 머리가 아프더라구요
    기초도 없고. 책만봐서는 답도 없고 , 코딩하면서 매번 인터넷자료를 디지면서 겨우겨우 만들고 그랬는데
    제가 의문을 가졌던 것들을 하나둘 여기서 배우고 나니 조금 수월해집니다.
    좋은 자료 많이 올려주세요!!! ^______________^

    2013.09.05 10:39 [ ADDR : EDIT/ DEL : REPLY ]
    • 네 저도 웹디자인 전향하고서 코딩이 가장 싫더라구여...
      이렇게 저렇게 찾아가면서 하나하나 만드시다보면 금방 느실것 같네요.
      역시 뭐니뭐니해도 경험이 최고니까여~^^

      2013.09.06 08:30 신고 [ ADDR : EDIT/ DEL ]
  4. 감사합니다.

    독학으로 표준화 코딩을 공부하다가
    좋은 공부하고 있습니다.

    2014.04.29 16:10 [ ADDR : EDIT/ DEL : REPLY ]
  5. hahahaha

    많이 배우고갑니당^^

    2016.02.18 11:53 [ ADDR : EDIT/ DEL : REPLY ]