left속성 + right속성 / top속성 + bottom속성

개요

css에서 position 속성은 엘리먼트의 위치를 컨트롤 하기 위해 사용된다. 기본속성인 position: static;은 위치를 임의로 지지정할 수 없지만postion: relative | absolute | fixed | sticky 등은 left, right, top, bottom 속성으로 위치를 지정할 수 있다. 최근 까지 left와 right중 하나만 사용했었는데 둘 다 한꺼번에 사용할 수도 있다는 것을 깨닫게 되어서 정리하려고 한다.

left + right / top + bottom

일반적으로 left를 x좌표, top을 y좌표로 사용했고 오른쪽이나 바닥에 위치 시켜야 하는 특별한 경우에만 right, bottom을 사용했는데 개발 도중 left와 right를 함께 사용할 수 있고 top과 bottom을 함께 사용할 수 있다는 것을 깨닳게 되었다.

<div id="app">
  <div class="box">I`m Box</div>
</div>

#app {
  position: relative;
  top: 100px;
  height: 100px;
  border: 1px solid red;
}

.box {
  position: absolute;
  left: 0;
  right: 0;
  background-color: #000;
  color: #fff;
}

위 코드처럼 left: 0; right: 0;을 주면 부모의 넓이 만큼 꽉 차게 된다. 이전에는 위와 같이 할 때 box에서 width: 100%를 줬었다.

그렇다면 left, right, width를 함께 사용하면 어떤 결과일까?

.box {
  position: absolute;
  left: 0;
  right: 0;
  width: 50%;
  top: 0;
  background-color: #000;
  color: #fff;
}

결과는 right가 무시된다. (left속성을 right속성 다음에 적용해도 마찬가지)
이러한 현상은 top, bottom, height에서도 발견할 수 있다.

만약 box의 width가 부모 엘리먼트의 각 꼭지점을 기준으로 결정되어야 할 경우 유용하게 사용할 수 있을 것 같다.

마무리

left와 right는 상호 배제적이어서 둘 다 사용하게 되면 하나의 속성만 먹힐 것이라는 선입견 때문에 몰랐던 것 같다. 앞으론 잘 모를 때는 섣불리 단정짓지 말고 테스트를 해보는게 좋을 것 같다.