본문 바로가기
Dev/Next JS

[공식문서] NextJS - Assets, Metadata, and CSS #9

by ZEROGOON 2023. 8. 17.

레이아웃 개선하기

 

지금까지 우리는 개념을 설명하기 위해 최소한의 React 및 CSS 코드만 추가했습니다. 데이터 가져오기에 대한 다음 레슨으로 이동하기 전에 페이지 스타일링 및 코드를 개선해 보겠습니다.

components/layout.module.css 업데이트

먼저, 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 유틸리티 클래스 세트를 만들어 보겠습니다.

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;
}

 

이러한 유틸리티 클래스를 응용 프로그램 전체에서 재사용할 수 있으며, 심지어 global.css 파일에서 유틸리티 클래스를 사용할 수도 있습니다. 유틸리티 클래스는 글로벌 스타일, CSS 모듈, Sass 등의 방법보다 CSS 선택기를 작성하는 접근 방식을 나타냅니다. 유틸리티 퍼스트 CSS에 대해 자세히 알아보세요.

 

components/layout.js 업데이트하기

세 번째로, components/layout.js를 열고 다음 코드로 내용을 바꾸세요. Your Name을 실제 이름으로 바꿉니다.

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 태그(예: og:image)는 페이지 내용을 설명하는 데 사용됩니다.
  • 홈 prop은 제목과 이미지의 크기를 조정합니다.
  • home이 false이면 하단에 "홈으로 돌아가기" 링크 추가
  • next/image로 이미지를 추가하고 priority 속성을 사용하여 사전 로드

 

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>
  );
}

 

그런 다음 [Your Self Introduction]를 자기 소개로 대체하세요. 작성자의 프로필 예제를 보여드리겠습니다.

Next.js 공식문서 - 프로필 예제



이게 다입니다! 이제 우리는 다듬어진 레이아웃 코드를 갖추고 데이터 가져오기 레슨으로 넘어갈 준비가 되었습니다.

이번 레슨을 마무리하기 전에, Next.js의 CSS 지원과 관련된 유용한 기술에 대해 알아보겠습니다.

저작자표시 비영리 변경금지

'Dev > Next JS' 카테고리의 다른 글

[공식문서] NextJS - Pre-rendering and Data Fetching #1  (0) 2023.08.19
[공식문서] NextJS - Assets, Metadata, and CSS #10  (0) 2023.08.17
[공식문서] NextJS - Assets, Metadata, and CSS #8  (0) 2023.08.17
[공식문서] NextJS - Assets, Metadata, and CSS #7  (0) 2023.08.16
[공식문서] NextJS - Assets, Metadata, and CSS #6  (0) 2023.08.15

관련글

티스토리툴바