[CSS] Position: Static, Relative

안녕하세요 동기 여러분! 오늘은 포지션 프로퍼티의 값인 스태틱과 릴레이티브에 대해 알아보도록 합시다!

 

Position: Static, Relative

HTML의 요소의 위치를 지정하는 방법이 5가지가 있는데 그중 두 가지가 Static과 Relative이다.

 

---

 

Static

static을 영어사전에 찾아보면 '고정된, 정지 상태의' 또는 '정전기'라는 뜻을 가지고 있다. 혹시 디아블로2를 하는 유저라면 원소술사의 기술 스태틱 필드를 들어본 적이 있을 것이다.

원소술사 필수 스킬

정전기 공격인데 고정된 양 만큼의 적의 체력을 깎는 무시무시한 기술이다. 음.. 이걸 안다면 static의 '고정된, 정지 상태의' 라는 뜻을 더 외우기 쉽다. (디아블로2 개발자들의 작명 센스가 돋보인다 고정된 데미지를 주는 정전기 기술이라니 영어로 중의적인 표현을 쓴 건가... 의도한 게 아니었다면 말고.)

 

고정된 이라는 말을 강조하기 위해 위에 잠시 잡소리를 해보았다.

 

말 그대로 static은 고정되어야 하기 때문에 CSS에서 사용할 때 요소의 위치를 고정시킬 때 사용한다.

<!--HTML-->
<div id="stranger">난 모르는 사람</div>
<div id="parent">난 부모
  <div id="child">난 자식</div>
</div>

div {
  border: 8px solid palevioletred;
  margin: 20px;
}

#child {
  position: static;
  top: 50px;
  left: 50px;
}

위 코드를 실행하면 아래와 같은 화면이 나온다.

 

원래는 top: 50px; 와 left: 50px; 라는 코드 때문에 기준점을 시작으로 위에서부터 아래로 50px 왼쪽으로부터 오른쪽으로 50px 움직여야 하지만 position: static;을 걸어 놓으면 현재 위치에 고정되어 움직이지 않는다. 

 

혹시 모르니 각각 100px로 고쳐서 실행을 해보았다. (아래)

div {
  border: 8px solid palevioletred;
  margin: 20px;
}

#child {
  position: static;
  top: 100px;
  left: 100px;
}

결과는 같다!!!

 

그렇다면 어찌해야 '난 자식'이 움직일까?

 

---

 

Relative

relative를 영어사전에 찾아보면 '상대적인, 비교상의, 관계있는' 이라는 뜻을 가지고 있다.

그렇다 이 친구는 상대적인 위치를 가지게 하기 위해 쓰는데 이를 설명하기 위해 아래의 스샷을 보도록 하자.

 

스샷을 보면 절대 위치와 상대 위치(현재 위치)를 표시해두었다. relative는 상대 위치(현재 위치)를 기준으로 움직인다.

 

div {
  border: 8px solid palevioletred;
  margin: 20px;
}

#child {
  position: relative;
  top: 50px;
  left: 50px;
}

코드를 position: relative;로 바꾸고 상대 위치(현재 위치)를 기준으로 위에서부터 아래로 50px 왼쪽으로부터 오른쪽으로 50px 움직이게 코드를 설정하고 실행해보았다.

555

 

오 움직인다. 

 

---

 

TOP, LEFT, BOTTOM, RIGHT

top, left, bottom, right은 요소의 위치를 움직일 때 사용하는 프로퍼티이다. px, in, cm, % 등등 다양한 단위로 설정이 가능하다.

 

프로퍼티	설명
top	기준점으로부터 위에서 아래로 얼마만큼 움직일지 설정(bottom과 함께 쓰이는 경우 bottom의 값은 무시되고 top의 값을 따라간다.)
left	기준점으로부터 왼쪽에서 오른쪽으로 얼마만큼 움직일지 설정(right와 함게 쓰이는 경우 right의 값은 무시되고 left의 값을 따라간다.)
bottom	기준점으로부터 아래에서 위로 얼마만큼 움직일지 설정
right	기준점으로부터 오른쪽에서 왼쪽으로 얼마만큼 움직일지 설정

 

---

 

오늘의 느낌

느낌적인 느낌