헤더/푸터/레이아웃 작업 (react, postCSS 환경)

const Fridge = ({ authService }) => {
    const history = useHistory();
    const onLogout = () => {
        authService.logout();
    };

    useEffect(() => {
        authService.onAuthChange(user => {
            if (!user) {
                history.push('/');
            }
        });
    });
    return (
        <section className={styles.fridge}>
            <Header onLogout={onLogout} />
            <div className={styles.container}>
                
            </div>
            <Footer />
        </section>
    );
};

먼저 fridge에 헤더와 푸터를 묶고 있는 박스가 있고

헤더와 푸터 사이에는 컨텐츠가 들어갈 박스가 필요하기때문에

container div를 만들어준다.

 

 

.fridge {
  width: 100%;
  height: 100%;
}

.container {
}

그리고 css에서는 

헤더와 푸터를 감싸고 있는 박스를

너비와 높이 100%로 줘서 가득차게 해준다.

 

 

.fridge {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.container {
  flex: 1;
}

그리고 헤더와 푸터 사이에

컨테이너 공간을 주기위해서

fridge를 flex로 해주고

column으로 수직 정렬을 한다.

컨테이너에는 flex를 1로해서 공간을 준다.

 

 

 

const Fridge = ({ authService }) => {
    const history = useHistory();
    const onLogout = () => {
        authService.logout();
    };

    useEffect(() => {
        authService.onAuthChange(user => {
            if (!user) {
                history.push('/');
            }
        });
    });
    return (
        <section className={styles.fridge}>
            <Header onLogout={onLogout} />
            <div className={styles.container}>
                <Editor />
                <Preview />
            </div>
            <Footer />
        </section>
    );
};

그리고 컨테이너 안에 들어갈

Editor와 Preview 폴더와 파일을 만들고

fridge에 임포트해서 추가해준다.

 

 

그럼 이런식으로 나오는 것을 볼 수 있다.

 

 

이 두개를 양쪽으로 나누고,

브라우저 크기가 작아지면

위아래로 움직이는 반응형으로 css를 해준다.

 

 

.fridge {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex: 1;
}

우선 fridge CSS에 

container에 디스플레이에 flex를 해준다.

(양쪽으로 나뉨)

 

 

.editor {
  flex-basis: 50%;
}

.preview {
  flex-basis: 50%;
}

그리고 각각의 css파일에

flex-basis를 50% 해서

반반으로 나줄 수 있도록 해준다.

 

 

@value mediaQuery from '../../common/size.css';

.fridge {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex: 1;
}

@media screen and (max-width: mediaQuery) {
  .container {
    flex-direction: column;
  }
}

그리고 다시 fridge.css로 와서

브라우저가 작아질 때 수직으로 바꿀건데,

이건 미리 미디어쿼리 사이즈를 작성해놨기때문에

색상과 마찬가지로 value로 불러와서 적용해준다.

 

그럼 브라우저 크기에따라 조절되는 

editor 부분과 preview부분이 완성된다.

(색상은 구분하기 위해 사용했다.)