나는 이렇게 학습한다/Etc

CSS _ Position 3대장 을 만나보자.

daco2020 2021. 11. 2. 18:01
반응형

HTML로 웹페이지를 만들다 보면 내가 넣은 요소들이 내 맘대로 위치하지 않는다. (아주 자기들 멋대로다!)

그렇기 때문에 우리는 CSS 스타일로 내가 원하는 위치에 요소들이 위치할 수 있도록 position 속성을 조절해 주어야 한다.

자 그럼 이제부터 position 3 대장을 만나보자!

 

내가 원하는 곳에 위치해라! 제발 좀!

1 대장 relative
-> 사전적 의미 : 상대적인

2 대장 absolute

-> 사전적 의미 : 절대적인

3 대장 fixed

-> 사전적 의미 : 고정된 

 

사실 사전적 의미만으로 벌써 감이 잡힐 것이다.

relative는 상대적으로 위치시키는 것이고

absolute는 절대적으로 위치시키는 것이고

fixed는 기냥 붙박이처럼 박제시키는 것이다!

 

 

설마 아직 감이 안 잡혔다고? 그럼 아래 예제 코드를 살펴보자!

    <style>
      div {
      }
    </style>
  </head>
  <body>
    <div class="one">1대장</div>
    <div class="two">2대장</div>
    <div class="three">3대장</div>
  </body>

 

결과

우선 div 3개를 만들었고 아직 스타일은 적용하지 않았다

당연히 결과도 뭐 없다. div 니까 옆이 아닌 아래로 차곡차곡 쌓이는 정도?

 

<style>
      div.three {
       top:50px;
      }
</style>

결과

3번째 div를 떨어뜨리기 위해 top:50px; 을 줬건만..! 왜 떨어지지 못하는 거니?

이때 필요한 것이 relative!!!!!!

 

다음처럼 스타일 position 속성에 relative를 넣어보자!

 <style>
      div.three {
       position:relative;
       top:50px;
      }
</style>

relative 결과

놀랍게도 3대장이라는 문구가 2대장으로부터 상대적으로 50px 만큼 떨어졌다!!!

 

 

자, 하지만 나는 2대장이 아닌 맨 위 천장으로부터 50px 만큼 떨어뜨리고 싶다. 

이때 필요한 것이 absolute!!!!!!

    <style>
      div.three {
       position:absolute;
       top:50px;
      }
    </style>

absolute 결과

언뜻 보면 다시 맨 처음으로 돌아온 것처럼 보이겠지만, 잘 보면 2대장과 3대장 사이에 약간의 여백이 생긴 걸 볼 수 있다. 이것은 3대장이 천장으로부터 절대적인 거리 50px 만큼 떨어져 있기 때문에 top:50px; 임에도 불구하고 2대장과 가깝게 있는 것이다.

 

그럼 마지막으로 fixed 도 알아봐야겠지?

    <style>
      body{
        height:200vh;
      } /*화면 세로 사이즈를 늘리기 위해 body에 높이 값을 추가함*/
      div.three {
       position:fixed;
       top:50px;
      }
    </style>

fixed 결과

오잉? 이거 absolute 랑 같은 거 아냐? 이렇게 생각할 수 있겠지만 no no!

이것이 fixed !!!

영상을 보면 알겠지만 웹페이지의 화면을 이동해도 3대장의 위치는 천장에서부터 50px 위치에 고정된 것을 볼 수 있다.

이것이 바로 fixed이다!

 

이렇듯 CSS position 속성을 통해 요소들의 위치를 자유자재로 위치시키고 심지어는 고정시킬 수도 있다. 물론 더 쉽고 예쁘게 위치시키려면 flex를 함께 사용해야 한다. flex는 다음에 기회가 되면 포스팅해보겠다.

반응형