스티키 헤더 / 푸터

Coddy HTML 여정의 Practical Frontend 섹션에 포함된 레슨 — 35개 중 30번째.

스티키 헤더(또는 푸터)는 사용자가 스크롤할 때 페이지의 상단(또는 하단)에 고정되어 계속 표시됩니다. 이를 통해 사용자가 다시 위나 아래로 스크롤할 필요 없이 내비게이션이나 중요한 정보에 항상 접근할 수 있습니다.

일반적으로 다음과 같은 용도로 사용됩니다:

웹사이트 내비게이션 바 (고정 헤더)
“지금 구매” 또는 “문의하기” 바 (고정 푸터)
주요 작업이 화면에 계속 표시되어야 하는 모바일 앱

position: sticky 또는 position: fixed를 사용하여 스티키(sticky) 헤더나 푸터를 만들 수 있습니다.

예제 (스티키 헤더)

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; /* 스크롤을 생성하기 위함 */
}

챌린지

쉬움

헤더, 푸터, 그리고 메인 콘텐츠가 포함된 HTML 페이지가 주어집니다. 여러분의 작업은 헤더와 푸터를 sticky하게 만들어 항상 화면에 보이도록 하는 것입니다. 수행할 작업:

header를 페이지의 top에 고정시키세요.
footer를 페이지의 bottom에 고정시키세요.
헤더와 푸터에 배경색(흰색 제외)을 지정하고 텍스트를 가운데 정렬하세요.

사용자가 아무리 스크롤을 하더라도 헤더와 푸터가 항상 보여야 합니다.

치트 시트

스티키 헤더(또는 푸터)는 스크롤할 때 페이지의 상단(또는 하단)에 고정되어 표시되므로, 내비게이션이나 중요한 정보를 항상 확인할 수 있게 해줍니다.

position: sticky 또는 position: fixed를 사용하여 스티키 요소를 만듭니다:

HTML

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

<main>
  <p>Content here...</p>
</main>

CSS

header {
  position: sticky;
  top: 0;
}

footer {
  position: sticky;
  bottom: 0;
}

직접 해보기

<!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>