홀리 그레일 레이아웃

Coddy HTML 여정의 Practical Frontend 섹션에 포함된 레슨 — 35개 중 26번째.

홀리 그레일 레이아웃(Holy Grail Layout)은 상단에 헤더, 하단에 푸터, 그리고 중앙에 세 개의 열이 있는 고전적인 웹 디자인 패턴입니다:

왼쪽 사이드바 (내비게이션 또는 링크)
메인 콘텐츠 (중앙)
오른쪽 사이드바 (추가 정보, 광고 또는 위젯)

메인 콘텐츠를 중앙에 유지하며 블로그, 뉴스 사이트, 대시보드에서 매우 흔하게 사용되기 때문에 '홀리 그레일(Holy Grail)'이라고 불립니다.

작동 원리:

CSS Flexbox 또는 Grid로 구축되었습니다.
메인 콘텐츠는 공간을 채우기 위해 확장되는 반면, 사이드바는 고정된 너비 또는 더 작은 너비를 가집니다.
작은 화면에서는 가독성을 높이기 위해 사이드바가 메인 콘텐츠의 위나 아래로 배치됩니다.

CSS Grid를 사용한 예시 (간소화됨)

HTML:

<div class="container">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main Content</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>

CSS:

.container {
 display: grid;
 grid-template-areas:
   "header header header"
   "nav main aside"
   "footer footer footer";
 grid-template-columns: 200px 1fr 200px;
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }

챌린지

쉬움

다음 요구 사항에 따라 Holy Grail Layout을 만드세요:

header와 footer의 배경색으로 --main-color라는 CSS 변수를 사용하세요.
header, footer, nav, main, 그리고 aside에 대한 grid-area 값을 정의하세요.
header와 footer 내부의 텍스트를 중앙 정렬하세요.

치트 시트

Holy Grail Layout은 헤더, 푸터, 그리고 세 개의 열(왼쪽 사이드바(내비게이션), 메인 콘텐츠(중앙), 오른쪽 사이드바)로 구성된 클래식한 웹 디자인 패턴입니다.

구조:

<div class="container">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main Content</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>

CSS Grid 구현:

.container {
 display: grid;
 grid-template-areas:
   "header header header"
   "nav main aside"
   "footer footer footer";
 grid-template-columns: 200px 1fr 200px;
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }

메인 콘텐츠는 사용 가능한 공간을 채우도록 확장(1fr)되는 반면, 사이드바는 고정된 너비를 가집니다. 작은 화면에서는 가독성을 높이기 위해 일반적으로 사이드바가 수직으로 쌓입니다.

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <title>Holy Grail Layout</title>
  <style>
    :root {
      --main-color: rgb(76, 175, 239); /* header/footer */
      --accent-color: #ff9800; /* highlights */
      --text-color: #333;
      --heading-color: #222;
    }

    body {
      margin: 0;
      font-family: "Segoe UI", Arial, sans-serif;
      background: #a9eef3;
      color: var(--text-color);
    }

    .container {
      display: grid;
      grid-template-areas:
        "header header header"
        "nav main aside"
        "footer footer footer";
      grid-template-columns: 160px 1fr 180px;
      min-height: 100vh;
      gap: 1rem;
    }

    header {
      color: white;
      padding: 1.5rem;
    }

    footer {
      color: white;
      padding: 1rem;
    }

    nav {
      background: #f4f4f4;
      padding: 1rem;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    nav h3 {
      margin-top: 0;
      color: var(--heading-color);
    }

    nav ul {
      list-style: none;
      padding: 0;
    }

    nav li {
      margin: 0.5rem 0;
    }

    nav a {
      text-decoration: none;
      color: var(--text-color);
      padding: 0.3rem 0.5rem;
      border-radius: 4px;
      transition: background 0.2s;
    }

    nav a:hover {
      background: var(--accent-color);
      color: white;
    }

    main {
      padding: 1.5rem;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    }

    main h2 {
      margin-top: 0;
      color: var(--heading-color);
    }

    aside {
      background: #fff7e6;
      padding: 1rem;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    aside h3 {
      margin-top: 0;
      color: var(--accent-color);
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1>Travel Adventures</h1>
      <p>Explore the world, one journey at a time</p>
    </header>

    <nav>
      <h3>Navigation</h3>
      <ul>
        <li><a href="#">Destinations</a></li>
        <li><a href="#">Travel Tips</a></li>
        <li><a href="#">Photo Gallery</a></li>
      </ul>
    </nav>

    <main>
      <h2>Featured Destination: Japan</h2>
      <p>
        Japan is a country where ancient traditions meet modern innovation. 
        From the serene temples of Kyoto to the bustling streets of Tokyo, 
        there’s something for every traveler.
      </p>
      <p>
        Don’t forget to try sushi, explore cherry blossoms in spring, 
        and relax in an onsen hot spring bath.
      </p>
    </main>

    <aside>
      <h3>Quick Facts</h3>
      <ul>
        <li>Capital: Tokyo</li>
        <li>Language: Japanese</li>
        <li>Currency: Yen</li>
      </ul>
    </aside>

    <footer>
      <p>&copy; 2025 Travel Adventures Blog</p>
    </footer>
  </div>
</body>
</html>