[CSS] 반응형 헤더 만들기

728x90

// index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <script src="main.js" defer></script>
    <title>Nav Bar</title>
    <script src="https://kit.fontawesome.com/2d323a629b.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <nav class="navbar">
      <div class="navbar__logo">
        <i class="fab fa-accusoft"></i>
        <a href="#">DreamConding</a>
      </div>
      <ul class="navbar__menu">
        <li><a href="">Home</a></li>
        <li><a href="">Gallery</a></li>
        <li><a href="">Weddings</a></li>
        <li><a href="">FAQ</a></li>
        <li><a href="">Bookings</a></li>
      </ul>
      <ul class="navbar__icons">
        <li><i class="fab fa-twitter"></i></li>
        <li><i class="fab fa-facebook-f"></i></li>
      </ul>

      <a href="#" class="navbar__toogleBtn">
        <i class="fas fa-bars"></i>
      </a>
    </nav>
  </body>
</html>

// style.css

body {
  margin: 0;
  font-family: "Noto Sans KR", sans-serif;
}

a {
  text-decoration: none;
  color: white;
}

.navbar {
  display: flex;
  justify-content: space-between;
  /* 가로 정렬  */
  align-items: center;
  /* 세로 정렬 */
  background-color: #263343;
  padding: 8px 12px;
}

.navbar__logo {
  font-size: 24px;
  color: white;
}

.navbar__logo i {
  color: #d49466;
}

.navbar__menu {
  display: flex;
  list-style: none;
  /* 꾸밈세 없애기 */
  padding-left: 0;
}

.navbar__menu li {
  padding: 8px 12px;
}

.navbar__menu li:hover {
  background-color: #d49466;
  border-radius: 4px;
}

.navbar__icons {
  list-style: none;
  color: white;
  display: flex;
  padding-left: 0;
}

.navbar__icons li {
  padding: 8px 12px;
}

.navbar__toogleBtn {
  display: none;
  position: absolute;
  right: 32px;
  font-size: 32px;
  color: #d49466;
}

// 반응형 웹 만들기
@media screen and (max-width: 768px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 24px;
  }
  .navbar__menu {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .navbar__menu li {
    width: 100%;
    text-align: center;
  }

  .navbar__icons {
    display: none;
    justify-content: center;
    width: 100%;
  }

  .navbar__toogleBtn {
    display: block;
  }

// toggle 클릭하면 icons 띄우게
  .navbar__menu.active,
  .navbar__icons.active {
    display: flex;
  }
}

// main.js

const toggleBtn = document.querySelector('.navbar__toogleBtn');
const menu = document.querySelector('.navbar__menu');
const icons = document.querySelector('.navbar_icons');

toggleBtn.addEventListener('click', ()=>{
    menu.classList.toggle('active');
    icons.classList.toggle('active');
})

https://www.youtube.com/watch?v=X91jsJyZofw&t=1351s

728x90

저작자표시

'프레임워크 > CSS' 카테고리의 다른 글

미디어 쿼리 사용법 (2) (0)	2022.01.05
미디어 쿼리 사용법 (1) (0)	2022.01.05
[CSS] input type="file" CSS 적용하기 (0)	2021.12.20
[CSS] div 영역 나누기 (0)	2021.12.14
[CSS] Flexbox 잘 다루는 방법, 이미지 넓이에 맞춰서 출력하는 방법 (0)	2021.12.07