Flexbox 내비게이션 바

<header class="site-header">
  <nav class="navbar" role="navigation" aria-label="메인 내비게이션">
    <a href="/" class="navbar-brand">
      <span aria-hidden="true">⚡</span>
      <span>MyApp</span>
    </a>

    <ul class="navbar-links" role="list" id="nav-links">
      <li><a href="/features" class="nav-link">기능</a></li>
      <li><a href="/docs"     class="nav-link">문서</a></li>
      <li><a href="/pricing"  class="nav-link">가격</a></li>
      <li><a href="/blog"     class="nav-link">블로그</a></li>
    </ul>

    <div class="navbar-actions">
      <a href="/login"  class="btn btn-ghost">로그인</a>
      <a href="/signup" class="btn btn-primary">시작하기</a>
    </div>

    <button class="nav-toggle" id="nav-toggle" aria-label="메뉴 열기" aria-expanded="false" aria-controls="nav-links">
      <span></span><span></span><span></span>
    </button>
  </nav>
</header>

<style>
:root {
  --nav-h: 64px; --nav-bg: #0f172a; --nav-text: #e2e8f0;
  --nav-hover: #38bdf8; --nav-border: rgba(255,255,255,0.08);
}
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--nav-bg); border-bottom: 1px solid var(--nav-border);
}
.navbar {
  display: flex; align-items: center; gap: 2rem;
  max-width: 1280px; margin: 0 auto;
  padding: 0 1.5rem; height: var(--nav-h);
}
.navbar-brand {
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 700; font-size: 1.125rem;
  color: var(--nav-text); text-decoration: none; white-space: nowrap;
}
.navbar-brand:hover { color: var(--nav-hover); }
.navbar-links {
  display: flex; align-items: center; gap: 0.25rem;
  list-style: none; flex: 1;
}
.nav-link {
  padding: 0.5rem 0.75rem; border-radius: 6px;
  color: var(--nav-text); text-decoration: none;
  font-size: 0.9375rem; transition: all 0.15s;
}
.nav-link:hover, .nav-link.active { color: var(--nav-hover); background: rgba(255,255,255,0.06); }
.navbar-actions { display: flex; gap: 0.5rem; }
.btn {
  display: inline-flex; align-items: center; padding: 0.4rem 1rem;
  border-radius: 6px; font-size: 0.875rem; font-weight: 500;
  text-decoration: none; transition: all 0.15s; border: 1px solid transparent;
}
.btn-ghost { color: var(--nav-text); border-color: var(--nav-border); }
.btn-ghost:hover { background: rgba(255,255,255,0.08); }
.btn-primary { background: #0ea5e9; color: #fff; }
.btn-primary:hover { background: #38bdf8; }
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 6px; margin-left: auto;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--nav-text); border-radius: 1px; }
@media (max-width: 768px) {
  .navbar-links, .navbar-actions { display: none; }
  .nav-toggle { display: flex; }
  .navbar-links.open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--nav-bg); border-bottom: 1px solid var(--nav-border);
    padding: 0.75rem 1rem;
  }
}
</style>

<script>
const toggle = document.getElementById('nav-toggle');
const links = document.getElementById('nav-links');
toggle?.addEventListener('click', () => {
  const open = links?.classList.toggle('open');
  toggle.setAttribute('aria-expanded', String(open));
});
</script>