HTML & CSS - [CSS] 요소 정렬하기

서론

원하는 레이아웃을 만들고 요소를 배치하는 과정에서 정렬은 필수적인 요소입니다.

CSS에서 정렬을 하는 방법은 정말 다양하고 상황에 따라 적절하게 사용할 줄 알아야 합니다.

 

또한 부모 요소들이 변경되는 과정에서 정렬을 잘못 사용하게 되면 유지보수가 힘들어질 수 있기 때문에 정렬을 하는 다양한 방법에 대해 숙지하고 적절하게 사용하도록 합시다.

 

요소 수평(가로) 중앙 배치하기 - margin 이용

block요소는 margin속성을 이용해서 손쉽게 중앙으로 정렬이 가능합니다.

사실 중앙으로 정렬한다기보다는 중앙으로 요소를 배치하는 방법입니다.

block요소는 자동으로 줄 바뀜이 일어나는 특징이 있습니다.

따라서 좌우의 여백 값이 동일하다면 자연스럽게 요소는 가운데로 옵니다.

 

자동으로 margin속성을 균일하게 주고 싶다면 auto로 값을 지정하면 됩니다.

See the Pen align block in margin or padding by Gon (@gon-91) on CodePen.

padding은 안되나요?

padding은 전체 여백이 아닌 요소의 테두리와 내용물을 감싸고 있는 여백입니다.

따라서 padding을 변경해도 요소의 위치가 변경되지는 않습니다. 

또한 auto의 개념이 적용되지 않는 특징을 가집니다.

위의 예제로 간단하게 확인이 가능합니다.

 

글씨 수평(가로) 중앙 정렬하기 - text-align

요소 안에 존재하는 글씨를 가운데 정렬하기 위해서는 text-align : center를 주면 손쉽게 가능합니다.

See the Pen text-align by Gon (@gon-91) on CodePen.

 

요소 수직(세로) 및 수평(가로) 중앙 배치하기 - translate

요소를 이동시킬 수 있는 translate 속성을 이용해서 배치가 가능합니다.

다만, 몇 가지 주의할 점이 있어서 먼저 알아보도록 합시다.

• 제어하는 요소의 top left값을 변경할 수 있어야 한다.
• translate는 하나만 적용이 가능하다. 
• translate는 translate, translateY, translateX가 있다.

우선 translate속성을 적용하지 않은 상태를 살펴보도록 합시다.

See the Pen Untitled by Gon (@gon-91) on CodePen.

요소의 top, left를 부모 객체에서 50%씩 이동했습니다. 다만 그리는 지점이 이동되었기 때문에 중앙에 배치하는 것과는 약간의 차이가 존재합니다.

 

이 때문에 translate속성을 이용해서 좌측과 위로 조금씩 옮겨주면 됩니다.

See the Pen translate(act) by Gon (@gon-91) on CodePen.

 

글씨 수직(세로) 정렬하기

이제 마지막으로 글씨를 세로로 정렬하는 방법에 대해서 알아보도록 합시다.

글을 수직으로 정렬하는 방법 또한 위에서의 translate를 이용하는 방법이 있습니다.

단, 글씨를 요소의 개념으로 사용하기 때문에 특정 요소로 다시 한번 감싸주어야 합니다.

 

See the Pen translate(text) by Gon (@gon-91) on CodePen.

결론

CSS를 이용하여 요소들을 배치하는 정렬을 배우다 보면 정말 많은 환경에서 다양한 방법으로 요소를 사용할 수 있습니다.

본문에서 소개한 내용들은 그중에서 가장 간단한 방법들을 알아봤습니다.

사실 display 속성이나 position 속성에 따른 제어하는 방법들도 다양하죠. 

하지만 이런 요소들을 배치하면서 과연 다른 요소들과 적절하게 연동하여 요소들의 크기가 변화해도 원하는 위치에 존재할 수 있는가를 잘 설정하는 것이 포인트입니다.