-
#2 헤더 UI 만들기Web/Next 2023. 6. 1. 03:00
먼저 기존 화면에서 이와같이 UI를 변경하였다.
변경하다보니 헤더는 모든 ui에서 유지되어야 함으로 page.tsx에서 layout.tsx로 헤더를 이동하였다.
import './globals.css' import { Inter } from 'next/font/google' import Link from "next/link"; const inter = Inter({ 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"> <body className={inter.className}> <header> <div className={'logo'}> <Link href={'/'}>Oneho.no Portfolio</Link> </div> <div className={'header'}> <Link href={'contents/about'}>어바웃</Link> <Link href={'contents/stack'}>기술스택</Link> <Link href={'contents/project'}>프로젝트</Link> <Link href={'contents/resume'}>이력서 다운로드</Link> </div> </header> <main className="flex min-h-screen flex-col items-center justify-between p-24"> {children} </main> </body> </html> ) }src/layout.tsx 의 코드 전문이다.
프로젝트와 이력서 다운로드의 위치를 변경하였고
globals.css에 헤더관련 css를 추가하여 스크롤이 되어도 헤더는 상단에 고정되도록 하였다.
header { position: fixed; top: 0; /* width: 100% */ left: 0; right: 0; } .logo { position: absolute; font-size: 22px; width: 320px; height: 24px; left: 20pt; top: 15pt; } a { font-size: 24px; font-weight: bold; }이후 들어갈 내용들은 {children} 으로 들어가게 되며 들어갈 내용들은 차차 채워 나갈 예정이다.
'Web > Next' 카테고리의 다른 글
#1 컨텐츠 구상 (0) 2023.06.01 Next js + TS 로 포트폴리오 사이트 만들기#프롤로그 (0) 2023.06.01