본문 바로가기
FrontEnd/Front Project

[첫번째 Project] :: 반응형 Nav Bar 만들기 3.

AXCE 2021. 7. 27. 16:38
반응형

# 이번 시간에는 Nav bar를 꾸미고, 크기에 윈도우의 크기에 따라 반응하는 반응형으로 만들어보도록 하겠습니다.
# 이 장에서는 Javascript가 일부 사용됩니다. 크게 어렵지 않은 부분이라 쉽게 따라하실 수 있을 거라고 생각합니다.
# Visual Studio Code 및 Extension 설치 방법 << Click!



# 비전공자가 진행한 PROJECT

 



반응형으로 꾸미기

 

 

1) 지금까지 작성한 HTML 과 CSS 확인하기

이번 장에서는 Hamburger 버튼이 보이지 않도록 삭제하고 시작하겠습니다. 이후에 추가합니다.

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="https://kit.fontawesome.com/kit_code.js" crossorigin="anonymous">
    </script>
    <title>Nav Bar</title>
  </head>

  <body>
    <nav class="navbar">

      <div class="navbar__logo">
        <i class="fas fa-blog"></i>
        <a href="">AXCE Coding</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-google"></i></li>
        <li><i class="fab fa-slack"></i></li>
      </ul>
      
    </nav>
  </body>
</html>
/* style.css */

:root {
  --text-color: #f0f4f5;
  --background-color: #263343;
  --accent-color: orange;
  --icons-color: rgb(152, 187, 201);
  --bodybackground-color: lightgray;
}

body { 
  margin: 0;
  background-color: var(--bodybackground-color);
  font-family: 'STIX Two Math';
}

a {
  text-decoration: none;
  color: var(--text-color);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--background-color);
  padding: 8px 12px;
  font-family: 'STIX Two Math';
}

.navbar__logo i {
  color: var(--accent-color);
  padding-left: 0;
}

.navbar__menu {
  list-style: none;
  display: flex;
  margin: 0;
  padding-left: 0;
}

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

.navbar__icons {
  list-style: none;
  display: flex;
  color: var(--icons-color);
  margin: 0;
  padding-left: 0;
}

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

 

 

2) 버튼 배경 보여주기

이번에는 아래의 사진과 같이 버튼 위에 마우스 커서가 올라갔을 경우 배경을 주황색으로 바꾸는 방법을 알아보도록 하겠습니다.

 

/* style.css */

.navbar__menu li:hover {
  background-color: var(--accent-color);
  border-radius: 3px;
}

우선 .navbar__menu 에 버튼들은 각각 <li> 태그에 묶여있기 때문에 이 부분을 활용하도록 하겠습니다.
li:hover 부분은 마우스 커서가 위에 올라왔을 때의 동작 변화를 표현할 수 있도록 합니다.
background-color를 넣어 마우스 커서가 올라왔을 때 색이 바뀌도록 지정합니다.
border-radius는 주황색 모양 버튼의 모서리가 둥글게 될 수 있도록 합니다.

 

 

3) 반응형으로 만들기

아래의 사진은 윈도우 크기를 줄였을 때 변하는 모습입니다. 왼쪽은 기본형으로 만든 경우, 오른쪽은 반응형으로 만든 경우입니다. 반응형으로 만든 윈도우는 크기가 줄었을 때 배열이 바뀌는 것을 확인하실 수 있습니다. 지금부터는 이 방법에 대해서 알아보도록 하겠습니다.

기본형(왼쪽) 반응형(오른쪽)

(1) 첫번째로 @media를 사용해 반응형으로 바꿔줍니다. 아래 코드의 의미는 screen의 너비가 최대 크기 700px 까지는 { } 안에 있는 css 코드를 사용한다는 의미입니다.

/* style.css */

@media screen and (max-width: 700px) {

}


(2) .navbar를 이용해 아이템들의 배치를 변경해줍니다.

/* style.css */

  .navbar {
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
  }

flex-direction: column; 은 navbar 박스 내부의 박스들을 column 형태로 정렬하는 것을 의미합니다. 즉, main axis는 열이됩니다. 따라서 박스들의 모습은 아래와 같습니다.

aling-items: flex-start; 는 내부 박스들을 왼쪽에서 시작할 수 있도록 합니다. 로고 부분을 왼쪽에 두어야 하기 때문에 이 속성값을 사용합니다.

margin: 0; margin을 0으로 두어 공백이 생기지 않도록 합니다.

(3) 이번에는 .navbar__menu 들을 한 줄로 나열하고, 마우스 커서를 올렸을 때 생기는 반응의 넓이를 키워보도록 하겠습니다.

/* style.css */

  .navbar__menu {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  
  .navbar__menu li {
    width: 100%;
    text-align: center;
  }

flex-direction: column; 으로 지정하면 아래와 같은 모습으로 보여집니다. main axis가 열 모양으로 바뀌었습니다.

align-items: center; 는 박스 내의 아이템들이 가운데로 정렬되도록 합니다. 하지만 이 부분을 설정해도 변화가 없는 것을 볼 수 있습니다. 그 이유는 이 menu 박스가 차지하는 공간이 아래와 같이 협소하기 때문입니다.

width: 100%; 너비를 다음과 같이 100%로 해주면 아래와 같이 정렬이 바뀌는 것을 확인하실 수 있습니다.

.navbar_menu li { } .navbar_menu 내부에 있는 <li> 태그를 수정하도록 하겠습니다. 아래 그림과 같이 주황색 배경의 크기를 키워주도록 하겠습니다. width를 100%로 하고 text를 가운데에 정렬시켜주면 아래와 같은 형태로 바뀝니다.


(4) 같은 방법으로 icon들을 정리하도록 하겠습니다.

/* style.css */

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

 

 

4) Hamburger 버튼과 메뉴를 숨기기 위한 Javascript

이번에는 메뉴를 숨기기 위한 Hamburger 버튼과 javascript를 작성해보도록 하겠습니다. 아래 사진과 같은 모습이 나오도록 하는 것이 목표입니다.

(1) 우선 Hamburger 버튼을 입력해보도록 하겠습니다. 윈도우의 크기는 반응형으로 설정했던 700px 이하로 먼저 시작하겠습니다. 그 이유는 이 버튼이 700px 이하일 때만 나타나도록 하고싶기 때문입니다. fontawsome에서 hamburger 버튼을 찾아와 HTML <nav> 태그 내부에 붙여넣기를 해줍니다.(fontawsome 사용 방법을 아시고 싶으신 분은 여기! 를 클릭해서 확인하시기 바랍니다.)

index.html

      <a href="#" class="navbar__toggleBtn">
        <i class="fas fa-hamburger"></i>
      </a>
    </nav>

(2) 위의 과정을 진행하고 나면 아래와 같이 최하단에 햄버거 모양이 위치하는 것을 보실 수 있습니다. 이제 이 햄버거를 우측 위로 이동시켜보도록 하겠습니다.

(3) 다음 코드를 @media 밖에 있는 원래 CSS 코드가 위치한 곳에 작성합니다. 다른 부분은 생략하고 position 부분만 살펴보도록 하겠습니다. absolute로 설정된 position 부분(position 공부하러가기)은 상위 박스인 navbar 안에서 움직이도록 합니다. 즉, navbar 내에서 움직이는데, 이동하는 곳이 우측에서 15px(right: 15px;) 떨어진 곳이라는 뜻입니다.

/* style.css */

.navbar__toggleBtn {
  color: var(--accent-color);
  position: absolute;
  right: 15px;
  font-size: 20px;
}

(4) 이번에는 display를 이용해 햄버거 버튼이 윈도우가 700px 이상일 때는 안보이고, 700px 이상일 때는 보이도록 하겠습니다. 그 다음 .navbar__menu 의 item들과 .navbar__icons 의 item들을 숨겨놓도록 하겠습니다.

700px 이하일 때는 toggleBtn이 보이도록 설정하겠습니다. 아래의 코드를 @media 내부에 넣으시면 됩니다. @media 밖에서는 display: none; 으로 설정했던 부분을 display: block; 으로 바꿔줍니다.

/* style.css */

@media screen and (max-width: 700px) {

  .navbar__toggleBtn {
    display: block;
  }

이렇게 되면 최종적인 모습은 아래와 같습니다.

(5) 이제 javascript를 이용해 햄버거 버튼을 누르면 menu가 보이고, 누르지 않으면 보이지 않도록 하겠습니다.

아직 저도 자바스크립트를 배우지 않은 상태라서 해당 내용은 자바스크립트 파일에 붙여놓도록 하고, CSS 조작방법을 확인해보도록 하겠습니다.

main.js

const toggleBtn = document.querySelector('.navbar__toggleBtn');
const menu = document.querySelector('.navbar__menu');
const icons = document.querySelector('.navbar__icons');

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

HTML에서 javascript를 불러올 수 있도록 head 부분에 입력하도록 하겠습니다.

index.html

    <script src="main.js" defer></script>
    <title>Nav Bar</title>
  </head>

이제 javascript가 동작해 .navbar__menu와 .navbar__icons을 활성화 시켜주면 display: flex; 되도록 지정합니다.

/* style.css */

@media screen and (max-width: 700px) {

  .navbar__menu.active,
  .navbar__icons.active {
    display: flex;
  }


반응형 Nav bar 만들기가 끝났습니다 ~ !!
확인해보시고 잘 안되시는 부분이 있으시면 코멘트 남겨주세요 !!

전체 코드는 아래 github 에서 확인하실 수 있습니다.
아이콘들을 사용하기 위해서는 kit_code를 수정하셔야 합니다. 이 부분 유의해서 해보시기 바랍니다.

 

 

# 위의 내용은 Youtube 드림코딩 by 엘리 를 참고해서 작성
   - 위 유투브는 도움이 되는 내용의 영상이 많습니다. 구독하시고 유용한 정보를 많이 얻는 것도 좋습니다.
# 아이콘을 무료로 사용할 수 있는 사이트: fontawsome
# Full script in Github :: DonyNoh Project
 

GitHub - SudonNoh/Front-end

Contribute to SudonNoh/Front-end development by creating an account on GitHub.

github.com

 

반응형
저작자표시 비영리 변경금지

'FrontEnd > Front Project' 카테고리의 다른 글

[첫번째 Project] :: 반응형 Nav Bar 만들기 2.  (0) 2021.07.27
[첫번째 Project] :: 반응형 Nav Bar 만들기 1.  (0) 2021.07.26
VScode(Visual Studio code) 및 Extension 설치 방법  (0) 2021.07.26

'FrontEnd/Front Project' Related Articles

티스토리툴바