global.css와 tailwind로 푸터 바닥 고정
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- flex column으로 헤더, 내용, 푸터 세로 정렬
- width를 꽉 차게 두고, 최대 width를 2xl로 지정
- 화면이 커졌을 때 가운데 정렬을 위해 mx-auto(margin 양쪽)
gap을 이용해 간격 조정
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씩 주는 거다.- gap은 flex나 grid에서만 먹힌다.
쿼카에요