홈페이지 머리글 스타일 지정 - 5부

우리는 이미 이 Next.js 포트폴리오 시리즈의 5부를 진행 중이며 이 시리즈의 홈페이지 요소를 스타일링할 것입니다.

이전 기사에서 머리글과 바닥글의 스타일을 지정했으므로 다음 단계로 넘어갈 시간입니다.

디자인 분석

그리고 다시 한 번 디자인을 분석하여 무엇을 재사용할 수 있는지 확인해야 합니다.

홈페이지에 세 개의 섹션이 있음을 알 수 있습니다.

인트로 헤더

최근 게시물

추천 작품

또한 반복되는 요소가 섹션 머리글임을 빠르게 파악할 수도 있습니다. (아래 이미지에서 보라색 선으로 표시)



섹션별로 문제를 해결하는 것을 좋아하므로 헤더 부분부터 시작하겠습니다.

인트로 헤더 스타일 지정

첫째, 각 섹션은 헤더 섹션과 다른 자체 컨테이너를 갖게 된다는 점에 유의하는 것이 좋습니다.

이제 구성 요소에 introHeader.js라는 새 파일을 만들어 보겠습니다.

이와 같은 요소를 와이어프레이밍하는 것으로 시작하겠습니다.

export default function IntroHeader() {
  return (
    <header>
      <div>
        <div>
          <h1>
            Hi, I'm Chris!
            <br />
            Creative Developer
          </h1>
          <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>
          <a href='#'>Check my work</a>
        </div>
        <span>
          <img src='profile.png' />
        </span>
      </div>
    </header>
  );
}

모든 것이 서로 아래에 동일한 글꼴 스타일로 배치되므로 아직 많이 보이지는 않습니다.
그러나 우리는 모든 스타일링을 시작할 수 있는 훌륭한 설정을 가지고 있습니다.



헤더를 flexbox로 변환하여 시작하겠습니다. 이렇게 하면 텍스트 div와 이미지가 서로 옆에 있게 됩니다.

<div className="flex"></div>

또한 텍스트와 이미지 사이의 간격을 발견할 수 있으며 다음과 같이 달성할 수 있습니다.

<div className="flex gap-14"></div>

완벽하지는 않지만 이미 올바른 것이 되는 것을 볼 수 있습니다.



여전히 해야 할 한 가지는 최대 너비가 900픽셀이고 모바일 보기를 위해 측면에 약간의 간격이 있는지 확인하는 것입니다.

<header className="px-6">
  <div className="max-w-4xl mx-auto flex gap-14"></div>
</header>

이를 달성하는 방법에는 여러 가지가 있으며, 가장 작은 보기에 대한 패딩을 헤더에 제공하고 내부 div에 최대 너비를 추가하여 간격을 두는 방법입니다.

이제 텍스트 쪽 스타일 지정을 시작하겠습니다.
우리가 할 수 있는 첫 번째 일은 h1 헤더의 스타일을 지정하는 것입니다.
저는 인라인 클래스를 사용할 예정이지만 결국에는 이것을 공유 스타일로 옮길 수 있습니다.

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

그런 다음 아래 단락으로 넘어갑니다.

<p className="text-lg mb-6"></p>

마지막으로 버튼 요소입니다.

<a href="#" className="bg-red-400 text-white px-6 py-3 text-lg rounded"></a>

Note: The button has no hover state, which I'll leave up to you 👀

왼쪽이 완료되면 이미지에 집중할 수 있습니다.
둥글게 만드는 것이 쉬울 것이지만 그림자 효과로도 볼 수 있습니다.
래핑 범위 요소에 이 효과를 추가해야 합니다.

<span
  className="m-5 inline-block before:w-full before:aspect-square before:-left-1.5 before:top-1.5 before:block before:absolute before:bg-red-400 relative z-0 before:rounded-full"
></span>

상당히 많은 양의 코드가 있고 Tailwind가 약간 지저분해지는 부분입니다. 그것은 기술적으로 우리가 오프셋 스타일을 지정하는 이전 요소를 추가합니다.

그런 다음 이미지는 이것 위에 상대적일 수 있습니다.

<img
  src="profile.png"
  width="240"
  height="240"
  alt="Image of Chris"
  className="z-10 relative rounded-full"
/>

이제 어떻게 보이는지 봅시다.



지금 디자인이랑 거의 비슷해요!

소스코드를 보고 싶으시면 Github에 올려두었습니다.

내일 우리는 다른 홈페이지 조각을 보고 그에 따라 스타일을 지정합니다.

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

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