스티키 헤더 / 푸터

Coddy HTML 여정의 실전 프론트엔드 섹션에 포함된 레슨. 35개 중 30번째.

sticky header(또는 footer)는 사용자가 페이지를 scroll할 때 페이지의 top(또는 bottom)에 계속 표시됩니다. 이렇게 하면 사용자가 다시 scroll할 필요 없이 navigation이나 중요한 정보에 항상 접근할 수 있습니다.

다음과 같은 용도로 흔히 사용됩니다:

Website 탐색 바 (sticky header)
“지금 구매” 또는 “Contact” 바 (sticky footer)
핵심 작업이 화면에 계속 stay해야 하는 모바일 앱

position: sticky 또는 position: fixed를 사용하여 sticky header 또는 footer를 만들 수 있습니다.

예시 (Sticky Header)

HTML

<header>
  <h1>My Website</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
</header>

<main>
  <p>Lots of content here...</p>
  <p>Keep scrolling down to see the header stay in place.</p>
</main>

CSS

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

header {
  position: sticky;
  top: 0;
}

main {
  padding: 2rem;
  height: 2000px; /* just to create scroll */
}

챌린지

쉬움

header, footer, 그리고 main content가 있는 HTML 페이지가 주어집니다. 당신의 과제는 header와 footer를 sticky로 만들어 그들이 항상 stay 보이도록 하는 것입니다. 당신의 과제:

header를 페이지의 top에 붙이세요.
footer를 페이지의 bottom에 붙이세요.
header와 footer에 background color (흰색이 아닌)와 가운데 정렬된 text를 주세요.

사용자는 how much they scroll 하더라도 항상 header와 footer를 see 해야 합니다.

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <title>Sticky Header / Footer</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      line-height: 1.6;
      background-color: #f4f4f4;
    }

    header {
      z-index: 100;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

    footer {
      margin-top: auto;
      z-index: 100;
      box-shadow: 0 -2px 6px rgba(0,0,0,0.2);
    }

    main {
      flex: 1;
      padding: 2rem;
      max-width: 800px;
      margin: 0 auto;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    h1, h2 {
      color: #333;
    }

    h2 {
      margin-top: 1.5rem;
    }

    p {
      margin-bottom: 1rem;
    }
  </style>
</head>
<body>

  <header>
    <h1>Secrets of Longevity</h1>
  </header>

  <main>
    <h2>What Are Blue Zones?</h2>
    <p>Blue Zones are regions of the world where people live much longer than average. Researchers identified several key areas, including Okinawa (Japan), Sardinia (Italy), Nicoya (Costa Rica), Ikaria (Greece), and Loma Linda (California, USA).</p>

    <h2>Common Habits of Long-Lived People</h2>
    <p>People in Blue Zones often share similar lifestyle habits that contribute to longevity:</p>
    <ul>
      <li>Plant-based diets rich in vegetables, beans, and whole grains.</li>
      <li>Regular physical activity integrated into daily life, like walking or gardening.</li>
      <li>Strong social connections and family support.</li>
      <li>Stress reduction through meditation, prayer, or relaxation rituals.</li>
      <li>Having a sense of purpose, which motivates daily life.</li>
    </ul>

    <h2>Why Longevity Matters</h2>
    <p>Studying Blue Zones helps us understand how lifestyle, diet, and community can increase lifespan and improve quality of life. Adopting even a few of these habits can lead to a healthier, happier life.</p>

    <p>Remember, longevity isn’t just about living longer — it’s about living well.</p>
  </main>

  <footer>
    <p>&copy; 2025 Longevity Insights</p>
  </footer>

</body>
</html>