🧭
CSS 네비게이션 가이드
웹사이트의 네비게이션 바, 탭, 브레드크럼을 만드는 방법을 배워보세요.
1가로 네비게이션 바
네비게이션은 Flexbox로 만듭니다. 로고와 메뉴 링크를 가로로 배치하고, 간격과 정렬을 조절합니다.
미리보기HTMLCSS
HTML
<nav class="navbar">
<span class="logo">Logo</span>
<div class="nav-links">
<a href="#" class="active">홈</a>
<a href="#">소개</a>
<a href="#">서비스</a>
<a href="#">연락처</a>
</div>
</nav>CSS
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
height: 60px;
background: white;
border-bottom: 1px solid #e5e7eb;
}
.logo { font-weight: 700; font-size: 18px; }
.nav-links { display: flex; gap: 24px; }
.nav-links a {
text-decoration: none; color: #6b7280;
font-size: 15px; font-weight: 500;
transition: color 0.2s;
}
.nav-links a:hover, .nav-links a.active { color: #111; }justify-content: space-between은 첫 번째와 마지막 요소를 양쪽 끝으로 밀어냅니다.
2탭 네비게이션
탭은 현재 선택된 항목을 시각적으로 구분합니다. border-bottom이나 background로 활성 상태를 표현합니다.
미리보기HTMLCSS
HTML
<div class="tabs">
<button class="tab active">전체</button>
<button class="tab">인기</button>
<button class="tab">최신</button>
<button class="tab">추천</button>
</div>CSS
.tabs {
display: flex;
border-bottom: 1px solid #e5e7eb;
gap: 0;
}
.tab {
padding: 12px 20px;
font-size: 14px;
font-weight: 500;
color: #6b7280;
border: none;
background: none;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.2s;
font-family: inherit;
}
.tab:hover { color: #374151; }
.tab.active {
color: #0066ff;
border-bottom-color: #0066ff;
}border-bottom을 transparent로 두고 active에서만 색을 넣으면 높이가 밀리지 않습니다.