본 글에서는 프로필 페이지를 스타일링하고 코드를 다듬어 보겠습니다.
components/layout.module.css 업데이트
레이아웃과 프로필 사진의 내용을 다음과 같이 바꿉니다:
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
}
.header {
display: flex;
flex-direction: column;
align-items: center;
}
.backToHome {
margin: 3rem 0 0;
}
styles/utils.module.css 생성
두번째로, 여러 컴포넌트에서 재사용할 수 있는 CSS 유틸리티 class 세트(텍스트 스타일용)를 만들어 보겠습니다.
styles/utils.module.css라는 새 CSS 파일에 다음 내용을 추가합니다:
.heading2Xl {
font-size: 2.5rem;
line-height: 1.2;
font-weight: 800;
letter-spacing: -0.05rem;
margin: 1rem 0;
}
.headingXl {
font-size: 2rem;
line-height: 1.3;
font-weight: 800;
letter-spacing: -0.05rem;
margin: 1rem 0;
}
.headingLg {
font-size: 1.5rem;
line-height: 1.4;
margin: 1rem 0;
}
.headingMd {
font-size: 1.2rem;
line-height: 1.5;
}
.borderCircle {
border-radius: 9999px;
}
.colorInherit {
color: inherit;
}
.padding1px {
padding-top: 1px;
}
.list {
list-style: none;
padding: 0;
margin: 0;
}
.listItem {
margin: 0 0 1.25rem;
}
.lightText {
color: #666;
}
components/layout.js 업데이트
components/layout.js를 열고 해당 내용을 다음 코드로 바꾸고 사용자 이름을 실제 이름으로 변경합니다:
import Head from 'next/head';
import Image from 'next/image';
import styles from './layout.module.css';
import utilStyles from '../styles/utils.module.css';
import Link from 'next/link';
const name = 'Your Name';
export const siteTitle = 'Next.js Sample Website';
export default function Layout({ children, home }) {
return (
<div className={styles.container}>
<Head>
<link rel="icon" href="/favicon.ico" />
<meta
name="description"
content="Learn how to build a personal website using Next.js"
/>
<meta
property="og:image"
content={`https://og-image.vercel.app/${encodeURI(
siteTitle,
)}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
/>
<meta name="og:title" content={siteTitle} />
<meta name="twitter:card" content="summary_large_image" />
</Head>
<header className={styles.header}>
{home ? (
<>
<Image
priority
src="/images/profile.jpg"
className={utilStyles.borderCircle}
height={144}
width={144}
alt=""
/>
<h1 className={utilStyles.heading2Xl}>{name}</h1>
</>
) : (
<>
<Link href="/">
<Image
priority
src="/images/profile.jpg"
className={utilStyles.borderCircle}
height={108}
width={108}
alt=""
/>
</Link>
<h2 className={utilStyles.headingLg}>
<Link href="/" className={utilStyles.colorInherit}>
{name}
</Link>
</h2>
</>
)}
</header>
<main>{children}</main>
{!home && (
<div className={styles.backToHome}>
<Link href="/">← Back to home</Link>
</div>
)}
</div>
);
}
추가된 내용을 요약하면 다음과 같습니다:
- 페이지의 콘텐츠를 설명하는 데 사용되는 meta tags(og:image)
- home props => "home" 일 경우 타이틀과 이미지 사이즈 조정
- "home" 이 false인 경우 하단에 '홈으로 돌아가기' 링크 표시
- priority 속성으로 preload되는 next/image 이미지가 추가되었습니다.
pages/index.js 업데이트하기
마지막으로 인덱스 페이지를 업데이트해 보겠습니다.
pages/index.js를 열고 해당 내용을 다음과 같이 바꿉니다:
import Head from 'next/head';
import Layout, { siteTitle } from '../components/layout';
import utilStyles from '../styles/utils.module.css';
export default function Home() {
return (
<Layout home>
<Head>
<title>{siteTitle}</title>
</Head>
<section className={utilStyles.headingMd}>
<p>[Your Self Introduction]</p>
<p>
(This is a sample website - you’ll be building a site like this on{' '}
<a href="https://nextjs.org/learn">our Next.js tutorial</a>.)
</p>
</section>
</Layout>
);
}텍스트를 본인의 이야기로 바꿔주면 프로필 완성입니다.
'개발 > Next.js' 카테고리의 다른 글
| [Docs] 두 가지 형태의 프리렌더링 (0) | 2023.05.09 |
|---|---|
| [Docs] 프리렌더링(Pre-rendering) (0) | 2023.05.09 |
| [Docs]전역 스타일 적용하기 (0) | 2023.05.07 |
| [Docs] CSS 스타일링 & Layout 컴포넌트 (0) | 2023.05.07 |
| [Docs] 서드파티 자바스크립트 추가하기 (0) | 2023.05.07 |