header, nav, main, aside, footer로 페이지 영역의 역할을 나눕니다.
레이아웃은 콘텐츠를 어느 영역에 배치할지 정하는 구조입니다. header는 머리말, nav는 주요 탐색, main은 페이지의 핵심 내용, aside는 보조 내용, footer는 문서나 영역의 바닥글입니다. 실제 위치와 크기는 CSS가 담당합니다.
예제에서는 <header>...</header><main>...</main><footer>...</footer> 부분부터 찾으세요. 태그 이름만 외우기보다 부모·자식 관계와 속성이 어느 요소에 붙는지를 한 덩어리로 읽으면 구조를 고치기 쉬워집니다.
먼저 현재 결과를 확인한 뒤 aside를 main 오른쪽에서 왼쪽으로 옮기도록 HTML 순서와 CSS를 바꿔보세요. 수정 전에는 예상한 변화를 한 문장으로 적고, 실행 뒤에는 정보 순서와 키보드 접근까지 그대로인지 살펴보세요.
header를 head와 혼동하지 마세요. header는 body 안에 보이며 문서나 section마다 사용할 수도 있습니다.
직접 바꿔보세요aside를 main 오른쪽에서 왼쪽으로 옮기도록 HTML 순서와 CSS를 바꿔보세요.