Logo

CSS 레이아웃: 컨텐츠 수평 중간 정렬하기

모바일 우선(mobile-first) 웹디자일 할 때 컨텐츠를 위에서 아래로 배치하는 화면 레이아웃을 제일 먼저 고려하게 되는데요. 이 때 대부분의 경우 컨텐츠 (특히, 텍스트 컨텐츠)를 수평 중간에 위치시켜야 하죠?

이번 포스팅에서는 CSS로 레이아웃 잡을 때 컨텐츠를 수평 중간에 정렬하는 요령에 대해서 알아보려고 합니다.

수평 중간 정렬

컨텐츠를 수평에 정렬하는 작업은 웹페이지의 여러 부분에 걸쳐서 일어나게 되므로 보통 클래스로 스타일하는 경우가 많습니다. 관례적으로 container나 max-width-wrapper와 같은 클래스명을 주로 사용하는데요.

컨텐츠를 수평 중간 정렬하려면 우선 컨텐츠를 담고 있는 HTML 요소의 폭을 width 속성을 이용하여 좁혀줘야 합니다. div, p, h1 등 대부분 block 요소는 기본적으로 너비(width)가 100%이기 때문인데요. 그러므로 폭을 줄여주지 않으면 항상 브라우저 화면 폭만큼 늘어나서 수평 정렬가 무의미해지겠죠?

컨텐츠를 담고 있는 요소의 폭을 줄이면 요소가 기본적으로는 왼쪽으로 수평 정렬되는데요. 좌우 margin을 auto로 설정해주면 자연스럽게 요소가 중간에 오게 됩니다.

.container {
  width: 70%;
  margin: 0 auto;
}

최대 너비 제한

최근에는 TV 처럼 매우 엄청나게 큰 화면에서도 브라우징이 가능하기 때문에 컨텐츠의 최대 너비를 제한해주는 것이 좋습니다. 안 그러면 너무 많은 양의 컨텐츠가 좌우로 나오게 되어 가독이 어려워질테니까요.

이렇게 컨텐츠의 최대 너비를 제한할 때는 max-width 속성을 추가해주면 되는데요. 일반적으로 width 속성에는 상대 단위로 일반 너비를 명시하고, max-width 속성에 절대 단위로 최대 너비를 명시해줍니다. 그러면 max-width 속성값이 뷰포트(viewport)의 폭이 좁은 경우에는 width 속성값이 적용되다가 뷰포트의 폭이 max-width 속성값을 넘어가게 되면 컨텐츠의 폭이 더 이상 놀어나지 않게 됩니다.

.container {
  width: 70%;
  max-width: 1000px;
  margin: 0 auto;
}

고정 패딩 넣기

모바일 화면과 같이 좁은 뷰포트에서는 width 속성을 상대 단위로 지정해줄 경우 좌우에 여백이 너무 많아서 상대적으로 컨텐츠를 보여주는 너비가 너무 좁게 느껴질 수 있습니다. 이럴 때는 width 속성값을 100%로 주고, 좌우에 padding을 넣어주는 것이 더 유리한 경우가 많습니다.

.container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 16px;
}

반응형 패딩

요즘같이 웹브라우징을 하는 디바이스가 워낙 다양한 환경에서는 padding의 크기를 화면 너비에 따라서 자동으로 늘어나고 줄어들 게 해주는게 좋겠죠? 미디어 쿼리를 적절히 이용하여 폭이 넓은 뷰포트에서는 좌우 패딩을 서서히 늘려주면 됩니다.

.container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 480px) {
  .container {
    padding: 0 32px;
  }
}

@media (min-width: 768px) {
  .container {
    padding: 0 48px;
  }
}

최신 문법 활용

트랜드에 맞춰 최신 문법을 사용하면 좀 더 깔끔하게 CSS 코딩을 할 수 있어서 더욱 좋겠죠?

예를 들어, min() 함수를 사용하면 width 속성만 있어도 되서, max-width 속성을 생략할 수 있고요. margin-inline이나 padding-inline 속성을 활용하면 굳이 상하 여백을 지정해줄 필요가 없을 것입니다.

이러한 CSS 문법은 예전에는 브라우저 호환성 문제 때문에 사용이 꺼려졌었지만, 요즘에는 대부분의 브라우저에서 지원이 되기 때문에 큰 걱정없이 쓸 수 있습니다. 😃

.container {
  width: min(100%, 1000px);
  margin-inline: auto;
  padding-inline: 16px;
}

@media (min-width: 480px) {
  .container {
    padding-inline: 32px;
  }
}

@media (min-width: 768px) {
  .container {
    padding-inline: 48px;
  }
}

전체 코드

본 포스팅에서 작성한 코드는 아래에서 직접 확인하고 실행해보실 수 있습니다.

마치면서

이상으로 웹사이트 레이아웃을 잡을 때 컨텐츠의 최대 너비를 제한하면서 수평 중간에 정렬하기 위해서 활용할 수 있는 CSS 코드를 함께 작성해보았습니다.

동일한 결과를 Flexbox나 CSS Grid와 같이 CSS에 비교적 최근에 추가된 레이아웃 기술을 이용해서도 구현할 수 있는데요. 하지만 이렇게 간단한 레아아웃을 위해서 복잡한 기술을 쓰는 것은 오버엔지어링(over engineering)이 되어 오히려 득보다 해가 될 수가 있답니다 😆

This work is licensed under CC BY 4.0

messageCircle