header, nav, main, aside, footer로 페이지 영역의 역할을 나눕니다.
레이아웃은 콘텐츠를 어느 영역에 배치할지 정하는 구조입니다. header는 머리말, nav는 주요 탐색, main은 페이지의 핵심 내용, aside는 보조 내용, footer는 문서나 영역의 바닥글입니다. 실제 위치와 크기는 CSS가 담당합니다.
.columns의 grid-template-columns: 1fr 160px가 aside에 160px을 먼저 떼어 주고 남은 폭을 모두 main에 줍니다. 화면이 520px 이하로 좁아지면 미디어 쿼리가 열을 1fr 하나로 바꾸므로 aside는 main 아래로 내려갑니다. header와 footer는 .layout > header처럼 자식 결합자로 골라서, main 안에 header가 생겨도 어두운 배경이 번지지 않습니다.
이 영역 요소들은 화면 읽기 도구에 랜드마크로 전달됩니다. header는 banner, nav는 navigation, aside는 complementary, footer는 contentinfo로 알려져 사용자가 영역 사이를 바로 건너뛸 수 있습니다. 다만 header와 footer가 article이나 section 안에 있으면 이 역할을 갖지 않고, 보이는 main은 문서에 하나만 둡니다.
header를 head와 혼동하지 마세요. header는 body 안에 보이며 문서나 section마다 사용할 수도 있습니다.
직접 바꿔보세요aside를 main 오른쪽에서 왼쪽으로 옮기도록 HTML 순서와 CSS를 바꿔보세요.