모든 영역 한 열
`header`, `main-nav`, `main-content`, `sidebar`, `footer`가 세로로 쌓입니다.
본문과 사이드바 2열
`min-width: 768px`에서 메인 콘텐츠와 사이드바가 나란히 놓입니다.
내비게이션까지 3열
`min-width: 1024px`에서 내비게이션이 왼쪽 세로 메뉴로 이동합니다.
실습 결과는 HTML 작성 여부보다 창 너비를 바꿀 때 `grid-template-areas`, 내비게이션 방향, 사이드바 위치가 의도대로 바뀌는지로 확인합니다.
`header`, `main-nav`, `main-content`, `sidebar`, `footer`가 세로로 쌓입니다.
`min-width: 768px`에서 메인 콘텐츠와 사이드바가 나란히 놓입니다.
`min-width: 1024px`에서 내비게이션이 왼쪽 세로 메뉴로 이동합니다.
`responsive_blog.html`에서 `css/responsive.css`가 연결되어야 합니다.
CSS의 `grid-area` 이름과 `grid-template-areas` 문자열이 일치해야 합니다.
이미지가 있다면 부모 폭을 넘지 않도록 `max-width: 100%`를 확인합니다.
브라우저 폭을 천천히 바꾸며 넘침, 줄바꿈, 터치 간격을 확인합니다.