CSS로 만드는 간단한 반응형 네비게이션

 

 

웹사이트를 만들다 보면 화면 크기에 따라 메뉴 구조를 바꿔야 할 때가 있습니다.
예를 들어, PC 화면에서는 가로로 펼쳐진 메뉴를 보여주고
모바일 화면에서는 햄버거 버튼을 눌러야 메뉴가 펼쳐지도록 만드는 방식이죠.

이번 포스팅에서는 HTML과 CSS만으로
간단한 반응형 네비게이션을 만드는 방법을 알아보겠습니다.

---

✅ 기본 구조 설계 (HTML)

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

 

---

 

✅ 기본 스타일링 (CSS)

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: #333;
  color: white;
}

.menu {
  display: flex;
  list-style: none;
  gap: 20px;
}

.menu li a {
  color: white;
  text-decoration: none;
}

.menu-toggle {
  display: none;
  font-size: 24px;
  cursor: pointer;
}

 

---

 

✅ 반응형 스타일 적용 (미디어쿼리 사용)

@media (max-width: 768px) {
  .menu {
    display: none;
    flex-direction: column;
    background: #444;
    padding: 10px;
  }

  .menu.active {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }
}

 

---

 

✅ 메뉴 열고 닫는 방법 (JS 없이도 가능)

자바스크립트를 사용하지 않고도 CSS의 :checked 상태나 :target을 활용하여
토글 방식으로 메뉴를 열고 닫는 것이 가능합니다.
다만 이번 포스팅에서는 기본 구조와 스타일 중심으로 설명드리고,
추후 자바스크립트를 활용한 방법도 따로 다룰 예정입니다.

---

✅ 실전 응용 팁

• 로고를 텍스트 대신 이미지로 바꿀 수 있습니다 (<img src="logo.png">)
• 메뉴 항목에 hover 효과를 주어 마우스를 올렸을 때 스타일을 바꿀 수 있습니다
• transition 속성을 활용하면 메뉴가 부드럽게 열리고 닫히는 느낌을 줄 수 있습니다

.menu {
  transition: max-height 0.4s ease;
}

 

---

 

✅ 핵심 요약

항목	설명
메뉴 구조	nav > 로고 + 메뉴 + 햄버거 버튼
기본 배치	PC 화면에서 flex로 가로 정렬
반응형 처리	미디어쿼리로 모바일 화면에서 메뉴 숨김, 토글 표시
응용 확장	hover, transition, 이미지 등 다양한 방식으로 커스터마이징 가능