내가 Next.js 프로젝트를 생성하면 세팅하는 값들
우선 위와 같이 설정되어 있는 globals.css를 수정해준다.
@tailwind base;
@tailwind components;
@tailwind utilities;
html,
body {
max-width: 100vw;
height: 100vh;
}
싹 지우고 위와 같이 간단하게 해두기!
그리고 layout.tsx 파일로 가서 폰트와 언어를 바꾸어준다. 폰트는 이외의 다른 좋은 폰트도 많고, 따로 fonts폴더를 생성 후 원하는 폴더를 저장하고, tailwind.config.js파일에서 설정해줄 수도 있다! 이건 포스팅 하단에..🔥
import './globals.css'
import { Open_Sans } from 'next/font/google'
const sans = Open_Sans({ subsets: ['latin'] })
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="ko">
<body className={sans.className}>
<header>
{/* Navbar */}
</header>
<main>
{children}
</main>
</body>
</html>
)
}그리고 page.tsx로 들어가서 기본값으로 설정되어 있는 값들을 모두 지워준다.
더럽다.
import Image from 'next/image'
export default function Home() {
return (
<div>
<h1>Home Page - !</h1>
</div>
)
}이렇게 해두고 나중에 필요한 코드를 채워준다!
tailwind에 사용자 폰트 넣는 방법
위의 사진처럼 publuc 폴더 경로 안에 fonts라는 폴더를 생성해준 후, 다운로드 받은 폴더 파일을 넣으면 된다. 무료폴더는 눈누, 네이버폰트 등에서 검색 후 넣으면 된다!
- 아 그리고 global.css에 폰트 주소 (@font-family ~)를 복붙해주면 된다 ❣️
그리고 추후에 필요해지니 같은 경로 안에 images폴더 또한 생성해두었고, app폴더 안에 componets폴더 또한 생성해두었다.
필요없는 svg파일은 삭제해주자!
그리고 tailwind.config.js파일에 가서 설정을 해주어야 한다.
해당 파일은 최상위 경로 안에 위치해있다.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
backgroundImage: {
},
fontFamily: {
'omyu': ['omyu_pretty']
},
},
},
plugins: [],
}
위와 같이 fontFaily: { '': [''] } 형태로 추가해두면 되는데, 앞의 'omyu'가 우리가 코드를 쓸 때 사용하게 되는 이름이다.
실제로 코드 작성시,
<h1 className='font-omyu text-xl'>새로운 폰트 적용해보기</h1>위와 같이 작성하면 해당 텍스트만 다른 폰트가 적용되는 것을 확인할 수 있다!
🌸
왜..!