CSS의 top, left
값으로 위치를 지정할 수 있는데, 웹 개발 특히, 프론트엔드를 주로 개발하는 사람들에겐 top, left
는 매우 친숙할 것이다.
top, left
값을 조정해야 하는 엘리먼트의position
값이static
이라면top
과left
는 적용되지 않는다
또한, position 값이 static이 아닌 다른 값이라면 top과 left는 적용되긴 하지만 absolute, relative 등 값에 따라서 결과가 달라지니 매우 주의해서 사용해야한다.
저번에 작성했던 게시글 중 translate3d()
와 일반적인 translate()
의 차이를 적어 놓은 게시글이 있다. 거기에는 translate()
의 원리에 대해서 적어 놓았는데 이번 게시글에서도 그 개념이 중요하게 쓰인다.
translate3d()
는 하드웨어 가속을 사용하기 때문에 더 좋은 CSS 퍼포먼스를 구현할 수 있다. 따라서 애플 홈페이지에서도 일반적인 translate()
보다는 translate3d()
를 사용하는 것으로 알고있다.
위와 같이 높이가 100px
인 엘리먼트를 translateY(100%)
또는 translate3d(0, 100%, 0)
를 하면 100px
이동한다.
우선 position: absolute
인 엘리먼트의 top, left
값을 각각 50%
으로 한다.
.tempdiv {
position: absolute;
top: 50%;
left: 50%;
}
결과는 아래와 같다.
왼쪽 상단을 기준으로 top, left 값을 적용시키므로 50%지점에 왼쪽 상단이 위치하는 것을 알 수 있다
여기서 translate()
를 적용시킨다.
.tempdiv {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
결과는 아래와 같다.
top, left
값으로 왼쪽 상단을 중앙으로 맞춘 후, translate()
를 이용하여 엘리먼트를 가로, 세로 방향으로 각각 엘리먼트의 width, height
값의 -50%
를 이동시킨다면 가운데정렬 을 할 수 있다.