아이템을 컨테이너의 중앙에 배치하기

카메라의 PTZ 기능을 웹페이지를 통해 제어할 수 있는 기능을 구현하면서, CSS에 대해서 조금씩 공부해가고 있다. 개발하다 보니 많이 사용해야 할 기법인 것 같아서 정리해놓을 필요가 있을 것 같다.

CSS에 position이라는 속성이 있다. 자세한 설명은 다음 링크를 참조하면 된다.

https://developer.mozilla.org/ko/docs/Web/CSS/position

position - CSS: Cascading Style Sheets | MDN

기본값은 static이며, 문서 흐름에 따라 그대로 배치된다. 즉, 왼쪽에서 오른쪽, 위에서 아래로 붙어서 나타나는 방식이다. DOM 요소의 display 속성이 inline인 경우에는 왼쪽에서 오른쪽으로 연결되어 표시될 것이고, block인 경우에는 DOM 요소 자체가 한 줄을 다 차지해버리므로, 위에서 아래로 붙어서 나타나게 될 것이다. 요소를 부분적으로 이동시키기 위해서는 postion 속성 값을 static을 사용하는 것은 적합하지 않다.

position에 대한 속성값으로 relative라는 것이 등장한다. 문서 흐름은 그대로 따르되, 여기에서 top, bottom, left, right 등의 속성을 이용해서 이동시켜볼 수 있다. 이 속성 값을 잘 조정하다 보면 중앙에 배치할 수 있지 않을까?

가장 먼저 떠오르는 것은 top과 left를 50%로 설정하는 것이다. 부모 요소 기준으로 50% 위치에 이동하기 때문에 자식 요소의 좌측 상단 기준으로 중앙에 위치하게 된다. 일반적으로는 이렇게 위치시키길 원하진 않을 것이다. 지식 요소의 중심이 부모 요소의 중심과 일치하도록 배치하는 것을 의도한다.

그렇다면, 두 중심을 어떻게 일치시킬 것인가? 자식 요소를 자신의 너비와 높이의 절반만큼을 반대로 이동시켜주면 된다. 이것은 transform 속성의 translate(-50%) 를 이용해서 목적을 달성할 수 있다. 그런데, 그전에 전제되어야 할 조건이 있다. 자식 요소의 너비와 높이가 내부의 콘텐츠를 기준으로 설정이 되어 있어야 가능한 방법이다. DOM 요소의 display 요소는 block이 기본이므로, 높이는 콘텐츠에 맞게 설정이 되나, 너비가 부모 요소에 따르기 때문에 문제가 된다. 기껏 translate(-50%)를 적용했지만, 너비가 부모 요소와 같으니, 이동 전의 위치로 돌아가버리게 된다.

좀 더 고민해서, 요소의 너비를 컨텐츠의 길이와 맞추는 방법은 무엇일까? display를 inline-block으로 해주면 된다. 처음에는 inline으로 하면 되지 않을까 했는데, inline으로 설정한 요소는 너비와 높이값을 가지지 않는다. inline-block으로 설정하는 것이 중요하다.

정리해보면,

1. postion을 relative로 설정한다.
2. top과 left를 50%로 설정한다.
3. display를 inline-block을 설정한다.
4. transform을 translate(-50%)으로 설정한다.

이 방법을 이용해서 간단한 예제를 codepen에서 작성해보았다.

See the Pen Untitled by Sang-moon, Lee (@moonyl) on CodePen.

중심에 배치하는 기본 개념과 방법은 이 정도가 되겠다. 이 방법을 활용하면 여러 가지 배치 방법도 구현할 수 있을 것이라 기대해본다.