헤더·내비바 Navbar

<header class="nav">
  <b>Logo</b>
  <nav><a>제품</a><a>가격</a><a>블로그</a><a>문의</a></nav>
  <button>로그인</button>
</header>
<style>
body{padding:0}
.nav{display:flex;align-items:center;gap:24px;height:60px;padding:0 20px;border-bottom:1px solid var(--border);background:var(--bg)}
nav{display:flex;gap:18px;margin:0 auto;color:var(--muted)}
button{border:0;background:var(--accent);color:var(--accent-fg);padding:8px 14px;border-radius:8px;font:inherit}
</style>

언제 쓰나

거의 모든 웹사이트의 기본 구조. 사이트 이름과 주요 메뉴를 어디서나 보이게 할 때.

비슷한 것과 차이

• 고정 헤더: 스크롤해도 위에 붙어 따라오는 헤더 (내비바의 동작 방식)
• 사이드바: 메뉴를 세로로 배치
• 햄버거 메뉴: 모바일에서 내비바 메뉴를 ☰ 버튼 안에 숨긴 형태