global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
html,
body {
height: 100vh;
overflow-y: auto;
}
layout.tsx
import Header from '@/components/Header'
import './globals.css'
import { Open_Sans } from 'next/font/google'
import Footer from '@/components/Footer'
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="en" className={sans.className}>
<body className='flex flex-col w-full max-w-screen-2xl mx-auto'>
<Header />
<main className='grow bg-sky-400'>{children}</main>
<Footer />
</body>
</html>
)
}
body
import Link from "next/link";
export default function Header() {
return (
<header className="flex justify-between items-center p-4">
<Link href='/'>
<h1 className="text-3xl font-bold">My Blog</h1>
</Link>
<nav className="flex gap-4">
<Link href='/'>Home</Link>
<Link href='/about'>About</Link>
<Link href='/posts'>Posts</Link>
<Link href='/contact'>Contact</Link>
</nav>
</header>
)
}
gap-4
는 각 요소의 갭을 16px씩 주는 거다.