레이아웃
- 레이아웃은 바디영역은 바뀌더라도 다른영역은 그대로 있게( 메뉴, 이미지 등) 해주는 기능
- 헤더 / 배너 / 네비게이션 / 사이드 / 푸터로 폴더를 나누고
컴포넌트화 해서 index.txt에 모아준다.
import styled from "@emotion/styled";
import { useRouter } from "next/router";
import LayoutFooter from "./footer/LayoutFooter.container";
import LayoutHeader from "./header/LayoutHeader.container";
import LayoutNavi from "./navi/LayoutNavi.container";
import LayoutBanner from "./banner/LayoutBanner.container";
import LayoutSide from "./side/LayoutSide.container";
export default function Layout(props) {
return (
<Wrapper>
<LayoutHeader />
<LayoutBanner />
<LayoutNavi />
<SidebarWrapper>
<LayoutSide/>
<Body>{props.children}</Body>
</SidebarWrapper>
<LayoutFooter />
</Wrapper>
);
}
- pages 안에 있는 _app.js 에 Component 를 만들어 놓은 레이아웃으로 감싸준다.
return (
<>
<Global styles={globalStyles} />
<ApolloProvider client={client}>
<Layout>
<Component {...pageProps} />
</Layout>
</ApolloProvider>
</>
);
전체 페이지 css 적용하기
emotion의 css를 이용해서 globalStyles 를 지정해준다.- *{ }를 이용해 전체 페이지에 적용할
css를 입력한다.
import { css } from "@emotion/react";
export const globalStyles = css`
* {
margin: 0;
box-sizing: border-box;
font-size: 30px;
}
@font-face {
font-family: "myfont"; // 폰트이름
src: url("/fonts/scifibit.ttf"); // 폰트위치
}
`;
pages 안에 있는 _app.js 에 import 해주고 return에 globalStyles 넣어주기
return (
<>
<Global styles={globalStyles} />
<ApolloProvider client={client}>
<Layout>
<Component {...pageProps} />
</Layout>
</ApolloProvider>
</>
);
