추천 작업 섹션 스타일링 - 7부

12830 단어 beginnersnextjswebdevjavascript
이제 recent post section이 있으므로 홈페이지의 마지막 부분을 살펴보겠습니다. 이것은 주요 작업 섹션이 될 것입니다.



디자인은 다음 요소를 보여줍니다. 여기에서 몇 가지 개요 항목을 볼 수 있습니다.
  • 어제 생성한 섹션 헤더
  • 작업 섹션

    • 추천 작품 섹션 스타일링


    featuredWork.js 라는 새 구성 요소를 만들어 시작하고 내부에서 매우 일반적인 구성 요소를 부트스트랩할 수 있습니다.

    import SectionHeader from './sectionHeader';

export default function FeaturedWork() {
  return (
    <section className='px-6'>
      <div className='max-w-4xl mx-auto py-12'>
        <SectionHeader title='Featured work' href='#' />
      </div>
    </section>
  );
}


    어제 만든 헤더를 재사용할 수 있음을 알 수 있습니다. 이제는 편리합니다.

    이 파일을 홈페이지로 가져오겠습니다.

    import Head from 'next/head';
import IntroHeader from '../components/introHeader';
import RecentPosts from '../components/recentPosts';
import FeaturedWork from '../components/featuredWork';

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


    여기에서 기사 구성 요소를 추가하는 데 중점을 두겠습니다.work.js 파일을 만들고 그 안에 기본 마크업을 배치합니다.

    export default function Work() {
  return (
    <article>
      <img src='https://via.placeholder.com/240' />
      <div>
        <h3>Work title</h3>
        <span>
          <date>2022</date> Tagname
        </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>
      </div>
    </article>
  );
}


    이 중 두 개를 featuredWork 구성 요소에 추가하여 진행 상황을 확인하겠습니다.

    import SectionHeader from './sectionHeader';
import Work from './work';

export default function FeaturedWork() {
  return (
    <section className='px-6'>
      <div className='max-w-4xl mx-auto py-12'>
        <SectionHeader title='Featured work' href='#' />
        <div className='flex flex-col gap-2'>
          <Work />
          <Work />
        </div>
      </div>
    </section>
  );
}


    나는 이미 몇 가지 클래스와 함께 래핑 div를 추가하여 공간을 조금 더 잘 배치했습니다.
    결과는 다음과 같습니다.



    여기에 몇 가지 스타일을 추가하여 시작하겠습니다.
    첫 번째는 래핑 요소입니다.

    <article className="flex items-center border-b-2 py-6"></article>


    이미지의 경우 너비를 항상 래퍼의 1/3로 설정할 수 있습니다.

    <img src="https://via.placeholder.com/240" className="w-1/3 mr-6 rounded-lg" />


    이제 게시물에 사용한 것과 동일한 제목으로 시작하는 텍스트 요소로 넘어갑니다.

    Note: You can also convert this into a custom heading component.



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


    날짜와 텍스트의 경우 래핑 div를 사용하여 태그의 스타일을 지정하고 날짜 태그를 사용하여 작은 알약 모양의 연도를 만듭니다.

    <span className="text-gray-600 mb-4 block">
  <date className="bg-blue-800 text-white px-5 py-1.5 mr-4 rounded-xl">
    2022
  </date>
  Dashboard
</span>


    그리고 그게 다야!
    오늘의 결과를 보도록 하겠습니다.



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

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



    제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나
    연결된 목록의 중간 노드 삭제
    【HTML】HTML로 GoogleMap 지도를 포함 표시

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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