헤더-푸터 레이아웃(header-footer layout)은 가장 기본이 되는 레이아웃입니다. 샌드위치 같은 구조로, 상단의 헤더(header) 영역에는 사이트 안내를 위한 내비게이션을 넣고, 하단의 푸터(footer) 영역에는 사이트 정보를 넣습니다. 그리고 두 영역 사이에는 사용자가 볼 핵심 내용인 콘텐트(content)를 배치합니다.

그림 2-25 헤더-푸터 레이아웃

/hi 페이지와 /bye 페이지에 헤더-푸터 레이아웃을 적용하는 예제를 실습해 보겠습니다.