sliver__

CSS로 페이지를 가운데 정렬하는 간단한 트릭 본문

Frontend/CSS

CSS로 페이지를 가운데 정렬하는 간단한 트릭

sliver__ 2025. 5. 2. 15:17
728x90

웹 페이지를 만들다 보면 전체 콘텐츠를 브라우저 창 중앙에 고정하고 싶을 때가 있습니다. 예전에는 복잡한 방법을 써야 할 것 같았지만, 사실 단 두 줄의 CSS만으로도 손쉽게 구현할 수 있어요!

1. 콘텐츠를 감싸는 컨테이너 만들기

먼저, 페이지 전체를 감쌀 컨테이너 요소를 추가합니다. 보통 의미론적 태그가 필요 없으니 <div>로 충분합니다.

<body>
  <div class="container">
    <!-- 헤더, 본문, 푸터 등 모든 콘텐츠 -->
    <header>…</header>
    <main>…</main>
    <footer>…</footer>
  </div>
</body>

Tip: 이 컨테이너는 <body> 바로 안쪽에 위치시키고, 닫는 </div>는 푸터 뒤에 둡니다.

2. 컨테이너에 너비 지정하기

화면이 아무리 커져도 일정 너비만큼만 보여지게 하려면, 컨테이너에 고정 너비를 줍니다. 예를 들어 800px로 해보겠습니다.

.container {
  width: 800px;
  /* 이후 마진 설정으로 가운데 정렬 */
}
  • 자식 요소들은 부모(.container) 너비보다 커질 수 없으므로
    • <h1>, <p>, <img> 등 콘텐츠는 모두 max-width: 800px 상태가 됩니다.

3. margin: 0 auto; 로 가로 중앙 정렬

가장 중요한 트릭! 컨테이너의 좌우 여백(margin) 을 자동(auto)으로 설정하면, 브라우저가 좌우 여백을 같은 크기로 계산해 페이지를 중앙에 배치합니다.

.container {
  width: 800px;
  margin: 0 auto;  /* 위·아래 0, 좌·우 자동 */
}
  • margin: 0 auto; 은 shorthand 문법으로
    • margin-top: 0;
    • margin-bottom: 0;
    • margin-left: auto;
    • margin-right: auto;
  • 브라우저가 남는 공간을 좌·우 동일하게 분할해 줍니다.

4. 반응형 대응 팁

고정 너비 대신 최대 너비(max-width) 를 쓰면 작은 화면에서는 유연하게 줄어들고, 큰 화면에서는 지정한 크기 이상 늘어나지 않게 할 수 있습니다.

.container {
  max-width: 960px; /* 화면이 작아지면 100%까지 줄어들음 */
  margin: 0 auto;
  padding: 0 16px;  /* 좌우 여백을 줘서 모바일 가독성 ↑ */
}
  • max-width + padding 조합으로 반응형 레이아웃에 자주 쓰입니다.

마무리

  1. 컨테이너 생성 → 2. width/max-width 지정 → 3. margin: 0 auto
    이 세 단계만 기억하면, CSS로 페이지를 손쉽게 가운데 정렬할 수 있습니다.
    이제 여러분의 블로그나 프로젝트에도 이 트릭을 적용해 보세요!
728x90

'Frontend > CSS' 카테고리의 다른 글

CSS Positioning 기초부터 활용까지  (0) 2025.05.02
CSS 박스 타입 3가지: Block · Inline · Inline-Block  (0) 2025.05.02
CSS에서 width와 height로 요소 크기 조절하는 법  (0) 2025.05.02
CSS 박스 모델 실전 적용: 패딩과 마진 완벽 정리  (0) 2025.05.02
CSS 박스 모델(Box Model) 완벽 이해하기  (0) 2025.05.02
'Frontend/CSS' Related Articles more
Comments