더북(TheBook)

20.2.5 PageTemplate 중간 영역 설정

 

PageTemplate에서 Header와 Footer 사이, 즉 중간 영역의 배경색을 회색으로 지정하고 Footer가 언제나 페이지 아래쪽에 위치하도록 중간 영역의 최소 높이를 설정하겠습니다. Header와 Footer 크기를 합치면 15rem이므로, 페이지 높이에서 15rem을 뺀 값을 min-height로 지정합니다. 그리고 그 중간 영역에는 컴포넌트의 children이 보이도록 설정하세요.

src/components/common/PageTemplate/PageTemplate.js

import React from ‘react’;
import styles from ‘./PageTemplate.scss’;
import classNames from ‘classnames/bind’;
import Header from ‘components/common/Header’;
import Footer from ‘components/common/Footer’;

const cx = classNames.bind(styles);

const PageTemplate = ({children}) => (
  <div className={cx(‘page-template’)}>
    <Header/>
    <main>
      {children}
    </main>
    <Footer/>
  </div>
);

export default PageTemplate;

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.