<CSS 기초> 07. Position

 

  Position은 요소의 위치를 잡기위해 사용하는 속성이다. 타입은 총 5가지가 있다. static, relative, absoulute, fixed, sticky 이다. 이 중 sticky는 지원하는 브라우저가 적으므로 나머지 4개를 알아보자.

 

 타입에 따라 기준점을 무엇으로 하느냐가 달라진다. 타입을 준 후 속성값으로 top right bottom left를 줄 수 있는데, 4가지를 모두 사용하기보다 가로 중 하나와 세로 중 하나를 쓰는 게 효율적이다.

 

1. Static

 static은 별도의 지정없이 모든 요소의 기본 상태이다.

 

2. Relative

 relative의 기준점은 원래 있던 자리이다.

.class01 {
  position: relative;
  top: 20px;
  right: 5px;
}

  위와 같은 방식으로 사용한다. relative는 float와 달리 붕 뜨긴 하지만 원래 있던 자리가 인식된다. 위는 원래있던 자리에서 위에서 20px만큼 오른쪽에서 5px만큼 떨어지라는 의미이다. 떨어지더라도 다른 요소들은 원래있던 자리로 인식한다는 것이 특징이다.

 

3. Absolute

 absolute는 사용 시 block이 되는데, 붕 뜨기 때문에 막는 특징은 없다. float와 달리 이미지나 글도 막지 않는다.

 

 absolute는 잘만 이용하면 기준을 선택할 수 있다. absolute는 자기 위에 써진 것중 static이 아닌 position을 자동으로 기준으로 삼는다. 즉 기준으로 삼고 싶은 곳에 relative 포지션을 주면 된다. 굳이 relative를 사용하는 이유는 다른 요소들에게 영향을 끼치는 일 없이 사용가능하기 때문이다.

 

4. Fixed

 fixed는 absolute와 비슷하지만 기준이 다르다. fixed는 viewport를 기준으로한다. 즉 화면에 보이는 사이즈 자체가 기준이다. 예를 들면 bottom값을 0으로 주게되면 스크롤을 내리든 말든 아래에 붙어있는 것이다.

 

5. 그 외 팁

 - z-index : 우리는 지금까지 붕 뜨는 상황들을 많이 봐왔다. relative를 제외하고 붕뜬것끼리 자리를 배치할 때 z-index속성으로 떠있는 레벨을 조정할 수 있다.

 

 - 이미지는 inline이지만 크기조절이 가능하다. 그러나 나중에 코드의 깔끔함을 위해 display를 block으로 해주는 게 좋다.

 

 - 이미지의 사이즈를 부모컨텐츠에 맞출 때 width 100% 와 height:auto 를 통해 비율을 조정하자.

 

 - position을 통해 이미지를 가운데 정렬하는 상황이 있다고 가정하자. 이 때 top:50% 와 같이 속성을 주면 가운데로 가긴 하지만 모서리를 기준으로 가기 때문에 애매한 상황이 벌어진다.

 

 빨간색 상자를 보면 위쪽 모서리를 기준으로 가운데 있는 것을 알 수 있다. 이 때 필요한 것이 transform속성이다. 이는 다음과 같이 줄 수 있다.

 

 transform : translate(-50%,-50%)

 transform : translateY(-50%)

 

 위 그림의 경우에는 두번째 방법을 사용하면된다. 참고로 첫번째 구문은 X와 Y축으로 자기가 가진 너비와 높이의 -50%만큼 이동하라는 의미이다. 두번째구문은 Y축으로만 자기 자신 높이 기준으로 이동시킨것이다. 

 

 

---

 

 

 

참고

 

이 글은 구름에듀에서 관련 강의를 구매하여 수강 후 공부하며 작성한 글입니다.

모든 내용과 코드 및 이미지는 직접 재구성하였습니다.

 

 

김버그의 HTML&CSS는 재밌다 - 구름EDU