CSS Academy · 강의

Grid를 사용한 성배 레이아웃

CSS Grid를 사용해 헤더, 푸터, 본문, 양쪽 사이드바가 있는 고전적인 성배 레이아웃을 구현합니다.

Grid를 사용한 성배 레이아웃은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

성배 레이아웃이란 무엇인가요

성배 레이아웃은 고전적인 웹 디자인 패턴입니다. 헤더와 푸터, 그리고 가운데에 세 개의 열(왼쪽 사이드바, 주 콘텐츠, 오른쪽 사이드바)이 있는 전체 높이 페이지입니다. 플로트를 사용하면 악명높게 어려웠지만 CSS 그리드를 사용하면 매우 간단합니다.

그리드 템플릿 정의

이름이 지정된 템플릿 영역과 행으로 레이아웃을 정의합니다. grid-template-areas가 시각적 구조를 매핑합니다. 세 개의 열과 세 개의 행(헤더가 모든 열에 걸치고 푸터도 모든 열에 걸치며 가운데 행에는 세 열이 있음)으로 전체 레이아웃을 읽기 쉬운 ASCII 다이어그램에 담을 수 있습니다.

  <header>Header</header>
  <div class="sidebar">Sidebar</div>
  <main>Main</main>
  <aside>Aside</aside>
  <footer>Footer</footer>

영역에 요소 할당

각 자식 요소는 이름으로 자신의 영역을 참조합니다. header { grid-area: header }, main { grid-area: main }, nav { grid-area: sidebar }, aside { grid-area: aside }, footer { grid-area: footer }처럼 지정하면 됩니다. 그리드가 요소를 자동으로 배치합니다.

가운데 행 확장

가운데 행은 1fr을 사용해 고정 높이의 헤더와 푸터를 제외하고 남은 모든 뷰포트 높이를 채웁니다. 따라서 별도의 높이 계산 없이 사이드바와 주 콘텐츠가 항상 뷰포트를 가득 채우도록 할 수 있습니다.

반응형 접기

모바일에서는 미디어 쿼리를 사용해 grid-template-areas를 단일 열 스택으로 다시 정의하십시오. 헤더, 사이드바, 주 콘텐츠, 보조 영역, 푸터가 세로로 쌓이게 됩니다. DOM 순서는 유지되고 시각적 그리드 템플릿만 변경됩니다. 그리드 영역을 사용하면 반응형 구조 변경을 읽기 쉽게 표현할 수 있습니다.

  <header>Header</header>
  <div class="sidebar">Sidebar</div>
  <main>Main</main>
  <aside>Aside</aside>
  <footer>Footer</footer>

반응형 사이드바 숨기기

태블릿에서는 오른쪽 보조 영역을 제거하고 주 콘텐츠를 확장하십시오. "header header" "sidebar main" "footer footer"로 다시 정의하고 grid-template-columns: 240px 1fr을 사용하면 됩니다. aside { display: none }을 설정하거나 영역 정의에서 보조 영역을 주 콘텐츠 아래로 옮기십시오.

간격과 패딩

그리드 트랙 사이에 간격을 추가하려면 gap: var(--spacing-4)를 사용하십시오. 간격을 일관되게 유지하려면 그리드 컨테이너가 아니라 각 영역 안에 패딩을 적용하십시오. 일반적으로 헤더와 푸터에는 그리드의 최대 너비 정렬에 맞춘 자체 가로 패딩을 지정합니다.

중첩 그리드

주 콘텐츠 영역 자체를 그리드로 만들 수도 있습니다. 예를 들어 주 영역 안에 문서와 사이드바를 두 열로 배치할 수 있습니다. 중첩 그리드를 사용하면 복잡한 클래스 계층이나 깊게 중첩된 위치 지정 없이 페이지 외곽 레이아웃 안에 콘텐츠 레이아웃을 만들 수 있습니다.

고정 헤더

헤더를 고정하려면 header { position: sticky; top: 0; z-index: 10; }을 사용하십시오. 그리드 레이아웃에서는 그리드 자식에 고정 위치를 적용해도 예상대로 작동하므로, 주 콘텐츠와 사이드바, 보조 영역이 그 아래에서 스크롤되는 동안 헤더가 고정됩니다.

성배 레이아웃의 고정 사이드바

두 사이드바를 모두 고정할 수 있습니다. nav, aside { position: sticky; top: 0; height: 100vh; overflow-y: auto; }를 사용하십시오. 주 콘텐츠가 스크롤되는 동안 사이드바가 계속 표시되어 가운데 영역만 스크롤되는 세 패널 레이아웃을 만들 수 있습니다.

페이지 레이아웃에서 그리드와 플렉스박스 비교

성배 레이아웃처럼 2차원 페이지 외곽 레이아웃에는 그리드를 사용하십시오. 그리드는 이름이 지정된 행과 열에 요소를 동시에 배치하는 데 뛰어납니다. 그리드 영역 안에서 한 차원으로 구성되는 컴포넌트 레이아웃(한 행의 탐색 항목이나 한 열의 카드 콘텐츠)에는 플렉스박스를 사용하십시오.

지식 확인

grid-template-areas가 반응형 성배 레이아웃에 특히 유용한 이유는 무엇인가요?

요약

CSS 그리드는 역사적으로 어려웠던 성배 레이아웃을 매우 간단하게 만듭니다. grid-template-areas가 영역 이름을 지정하고, 가운데 행의 1fr이 뷰포트 높이를 채우며, 미디어 쿼리가 반응형 접기를 위해 영역 지도를 다시 정의합니다. 고정 헤더와 사이드바도 추가적인 복잡성 없이 그 위에 적용할 수 있습니다.

자주 묻는 질문

“Grid를 사용한 성배 레이아웃” 강의는 무료인가요?

네 — “Grid를 사용한 성배 레이아웃” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Grid를 사용한 성배 레이아웃”에서 뭘 배우나요?

CSS Grid를 사용해 헤더, 푸터, 본문, 양쪽 사이드바가 있는 고전적인 성배 레이아웃을 구현합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“Grid를 사용한 성배 레이아웃” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← CSS Academy(으)로 돌아가기