콘텐츠로 이동

직접 만들어 보기 - 헤더

여러분의 사이트는 다양한 장치에서 표시되므로 이제 다양한 화면 크기에 반응할 수 있는 페이지 탐색을 만들 차례입니다!

이번에 배울 내용

  • 탐색 컴포넌트가 포함된 사이트 헤더를 만들기
  • 탐색 컴포넌트를 반응형으로 만들기

직접 시도해 보기 - 새로운 Header 컴포넌트를 만들어 보세요.

  1. 새 헤더 컴포넌트를 만듭니다. <header> 요소 내부에 있는 <nav> 요소 내에서 기존 Navigation.astro 컴포넌트를 가져와 사용합니다.

    코드 확인하기!

    src/components/에 Header.astro라는 파일을 만듭니다.

    ---
import Navigation from './Navigation.astro';
---
<header>
  <nav>
    <Navigation />
  </nav>
</header>

직접 시도해 보기 - 페이지 업데이트

  1. 각 페이지에서 기존 <Navigation/> 컴포넌트를 새 헤더로 바꿉니다.

    코드 확인하기!

    ---
import Navigation from '../components/Navigation.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Home Page";
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <Navigation />
    <Header />
    <h1>{pageTitle}</h1>
    <Footer />
  </body>
</html>

  2. 브라우저 미리보기를 확인하고 헤더가 모든 페이지에 표시되는지 확인하세요. 아직 달라 보이지는 않지만 개발 도구를 사용하여 미리보기를 검사하면 이제 탐색 링크 주위에 <header> 및 <nav>와 같은 요소가 있는 것을 볼 수 있습니다.

반응형 스타일 추가

  1. 탐색 링크를 제어하려면 CSS 클래스로 Navigation.astro를 업데이트하세요. 기존 네비게이션 링크를 nav-links 클래스와 main-menu id 속성을 가진 <div> 태그로 감싸세요.

    ---
---
<div id="main-menu" class="nav-links">
  <a href="/">Home</a>
  <a href="/about/">About</a>
  <a href="/blog/">Blog</a>
</div>

  2. 아래 CSS 스타일을 global.css에 복사하세요. 이러한 스타일은 다음과 같습니다.

    • 모바일용 탐색 링크 스타일 및 위치를 지정합니다.
    • 더 큰 화면 크기에 맞게 다양한 스타일을 정의하려면 @media 쿼리를 사용하세요.

    :::tip[모바일 우선 디자인]먼저 작은 화면 크기에서 어떤 일이 발생해야 하는지 정의하는 것부터 시작하세요! 화면 크기가 작을수록 더 간단한 레이아웃이 필요합니다. 그런 다음 더 큰 장치에 맞게 스타일을 조정하세요. 복잡한 케이스를 먼저 디자인했다면, 다시 단순하게 만들려고 노력해야 합니다.:::

    html {
  background-color: #f1f5f9;
  font-family: sans-serif;
}

body {
  margin: 0 auto;
  width: 100%;
  max-width: 80ch;
  padding: 1rem;
  line-height: 1.5;
}

* {
  box-sizing: border-box;
}

h1 {
  margin: 1rem 0;
  font-size: 2.5rem;
}

/* nav 스타일 */

.nav-links {
  width: 100%;
  display: none;
  margin: 0;
}

.nav-links a {
  display: block;
  text-align: center;
  padding: 10px 0;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #0d0950;
}

.nav-links a:hover,
.nav-links a:focus {
  background-color: #ff9776;
}

@media screen and (min-width: 636px) {
  .nav-links {
    margin-left: 5em;
    display: block;
    position: static;
    width: auto;
    background: none;
  }

  .nav-links a {
    display: inline-block;
    padding: 15px 20px;
  }
}

창 크기를 조정하고 다양한 화면 너비에 적용되는 다양한 스타일을 찾아보세요. 이제 헤더는 @media 쿼리를 사용하여 화면 크기에 반응합니다.

체크리스트

참고 자료

기여하기 커뮤니티 후원하기