티스토리 뷰

css의 position 속성 배우기



홈페이지를 만들기 전에 우선은 css속성 중에 하나인 position에 대해서 알아야 합니다. 반응형 웹을 만들기 전에 우선 position 속성을 배워봅시다.


position 속성은 사용되는 엘리먼트들의 위치를 지정할 때 사용하는 속성입니다. 각 엘리먼트들은 위치를 옮길 수 있습니다. left, right, top, bottom이라는 속성들로 말이죠. 이렇게 위치를 옮기는 것을 오프셋을 조정한다고 합니다.


left, right, top, bottom 등 오프셋을 조정할 수 있는 속성에는 길이 단위(px, em 등)와 %(퍼센트)를 줄 수 있습니다.


그저 오프셋을 지정한다고 엘리먼트들이 움직이는 것은 아닙니다. 포지션 속성을 설정해줘야 지정한 오프셋에 따라 엘리먼트들이 움직입니다.


position: static | relative | absolute | fixed | sticky;


포지션 속성에는 위와 같이 5개의 값이 올 수 있습니다. 비교를 해보면서 하나씩 알아봅시다. 소스코드를 봐주세요.


<head>
    <title>포지션 속성 연습</title>
    <style>
      div{
        padding: 10px;
      }
      #first{
        border: 3px solid black;
        position: relative;
        margin: 20px 0;
        height: 150px;
      }
      #second{
        border: 3px solid limegreen;
      }
      #third{
        background-color: orangered;
        top: 30px;
        left: 30px;
      }
   </style>
 </head>
 <body>
   <div id="first">첫번째 태그
     <div id="second">
       두번째 태그
       <div id="third">세번째 태그</div>
     </div>
   </div>
 </body>


포지션 속성 연습html태그 안에 소스코드를 넣으면 위와 같은 상자들이 나타납니다.


첫번째 태그와 두번째 태그 그리고 두번째 태그와 세번째 태그는 각각 부모와 자식 관계에 있습니다. 구분을 위해서 각각의 <div>태그에 경계선과 패딩값을 주었습니다. 그리고 #third에 top과 left 값을 30px씩 주었습니다만 패딩값만 적용될 뿐 세번째 태그는 움직이지 않습니다. 이것은 position의 기본값이 static이기 때문입니다. 


기억하세요. position 값이 static이면 오프셋을 지정해도 엘리먼트는 움직이지 않습니다.


position값이 static이 아니라면 지정한 값에 따라 이동합니다. #third의 position 값을 relative로 설정해주세요.

주황색 상자는 어떻게 이동하나요?


relative 적용position 값을 relative로 적용했습니다.


주황색 상자는 두번째 태그 상자를 기준으로 30px씩 이동했습니다. 그리고 또 유심히 보셔야 할 것은 위치를 옮기긴 했지만 아직 두번째 태그 상자와 세번째 태그 상자는 relative(관계가 있는)한 상태라는 겁니다. 두번째 태그 상자는 아직 세번째 태그 상자가 원래 있던 공간을 그대로 가지고 있고, 세번째 태그 상자도 원래 가지고 있던 길이 만큼 유지하고 있습니다. 그럼 position 값을 absolute로 변경해 볼까요?


absolute 적용position 값을 absolute로 적용했습니다.


그림을 보면 세번째 태그 상자가 두번째 태그라는 글자를 가려버렸습니다. 다른 변화들을 또 말해볼까요? 세번째 태그 상자의 길이는 자신의 컨텐츠의 크기만큼의 크기를 가지게 되었고, 두번째 태그 상자의 크기도 줄어들었습니다. 이처럼 absolute로 포지션 값을 지정하면 부모태그와의 관계가 끊기게 됩니다. 그리고 이번에 오프셋은 두번째 태그 상자를 기준으로 움직인게 아니라 첫번째 태그 상자를 기준으로 움직였습니다. 왜 그럴까요?


position이 absolute로 지정되었을 땐 자신을 감싸고 있는 부모엘리먼트들 중에서 포지션 값이 static이 아닌 엘리먼트를 찾고, 그 엘리먼트를 기준으로 이동합니다.  


소스코드를 보시면 첫번째 태그 상자에 position값을 relative로 주었습니다. 그래서 position 값이 absolute인 세번째 태그상자는 position값이 static인 두번째 태그 상자가 아니라 첫번째 태그상자를 기준으로 움직이게 된 것입니다. 그럼 자신의 조상 태그들이 모두 기본값인 static이라면 어떻게 될까요? 그럴땐 <body>태그를 기준으로 움직입니다.

이제 fixed와 sticky에 대해서 알아볼까요?




<head>
    <title>포지션 속성 연습</title>
    <style>
      .space{
        height: 1500px;
        border: 5px solid tomato;
      }
      .small-space{
        height: 300px;
        border: 5px solid limegreen;
      }
      #fixed{
        position: fixed;
        background-color: green;
        right: 10px;
        top: 10px;
        font-size: 50px;
      }
      #sticky{
        position: sticky;
        background-color: tomato;
        left: 10px;
        top: 10px;
        font-size: 50px;
      }
   </style>
 </head>
 <body>
   <div class="small-space"></div>
   <div id="sticky">스티키</div>
   <div class="space"></div>
   <div id="fixed">픽스드</div>
   <div class="space"></div>
 </body>


소스코드를 보시면 스티키와 픽스드라는 아이디를 가진 <div>태그들이 있습니다. 그리고 공간을 나타내기 위한 <div>들이 태그들이 있습니다. 우선 복사 붙여넣기 해서 실행해주세요.


fixed와 sticky픽스드와 스티키라고 적혀있는 것이 보이나요?


픽스드라고 적혀있는 엘리먼트엔 position 값을 fixed로, 스티키라고 적혀있는 엘리먼트엔 position 값을 sticky로 지정해주었습니다. 둘의 공통점은 우리가 보고 있는 화면을 기준으로 지정한 오프셋에 고정되서 보인다는 것입니다.

#fixed에는 top과 right가 10px로 지정되어 있습니다. 그래서 화면의 우상단에 위치해있죠. 하지만 #sticky는 top과 left과 각각 10px로 지정되어 있습니다만 공간사이에 위치해 있습니다. 이제 스크롤을 내려보세요!


화면내림스티키가 좌상단에 위치해 있는 것이 보이시나요?


position이 sticky로 지정되면 스크롤을 내리다가 자신이 지정한 오프셋에 도달했을 때 위치가 고정됩니다.


기억하세요. fixed는 보이는 화면을 기준으로 지정한 오프셋에 계속 고정되고, sticky는 스크롤을 내리다가 지정한 오프셋에 위치하고 나서부터 계속 그 위치에 고정됩니다.



오늘은 css의 position 속성들에 대해서 알아보았습니다. 다음 포스팅부터는 본격적으로 반응형 웹을 만들어 보도록 하겠습니다. 


공감은 제작자에게 큰 힘이 됩니다.


댓글