5.5 반응형 네비게이션

약 4분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

5.5 반응형 네비게이션

반응형 웹사이트에서 네비게이션 바는 중요한 구성 요소로, 사용자에게 사이트의 탐색 경로를 제공합니다. 본 절에서는 클린하고 실용적인 반응형 네비게이션 바를 만드는 방법을 소개합니다. 기본 HTML 구조를 통해 네비게이션을 설정하고, CSS Flexbox와 Media Query를 활용하여 다양한 화면 크기에 따라 변경되는 스타일을 구현합니다. 또한, javaScript를 이용한 햄버거 메뉴 기능도 함께 포함합니다.

1. HTML 구조 설정

네비게이션 바를 구성하기 위해 먼저 HTML 문서를 작성하겠습니다. 아래는 기본적인 네비게이션 바의 HTML 구조입니다.

코드 html

<nav class="navbar">
    <div class="logo">
        <a href="#">로고</a>
    </div>
    <ul class="nav-links">
        <li><a href="#">홈</a></li>
        <li><a href="#">서비스</a></li>
        <li><a href="#">소개</a></li>
        <li><a href="#">연락처</a></li>
    </ul>
    <div class="hamburger">
        <span></span>
        <span></span>
        <span></span>
    </div>
</nav>

2. CSS 스타일링

HTML 구조를 바탕으로 CSS를 사용하여 네비게이션 바의 스타일을 설정합니다. Flexbox를 활용하여 레이아웃을 구성해보겠습니다.

코드 css

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    padding: 1rem;
}

.logo a {
    color: white;
    text-decoration: none;
    font-size: 1.5rem;
}

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

.nav-links li {
    margin: 0 15px;
}

.nav-links a {
    color: white;
    text-decoration: none;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.hamburger span {
    height: 3px;
    width: 25px;
    background: white;
    margin: 3px 0;
}

5.5 반응형 네비게이션

5.5 반응형 네비게이션

1. HTML 구조 설정

2. CSS 스타일링

댓글 0