블로그 페이지 만들기 - 8부

10990 단어 beginnersnextjswebdevjavascript
이제 홈페이지가 준비되었으므로 블로그 페이지를 다루겠습니다.
디자인에서 블로그 페이지가 어떻게 보이는지 상기시켜줍니다.



홈페이지용으로 만든 블로그 요소를 재사용할 수 있기를 바랍니다.

그것은 다양한 영역에서 구성 요소를 재사용하는 아름다운 세상입니다.

시작하자!

블로그 페이지 만들기



가장 먼저 할 일은 페이지가 존재하는지 확인하는 것입니다.
blog.js 디렉토리에 pages라는 새 파일을 만들고 다음 마크업을 사용합니다.

import Head from 'next/head';

export default function Blog() {
  return (
    <div>
      <Head>
        <title>NextJS Blog</title>
        <meta name='description' content='Generated by create next app' />
        <link rel='icon' href='/favicon.ico' />
      </Head>
      <h1>Blog</h1>
    </div>
  );
}




레이아웃을 만들었기 때문에 머리글과 바닥글이 이미 있어야 합니다.
이제 블로그를 나타내는 제목을 렌더링한 내부 부분의 스타일을 지정해야 합니다.

우리가 해결하고 싶은 첫 번째 일은 요소가 컨테이너 내부에 있고 더 작은 화면을 위한 패딩이 있는 것입니다. 당연히 우리는 우리가 선택한 레이아웃 스타일로 두 개의 요소를 사용해야 합니다. (하나를 선택할 수 있지만 픽셀이 완벽하지 않고 요소가 더 작아집니다.)

<section className="px-6">
  <div className="max-w-4xl mx-auto">
    <h1>Blog</h1>
  </div>
</section>


그런 다음 이 제목 요소에 스타일을 추가해 보겠습니다.

<h1 className="text-3xl font-bold mb-6 p-4">Blog</h1>


지금까지의 모습을 살펴보자.



그것이 바로 우리가 찾고 있는 것입니다. 더미 데이터로 articles we created before의 일부를 추가해 보겠습니다.

import Head from 'next/head';
import Article from '../components/article';

export default function Blog() {
  return (
    <div>
      <Head>
        <title>NextJS Blog</title>
        <meta name='description' content='Generated by create next app' />
        <link rel='icon' href='/favicon.ico' />
      </Head>
      <section className='px-6'>
        <div className='max-w-4xl mx-auto'>
          <h1 className='text-3xl font-bold mb-6'>Blog</h1>
          <Article />
          <Article />
          <Article />
          <Article />
        </div>
      </section>
    </div>
  );
}


변경 없이 어떻게 보이는지 봅시다.



이미 거의 다 왔어요, 그렇죠?
내가 보고 있는 유일한 문제는 홈페이지에서 필요하지 않았기 때문에 이러한 항목에 대한 아래쪽 테두리 부분을 렌더링하지 않는다는 것입니다.

여기에는 두 가지 옵션이 있습니다. 단순히 className을 전달하고 상속하거나 옵션으로 설정할 수 있습니다.
나중에 다른 용도로 사용할 수 있으므로 className 접근 방식이 일반적으로 더 좋습니다.
article.js 파일을 열고 className에 대한 소품을 추가해 보겠습니다.

export default function Article({className = 'rounded-lg'}) {

});


여기서는 기본적으로 className라는 새 소품을 할당합니다. 세부 페이지에 사용하고 싶지 않기 때문에 rounded-lg 클래스를 거기에 넣었습니다.

이제 이 구성 요소에서 이 className을 다음과 같이 사용할 수 있습니다.

<article className="{`bg-white" p-4 ${className}`}></article>

blog.js 파일로 돌아가서 테두리를 포함하도록 수정해 보겠습니다.

<Article className='border-b-2' />
<Article className='border-b-2' />
<Article className='border-b-2' />
<Article className='border-b-2' />


그래, 그게 다야!
우리가 얻은 것을 확인하고 그것이 디자인과 일치하는지 봅시다.



그것으로 꽤 행복합니다!

GitHub에서 완성된 코드를 찾을 수도 있습니다.

읽어주셔서 감사합니다. 연결합시다!



제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나
Shirates에서 선택자 표현식을 사용하는 방법
Many2one의 필드에 저장된 도메인 사용

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage