실전 — 헤더·내비

🎯 학습 목표

이 강을 마치면 여러분은 지금까지 배운 것을 종합해, 실제 웹사이트의 얼굴인 헤더와 내비게이션 메뉴를 직접 만들 수 있게 됩니다. 이번 강부터는 개별 개념이 아니라, 그것들을 조합해 실제 결과물을 만드는 실전입니다. 헤더는 거의 모든 웹사이트에 있는 요소이니, 이것을 만들 수 있으면 큰 자신감이 붙습니다.

구체적으로는 세 단계로 만듭니다. 첫째, 시맨틱 태그로 헤더의 뼈대를 세웁니다. 둘째, Flexbox로 로고와 메뉴를 배치합니다. 셋째, 호버 효과와 반응형으로 완성도를 높입니다.

🦴 1단계 — 헤더의 뼈대 세우기

이 섹션에서는 먼저 HTML로 헤더의 구조를 만들겠습니다.

8강에서 배운 시맨틱 태그를 활용합니다. 전체를 <header>로 감싸고, 그 안에 로고와 메뉴(<nav>)를 넣습니다. 메뉴의 각 항목은 4강에서 배운 목록과 링크로 만듭니다.

<header class="site-header">
  <div class="logo">MySite</div>
  <nav>
    <ul class="menu">
      <li><a href="#">홈</a></li>
      <li><a href="#">소개</a></li>
      <li><a href="#">서비스</a></li>
      <li><a href="#">문의</a></li>
    </ul>
  </nav>
</header>

구조를 읽어 봅시다. <header> 안에 로고(<div class="logo">)와 메뉴(<nav>)가 나란히 있고, 메뉴는 <ul> 목록 안에 네 개의 링크가 들어 있습니다. 참고로 링크의 href="#"는 아직 갈 곳을 정하지 않았을 때 임시로 쓰는 값입니다. 지금은 배치가 목적이니 이렇게 두었습니다. 이대로 브라우저에서 보면 로고와 메뉴가 세로로 쌓여 있습니다. 이제 이것을 가로로 배치해 봅시다.

📐 2단계 — Flexbox로 배치하기

이 섹션에서는 16·17강의 Flexbox로 로고와 메뉴를 양 끝에 배치하겠습니다.

헤더의 전형적인 모습은 로고는 왼쪽, 메뉴는 오른쪽입니다. 17강에서 배운 justify-content: space-between이 바로 이 배치에 딱 맞습니다. 헤더에 Flexbox를 적용합니다.

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
}

이 코드로 로고와 메뉴가 양 끝으로 갈라지고, align-items: center로 세로 가운데 정렬됩니다. 다음으로 메뉴 항목들도 가로로 나란히 놓아야 합니다. <ul>은 원래 세로 목록이니, 여기에도 Flexbox를 줍니다.

.menu {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

여기서 display: flex와 gap: 24px으로 메뉴 항목들을 가로로, 일정 간격을 두고 배열합니다. 그리고 list-style: none은 목록 앞의 점(•)을 없애는 속성이고, margin: 0; padding: 0;은 목록에 기본으로 붙는 여백을 제거하는 것입니다. 이제 로고는 왼쪽, 메뉴는 오른쪽에 가로로 정렬된 번듯한 헤더가 되었습니다.

✨ 3단계 — 링크 꾸미기와 호버 효과

이 섹션에서는 메뉴 링크를 다듬고 20강의 호버 효과를 더하겠습니다.

4강에서 배웠듯 링크에는 기본 밑줄과 파란색이 붙습니다. 이를 깔끔하게 정리하고, 마우스를 올리면 색이 부드럽게 바뀌도록 해 봅시다.

.menu a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: color 0.2s;
}
.menu a:hover {
  color: #3498db;
}

하나씩 봅시다. text-decoration: none으로 밑줄을 없애고, color: #333으로 링크를 검정에 가까운 색으로 바꿉니다. 12강에서 배운 font-weight로 살짝 굵게 했습니다. 그리고 20강에서 배운 transition: color 0.2s를 평소 상태에 주고, :hover에서 색을 파랑으로 바꿉니다. 이제 메뉴에 마우스를 올리면 글자색이 0.2초에 걸쳐 부드럽게 파랗게 변합니다. 이 작은 효과 하나가 헤더를 훨씬 세련되게 만듭니다. 또한 15강에서 배운 position: sticky; top: 0;을 헤더에 주면, 스크롤해도 헤더가 상단에 계속 붙어 있게 할 수 있습니다.

📱 4단계 — 반응형으로 대응하기

이 섹션에서는 19강의 미디어 쿼리로 작은 화면에 대응하겠습니다.

지금 만든 헤더는 넓은 화면에서는 좋지만, 좁은 휴대폰 화면에서는 로고와 메뉴가 답답하게 붙을 수 있습니다. 19강에서 배운 미디어 쿼리로, 화면이 좁아지면 로고와 메뉴를 세로로 쌓이게 바꿔 봅시다.

@media (max-width: 600px) {
  .site-header {
    flex-direction: column;
    gap: 12px;
  }
}

이 코드는 화면 너비가 600px 이하일 때, 헤더의 flex 방향을 column으로 바꿔 로고 아래에 메뉴가 오도록 세로로 쌓습니다. 16강에서 배운 flex-direction이 여기서 활용되는 것입니다. 이렇게 하면 좁은 화면에서도 요소들이 겹치지 않고 깔끔하게 정리됩니다. (실제 사이트에서는 좁은 화면에서 메뉴를 '햄버거 버튼'으로 접기도 하는데, 그것은 자바스크립트가 필요하므로 여기서는 세로 배치까지만 다룹니다.)

이렇게 우리는 시맨틱 구조 → Flexbox 배치 → 호버 효과 → 반응형이라는 네 단계로, 지금까지 배운 여러 개념을 조합해 실제 헤더를 완성했습니다. 개별 개념을 배울 때는 몰랐던 것들이, 이렇게 함께 쓰일 때 비로소 진가를 발휘하는 것을 느꼈을 것입니다.

⚠️ 헤더를 만들 때의 주의점

이 섹션에서는 실전에서 흔한 실수를 정리하겠습니다.

첫 번째, 목록의 기본 여백·점을 정리하지 않는 것입니다. <ul>에는 기본으로 점과 여백이 붙습니다. 메뉴로 쓸 때는 list-style: none과 margin/padding: 0으로 정리해야 깔끔합니다.

두 번째, Flexbox를 어디에 줄지 헷갈리는 것입니다. 로고와 메뉴를 배치하는 flex는 header에, 메뉴 항목들을 배치하는 flex는 ul(.menu)에 줍니다. 각 배치의 컨테이너가 무엇인지 생각하며 적용하세요.

세 번째, 반응형을 나중에 몰아서 하려는 것입니다. 처음부터 다양한 화면을 염두에 두고 만들면, 미디어 쿼리로 조금만 손봐도 됩니다. 완성 후 반응형을 통째로 뜯어고치는 것보다 훨씬 수월합니다.

📝 핵심 요약

이번 강에서는 실전으로 헤더·내비를 만들었습니다.

• 뼈대 — header 안에 로고와 nav(ul·li·a)를 넣어 시맨틱하게 구조를 세웁니다.
• 배치 — header에 flex + justify-content: space-between으로 로고와 메뉴를 양 끝에, ul에 flex + gap으로 메뉴 항목을 가로로 정렬합니다.
• 꾸미기 — 링크의 밑줄을 없애고 색·굵기를 정하며, transition + hover로 부드러운 호버 효과를 줍니다.
• 반응형 — 미디어 쿼리로 좁은 화면에서 flex-direction: column으로 바꿔 세로로 쌓이게 합니다.

사이트의 얼굴인 헤더를 완성했습니다. 다음 강에서는 이 헤더를 포함해, 여러 구역으로 이루어진 완전한 랜딩 페이지를 만들어 이 강좌의 실전을 마무리하겠습니다. 다음 강 「실전 — 랜딩 페이지」에서 이어가겠습니다.

📚 참고 자료

• Flexbox로 배치하기 — MDN Web Docs
• <nav> 내비게이션 요소 — MDN Web Docs
• list-style — MDN Web Docs