목차

요구 해석

필요한 공통 css 설정은 네 가지다. break-point, 색상, 글자, 배경 설정.

+) RootLayout

<aside>

break-point와 색상은 @theme 안에 설정해 넣어주면 간단하게 끝난다.

글자는 글꼴 불러오기(1)와 글씨 설정(2)으로 나눠서 작업하면 된다.

1. 글씨 설정은 font.css (index)를 만들어서 RootLayout에 전역 적용한다.
2. 의존성을 줄이기 위해 글꼴을 웹 폰트로 변환해 사용해야 한다.

배경 설정은 “배경색, 기본 글씨색, 기본 글자의 크기/굵기”로 나뉜다.

+) RootLayout 설정까지 해야 공통 css다.

+) <main>에 css 설정(w, max-w, min-h-screen, mx-auto 등) 넣어줘야 한다…ㅠ

</aside>

변환 과정

<aside>

1. 공식 홈페이지에서 글꼴을 설치
2. https://transfonter.org/로 가서 .ttf를 WOFF/WOFF2로 변환
3. .woff 및 stylesheet.css가 들어 있는 폴더를 해당 프로젝트의 public - font 폴더로 옮김
4. [적용] @font-face </aside>