[CSS] 실무 웹 레이아웃 패턴 모음 (Holy Grail, Sticky Footer)

이번 포스팅에서는 [CSS 레이아웃 완결] 파트의 세부 주제인 실무에서 가장 많이 마주하는 디자인 레이아웃 문제 해결법에 대하여 상세히 알아보겠습니다.

1. 컨텐츠가 짧아도 푸터를 화면 맨 아래 고정하기 (Sticky Footer)

게시글이 몇 줄 없을 때 Footer가 화면 중간에 허공에 둥둥 떠 있는 흉측한 현상을 방지하는 깔끔한 공식입니다.

body {
  display: flex;
  flex-direction: column;
  /* 브라우저 화면 전체 높이를 최소한으로 확보 */
  min-height: 100vh; 
  margin: 0;
}

main.content {
  /* 헤더와 푸터를 제외한 남는 공간을 모두 밀어서 차지함 */
  flex-grow: 1; 
}
/* 결과: content가 늘어나면 푸터도 자연히 밀려나고, 짧아도 푸터는 맨 아래 안착! */

2. Holy Grail 레이아웃 (성배 레이아웃)

상단 헤더, 하단 푸터, 중앙은 3단(좌/우 사이드바 고정, 가운데 본문 유동적)으로 꽉 채우는 웹 디자인의 고전적인 목표입니다. 과거엔 구현이 극악이었으나 Grid 하나면 끝입니다.

.layout-wrapper {
  display: grid;
  height: 100vh;
  /* 행(가로줄): 헤더 자동, 본문 남는공간 전부, 푸터 자동 */
  grid-template-rows: auto 1fr auto;
  /* 열(세로줄): 좌측 고정 200px, 가운데 유동 1fr, 우측 고정 200px */
  grid-template-columns: 200px 1fr 200px;
}

header { grid-column: 1 / -1; } /* 1열부터 끝까지 통째로 사용 */
footer { grid-column: 1 / -1; }
/* 본문(nav, main, aside)은 차례대로 남은 2번째 행(Row)에 자동으로 배치됩니다. */

---

지금까지 Sticky Footer와 성배 레이아웃 등 대표적인 디자인 패턴 구현법에 대해 살펴보았습니다. 이 몇 가지 템플릿 뼈대만 외우고 있어도 웬만한 UI는 순식간에 제작할 수 있습니다.