HTML <nav> 태그

<nav>
    <ul>
        <li><a href="/">홈</a></li>
        <li><a href="/about">소개</a></li>
        <li><a href="/services">서비스</a></li>
        <li><a href="/contact">연락처</a></li>
    </ul>
</nav>

<!-- 1. 메인 내비게이션 -->
<header>
    <nav class="main-nav" aria-label="메인 메뉴">
        <div class="logo">
            <a href="/">My Blog</a>
        </div>
        <ul class="nav-links">
            <li><a href="/posts">포스트</a></li>
            <li><a href="/categories">카테고리</a></li>
            <li><a href="/tags">태그</a></li>
            <li><a href="/about">소개</a></li>
        </ul>
    </nav>
</header>

<!-- 2. 사이드바 내비게이션 -->
<aside>
    <nav class="sidebar-nav" aria-label="사이드바 메뉴">
        <h3>카테고리</h3>
        <ul>
            <li><a href="/category/web">웹 개발</a></li>
            <li><a href="/category/mobile">모바일 개발</a></li>
            <li><a href="/category/design">디자인</a></li>
        </ul>
        
        <h3>최근 포스트</h3>
        <ul>
            <li><a href="/post/1">React Hooks 완벽 가이드</a></li>
            <li><a href="/post/2">CSS Grid 마스터하기</a></li>
        </ul>
    </nav>
</aside>

<!-- 3. 푸터 내비게이션 -->
<footer>
    <nav class="footer-nav" aria-label="푸터 메뉴">
        <ul>
            <li><a href="/privacy">개인정보처리방침</a></li>
            <li><a href="/terms">이용약관</a></li>
            <li><a href="/contact">문의하기</a></li>
        </ul>
    </nav>
</footer>

<!-- 4. 스타일링 예제 -->
<style>
.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links li {
    margin-left: 2rem;
}

.nav-links a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

.nav-links a:hover {
    color: #2196f3;
}

.sidebar-nav {
    padding: 1rem;
    background-color: #f5f5f5;
    border-radius: 8px;
}

.sidebar-nav h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: #333;
}

.sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-nav li {
    margin-bottom: 0.5rem;
}

.sidebar-nav a {
    text-decoration: none;
    color: #666;
}

.sidebar-nav a:hover {
    color: #2196f3;
}

.footer-nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav li {
    margin: 0 1rem;
}

.footer-nav a {
    text-decoration: none;
    color: #666;
    font-size: 0.9rem;
}

.footer-nav a:hover {
    color: #2196f3;
}
</style>