머리글 및 바닥글 스타일 지정 - 4부

이제 기본 레이아웃이 있으므로 머리글과 바닥글을 디자인과 비슷하게 스타일링하는 방법에 대해 살펴보겠습니다.

참고로 제가 고른 디자인은 이렇게 생겼습니다. 원으로 표시된 머리글과 바닥글을 볼 수 있습니다.

머리글 스타일 지정

헤더부터 시작하겠습니다.

재밍을 시작하기 전에 코드를 더 깔끔하게 보이게 하는 데 도움이 되는 새 구성 요소를 만들어 보겠습니다.
구성요소 디렉토리에 header.js 파일을 추가할 수 있습니다.

나는 대략적인 개요를 먼저 설정하는 데 도움이 되는 모의 값을 기반으로 작업하는 것을 좋아합니다.

export default function Header() {
  return (
    <header>
      <a href='/'>
        <svg
          aria-label='Daily Dev Tips logo'
          xmlns='http://www.w3.org/2000/svg'
          width='30'
          height='24'
        >
          <path
            d='M 13.073 23.977 L 10.214 23.147 C 9.914 23.063 9.746 22.748 9.83 22.448 L 16.228 0.406 C 16.312 0.106 16.626 -0.063 16.926 0.022 L 19.785 0.851 C 20.085 0.936 20.254 1.25 20.17 1.55 L 13.772 23.592 C 13.683 23.892 13.373 24.066 13.073 23.977 Z'
            fill='rgb(255,188,61)'
          ></path>
          <path
            d='M 9.769 16.542 C 9.985 16.312 9.971 15.946 9.732 15.735 L 5.485 11.999 L 9.732 8.263 C 9.971 8.052 9.989 7.686 9.769 7.457 L 7.73 5.281 C 7.519 5.056 7.163 5.042 6.933 5.258 L 0.179 11.587 C -0.06 11.807 -0.06 12.187 0.179 12.407 L 6.933 18.74 C 7.163 18.956 7.519 18.947 7.73 18.717 Z'
            fill='rgb(218,0,96)'
          ></path>
          <path
            d='M 23.066 18.745 L 29.821 12.412 C 30.06 12.191 30.06 11.812 29.821 11.591 L 23.066 5.253 C 22.841 5.042 22.485 5.052 22.27 5.277 L 20.231 7.452 C 20.015 7.682 20.029 8.047 20.268 8.258 L 24.515 11.999 L 20.268 15.735 C 20.029 15.946 20.01 16.312 20.231 16.542 L 22.27 18.717 C 22.48 18.947 22.837 18.956 23.066 18.745 Z'
            fill='rgb(0,185,232)'
          ></path>
        </svg>
      </a>
      <nav>
        <ul>
          <li>
            <a href='#'>Blog</a>
          </li>
          <li>
            <a href='#'>Work</a>
          </li>
          <li>
            <a href='#'>Contact</a>
          </li>
        </ul>
      </nav>
    </header>
  );
}

이것은 대략 우리의 주요 구조가 될 것입니다. 저는 로고를 SVG로 추가했지만 이미지 태그를 사용해도 됩니다.

이 구성 요소를 사용하기 위해 어제 만든 레이아웃도 변경해 보겠습니다.

import Header from './header';

export default function Layout({ children }) {
  return (
    <>
      <Header />
      <main>{children}</main>
      <footer>&copy; 2022 - Our portfolio</footer>
    </>
  );
}

이제 프로젝트를 실행하면 헤더가 아무 것도 아닌 것처럼 보이지만 모든 요소가 있는 것을 볼 수 있습니다.



일부 Tailwind 클래스를 추가하여 좀 더 매력적으로 만들어 보겠습니다.

헤더 요소에 다음 클래스를 사용하여 컨테이너를 추가할 수 있습니다.

<header className="container mx-auto"></header>

그런 다음 flexbox를 사용하여 로고를 왼쪽으로, 메뉴를 오른쪽으로 분할하려고 합니다.

<header className="container mx-auto flex justify-between"></header>

마지막으로 높이를 설정하고 요소를 수직으로 가운데에 배치하려고 합니다.

<header
  className="container mx-auto flex justify-between h-24 items-center"
></header>

이것은 이미 꽤 좋아 보인다!



로고가 좋은 위치에 보입니다. 그러나 메뉴 항목의 스타일을 좀 더 잘 지정해야 합니다.
변경하려는 첫 번째 사항은 항목을 서로 아래가 아닌 서로 옆에 두는 것입니다.

<ul className="flex"></ul>

예, flexbox를 사용하는 것만큼 간단합니다.
다음 부분은 그들에게 조금 더 많은 공간을 제공하는 것입니다. 이를 위해 몇 가지 옵션이 있지만 가장 쉬운 방법은 간격을 사용하는 것입니다.

<ul className="flex gap-6"></ul>

마지막으로 글꼴 크기가 중간이므로 ul에 추가해 보겠습니다.

<ul className="flex gap-6 font-medium"></ul>

그리고 예, 최소한의 스타일이지만 헤더가 이미 멋져 보입니다!

Note: We haven't done responsive styling yet, which we'll tackle later.

바닥글 스타일 지정

자, 헤더가 완료되면 바닥글로 이동하겠습니다.footer.js 파일을 생성하여 시작합니다.

export default function Footer() {
  return (
    <footer>
      <nav>
        <ul>
          <li>
            <a href='#'>
              <svg></svg>
            </a>
          </li>
          <li>
            <a href='#'>
              <svg></svg>
            </a>
          </li>
          <li>
            <a href='#'>
              <svg></svg>
            </a>
          </li>
        </ul>
      </nav>
      <p>&copy; 2022 Chris Bongers. All rights reserved.</p>
    </footer>
  );
}

Note: I found these SVGs online on icons8 website. You can find the full SVG code in the GitHub repo.

이제 이 바닥글을 레이아웃으로 가져옵니다.

import Header from './header';
import Footer from './footer';

export default function Layout({ children }) {
  return (
    <>
      <Header />
      <main>{children}</main>
      <Footer />
    </>
  );
}

또한 모든 것이 있는 것처럼 보이지만 다시 스타일이 지정되지 않았습니다.



가장 먼저 해야 할 일은 컨테이너를 추가하고 바닥글 내부의 모든 것을 중앙에 배치하는 것입니다.
나중에 더 많은 자유를 주기 때문에 사물을 중앙에 배치하기 위해 flexbox를 선택합니다.

<footer className="container mx-auto flex justify-center"></footer>

이제 소셜 아이콘이 텍스트 위에 있는지 확인하겠습니다. flex-direction을 설정하여 이를 달성할 수 있습니다.

<footer
  className="container mx-auto flex justify-center flex-col items-center"
></footer>

이것은 다시 꽤 좋아 보입니다. 더 많은 공간을 제공하기 위해 바닥글의 높이를 조정하고 설정해 보겠습니다.

<footer
  className="container mx-auto flex justify-center flex-col items-center h-60"
></footer>

이제 소셜 아이콘이 서로 옆에 있는지 확인하겠습니다.
여기 있는 동안 간격도 다시 추가합니다.

<ul className="flex gap-6"></ul>

이제 바닥글 요소로 돌아가서 여기에 아이콘과 텍스트 사이의 공간에 간격을 추가해 보겠습니다.

<footer
  className="container mx-auto flex justify-center flex-col items-center h-60 gap-10"
></footer>

이제 남은 것은 텍스트의 스타일을 다르게 지정하는 것입니다.
우리는 색상과 크기를 변경할 것입니다.

<p className="text-sm text-slate-500"></p>

그리고 그게 다야. 바닥글은 이제 디자인과 비슷해 보입니다.



GitHub에서 모든 SVG 마크업이 포함된 전체 코드를 찾을 수도 있습니다.

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

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