website layout

페이지의 큰 영역을 Grid와 Flexbox로 구성합니다.

개념 이해하기

웹 레이아웃은 header, navigation, main, aside, footer 같은 의미 구조 위에 CSS Grid로 열과 행을 배치합니다. 내부의 작은 한 방향 정렬에는 Flexbox를 함께 사용할 수 있습니다.

이번 예제의 출발점은 grid-template-areas: "header header" "main aside";입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.

처음에는 예제를 그대로 확인한 다음 aside를 main 왼쪽에 배치하도록 영역 정의를 바꾸세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.

이번 강좌에서

페이지의 큰 영역을 Grid와 Flexbox로 구성합니다.

grid-template-areas: "header header" "main aside"; 문법을 읽고 수정합니다.

개발자 도구에서 최종 계산된 스타일을 확인합니다.

처음에 자주 헷갈리는 부분

의미 없는 div 순서만 CSS로 뒤섞으면 키보드와 읽기 순서는 화면 배치와 달라질 수 있습니다.

직접 바꿔보세요aside를 main 왼쪽에 배치하도록 영역 정의를 바꾸세요.

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  padding: 28px;
  background: #f3f7f4;
  color: #17231c;
  font-family: system-ui, sans-serif;
}
.demo {
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 28px;
  background: white;
  border: 1px solid #d5dfd8;
  border-radius: 8px;
}
h1 {
  margin-top: 0;
  font-size: 28px;
}
p {
  line-height: 1.65;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  padding: 10px 14px;
  border: 0;
  border-radius: 6px;
  background: #176b45;
  color: white;
  cursor: pointer;
}
.site {
  display: grid;
  grid-template-columns: 1fr 180px;
  grid-template-areas: "header header" "nav nav" "main aside" "footer footer";
  max-width: 720px;
  margin: auto;
}
.site > * {
  padding: 18px;
}
.site header {
  grid-area: header;
  background: #173c2c;
  color: white;
}
.site nav {
  grid-area: nav;
  background: #dff0e6;
}
.site main {
  grid-area: main;
  background: white;
}
.site aside {
  grid-area: aside;
  background: #eef5f0;
}
.site footer {
  grid-area: footer;
  background: #d6e3db;
}
@media (max-width: 560px) {
  .site {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "nav" "main" "aside" "footer";
  }
}

실행 결과안전한 브라우저 환경