최근 게시물 스타일링 - 부품 6

이제 인트로 헤더 스타일이 지정되었으므로 홈페이지의 나머지 부분을 살펴보겠습니다.

여기에는 최근 게시물과 추천 작업 섹션의 두 섹션이 남아 있습니다.

여기서 주의할 사항이 있습니다.

섹션 머리글이 반복 요소입니다

.

최근 게시물 섹션의 배경이 다릅니다

.

그런 말로 첫 번째 작업을 시작하겠습니다.

최근 게시물 섹션 스타일 지정

정리된 상태를 유지하기 위해 새 구성 요소를 추가하여 시작하겠습니다.
구성 요소 구조에 recentPosts.js 파일을 추가했습니다.

주요 요소를 부트스트랩합시다.

export default function RecentPosts() {
  return (
    <section className='bg-blue-100'>
      <div className='max-w-4xl mx-auto py-12'>header</div>
    </section>
  );
}

그러면 내부에 더 작은 컨테이너가 있는 파란색 섹션이 이미 렌더링됩니다.
인트로 헤더 섹션에 사용한 것과 동일한 최대 너비를 사용합니다.

이미 아래 이미지처럼 보입니다.



언급했듯이 섹션 헤더 부분은 반복되므로 이 구성 요소를 쉽게 재사용할 수 있도록 만들어 봅시다.
sectionHeader.js 구성 요소를 만들고 내부에 다음 마크업을 넣습니다.

export default function SectionHeader() {
  return (
    <div>
      <h2>Title</h2>
      <a href='#'>View all</a>
    </div>
  );
}

recentPosts 구성 요소에 추가해 보겠습니다.

import SectionHeader from './sectionHeader';

export default function RecentPosts() {
  return (
    <section className='bg-blue-100 px-6'>
      <div className='max-w-4xl mx-auto py-12'>
        <SectionHeader />
      </div>
    </section>
  );
}

이제 섹션 헤더로 돌아가서 필요한 스타일을 추가하겠습니다.

먼저 flexbox 래퍼로 만들어야 합니다. 두 요소 사이에 공간을 두고 수평으로 중앙에 배치합니다.

<div className="flex justify-between items-center MB-8"></div>

h2 요소는 디자인의 크기를 반영해야 하며 굵은 글꼴이어야 합니다.

<h2 className="text-2xl font-bold"></h2>

마지막으로 단추를 더 깔끔하게 보이도록 스타일을 지정할 수 있습니다.

<a className="text-red-400 font-bold" href="#"></a>

이것은 이미 멋지게 보일 것입니다. 그러나 구성 요소는 여전히 정적입니다.
일부 데이터를 이 구성 요소에 전달할 수 있는지 확인하겠습니다.

export default function SectionHeader({ title, href }) {
  return (
    <div className='flex justify-between items-center MB-8'>
      <h2 className='text-2xl font-bold'>{title}</h2>
      <a className='text-red-400 font-bold' href={href}>
        View all
      </a>
    </div>
  );
}

이제 이 구성 요소를 가져올 때 제목과 href를 소품으로 전달할 수 있습니다.

<SectionHeader title='Recent posts' href='#' />

이제 기사 자체에 대해 작업하겠습니다. 보시다시피 서로 옆에 두 개가 있습니다.
이를 달성하는 쉬운 방법은 다음과 같이 그리드로 래핑하는 것입니다.

<div className='grid grid-cols-2 gap-6'></div>

이제 article.js라고 하는 다른 구성 요소를 추가해 보겠습니다.
지금은 각 기사가 동일하도록 정적 데이터를 사용합니다.

export default function Article() {
  return (
    <article>
      <h3>Post Title</h3>
      <span>
        <date>12 Feb 21</date> | Design System
      </span>
      <p>
        Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet
        sint. Velit officia consequat duis enim velit mollit. Exercitation
        veniam consequat sunt nostrud amet.
      </p>
    </article>
  );
}

기본 기사 요소에 몇 가지 스타일을 추가하여 시작하겠습니다.

<article className="bg-white p-4 rounded-lg"></article>

그런 다음 제목 요소로 이동합니다.

<h3 className="text-2xl mb-2 font-medium"></h3>

그리고 날짜 및 태그 요소의 경우.

<span className="text-gray-600 mb-4 block"></span>

이제 최근 게시물 구성 요소로 돌아가서 두 개의 기사 구성 요소를 추가하십시오.

<div className='grid grid-cols-2 gap-6'>
  <Article />
  <Article />
</div>

우리가 지금 얼마나 멀리 보자.



와우, 디자인처럼 보이기 시작했습니다. 훌륭합니다!

GitHub에서 코드를 찾을 수 있습니다.

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

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나