<Global /> 컴포넌트에 전달할 props 파일 만들기
import { css } from "@emotion/react";
export const globalStyles = css`
* {
margin: 0;
box-sizing: border-box;
font-size: 15px;
}
`;emotion css에 글로벌 스타일 적용하기
Global 컴포넌트를 @emotion/react 로 부터 가져온다
import { Global } from "@emotion/react";
import { globalStyles } from "../src/commons/styles/globalStyles";
Global 컴포넌트를 return값에 넣는다
export default function App({ Component, pageProps }: AppProps): JSX.Element {
return (
<ApolloSetting>
<>
<Global styles={globalStyles} />
<Layout>
<Component {...pageProps} />
</Layout>
</>
</ApolloSetting>
);
}
Global 컴포넌트는 <Component /> 의 부모 컴포넌트가 아닌데 어떻게 CSS가 <Component /> 에도 적용이 될까 ?
<Global> 컴포넌트는 내부적으로 <style> 태그를 생성하여 문서의 <head> 섹션에 삽입한다. 이렇게 삽입된 스타일은 전체 문서에 적용되므로, DOM 트리의 어느 위치에 있든 모든 컴포넌트에 영향을 준다.
다시 말하면, <Component /> 컴포넌트가 렌더링 될 때 이미 문서의 <head> 섹션에 <Global > css 가 적용이 된 상태이다.
폰트 적용하기
원하는 폰트를 아래의 경로에 다운받는다.
/public/fonts/파일명.ttfimport { css } from "@emotion/react";
export const globalStyles = css`
* {
margin: 0;
box-sizing: border-box;
font-size: 15px;
font-family: "myfont";
}
@font-face {
// 사용할 폰트의 이름을 정해준다
font-family: "myfont";
// /public 이 기본 경로이다.
src: url("/fonts/scifibit.ttf");
}
`;폰트를 렌더링하는 두가지 방식
FOIT ( Flash Of Invisible Text )
폰트 다운로드가 완료될 때 까지 텍스트가 보이지 않는다.
FOUT ( Flash Of Unstyled Text )
폰트 다운로드가 완료될 때 까지 기본 폰트의 텍스트가 보인다.
폰트의 용량
압축률이 높은 폰트일수록 다운로드 속도가 빠르다
경량화 폰트
잘 사용하지 않는 글씨를 제외한 경량화 폰트를 사용하는 방법도 있다.
Fallback-Font
설정한 폰트의 다운로드가 실패하면 그다음으로 지정된 폰트의 다운로드를 시도한다.
728x90
'Frontend 프론트엔드' 카테고리의 다른 글
| [ 39 ] 페이지네이션 - 이전페이지, 다음페이지 (0) | 2024.07.02 |
|---|---|
| [ 38 ] 페이지네이션-1 (0) | 2024.06.29 |
| [ 36 ] 컴포넌트 합성 (0) | 2024.06.27 |
| [ 35 ] 레이아웃 만들기 (0) | 2024.06.27 |
| [ 34 ] props 와 props.children (0) | 2024.06.25 |
