본문 바로가기
FrontEnd/Front Project

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

AXCE 2021. 7. 26. 16:06
반응형

# 오늘은 "반응형 Nav Bar 만들기 1."으로 HTML을 작성하고, CSS를 적용해보도록 하겠습니다.
# 중간에 중요한 내용, 필수적으로 짚어야 할 내용이 있는 경우 따로 작성하도록 하겠습니다.
# Visual Studio Code 및 Extension 설치 방법 << Click!

# 비전공자가 진행한 PROJECT

 



반응형 Nav Bar

Nav Bar(Navigation Bar)는 사용자가 웹사이트에서 가장 많이 클릭하는 부분 중의 하나로, 우리가 흔히 사용하는 메뉴(menu)라고 할 수 있습니다. 물론 메뉴만을 지칭하는 것은 아니고, 사이트 로고 및 여러 링크들을 포함하고 있습니다.

아래의 사진을 보면 감이 잡히실 겁니다. 아래 AXCE Coding, Home, Gallery 따위가 작성되어 있는 부분을 Nav Bar라고 합니다. 이 Nav Bar를 이용하면 웹사이트의 페이지 간 이동이 편리해집니다.


이번에 만들 반응형 Nav Bar는 웹페이지의 크기에 따라 레이아웃을 달리하도록 만든 Nav bar입니다. 아래를 보시면 이해하시기 더 쉽습니다.

왼쪽은 보통의 Nav Bar입니다. 크기가 줄어들면서 보고싶은 목록이 모두 보이지 않고, 일부가 가려진 것을 볼 수 있습니다. 오른쪽 두 사진은 반응형으로 만든 Nav Bar입니다. 크기가 줄어듦에 따라 Hamburger 버튼에 메뉴를 감추고, Hamburger 버튼을 누르면 메뉴가 보이도록 만들었습니다.

 

 

1) HTML 전체 코드

*Awsome 사이트에서 kit code를 받아 head>script 에 입력해야 로고들이 정상적으로 입력됩니다. kit code를 받는 방법은 아래에 나와있습니다.

<!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">
    <script src="https://kit.fontawesome.com/kitcode.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>

 

 

 

2) Box 설정

우선 반응형으로 만들기 전에 html에서 기본 틀을 잡아보도록 하겠습니다.
우리가 만들 Nav Bar는 4개의 박스로 구성되어 있다고 할 수 있습니다.

1. 빨간박스 = html의 <body>에서 Nav bar 구역을 나누어주는 박스입니다.
2. 노란박스 = Nav bar 구역 안에서 로고와 사이트 명을 담고 있는 박스입니다.
3. 초록박스 = Nav bar 구역 안에서 메뉴를 담고 있는 박스입니다.
4. 주황박스 = 기타 로고를 담고 있는 박스입니다.

 

 

3) 박스를 구성하기 위한 HTML

이번에는 박스를 구별하기 위한 HTML을 직접 작성해보도록 하겠습니다.

***visual studio code를 사용하시는 분들은 html 파일을 만들고 " ! "를 쓴 후 tab을 누르면 html 기본 틀이 자동으로 작성되는 것을 확인하실 수 있습니다.

  <body>
    <nav class="navbar">
      빨간박스

      <div class="navbar__logo">
        노란박스
      </div>

      <ul class="navbar__menu">
        초록박스
      </ul>

      <ul class="navbar__icons">
        주황박스
      </ul>
      
    </nav>
  </body>

Navigation bar를 만들 때는 div 태그가 아닌 <nav> 태그를 이용해 더 세부적인 태그로 접근할 수 있습니다.
첫번째 div 노란 박스에는 로고와 사이트 명을 담고, css를 적용하기 위한 class명으로 "navbar__logo"를 지정했습니다.
두번째 ul 초록 박스에는 메뉴들을 담고 css를 적용하기 위한 class명으로 "navbar__menu"를 지정했습니다. 초록 박스는 div가 아닌 ul 태그를 사용했는데, 메뉴들이 리스트의 형태를 띄고 있기 때문입니다.
세번째 ul 주황 박스에는 로고들을 담고, css를 적용하기 위한 class명으로 "navbar__icons"를 지정했습니다. 초록 박스와 마찬가지로 icons들이 리스트의 형태를 띄고 있기 때문에 ul 태그를 사용했습니다.

 

 

4) FontAwsome

다음 사이트는 프로젝트에서 사용할 icon들을 무료로 사용할 수 있는 사이트입니다. 사이트에 접속한 뒤 Start for Free를 눌러 시작하시면 됩니다. 

 

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

 

kit code를 확인하는 방법은 로그인 후에 프로필에 들어가서 "kits" 를 누르고, kit 중 하나를 누르면 확인할 수 있습니다.

복사 후 HTML 의 head 부분에 아래와 같이 붙여넣기 해주시면 됩니다.

 

 

5) 박스 내부 채우기

우선 아이콘을 받아오는 방법은 Font Awsome 사이트에서 아이콘을 검색 후 원하는 위치에 html에 붙여넣습니다.

(1) 노란 박스에는 사이트 로고와 이름을 담아줍니다. 이름에는 사이트의 링크를 걸 수 있도록 <a>태그를 사용합니다.

     <div class="navbar__logo">
        <i class="fas fa-blog"></i>
        <a href="">AXCE Coding</a>
      </div>


(2) 초록 박스에는 메뉴로 사용할 링크들을 담아줍니다.

      <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>


(3) 주황 박스에는 기타 로고들을 담아줍니다.

      <ul class="navbar__icons">
        <li><i class="fab fa-google"></i></li>
        <li><i class="fab fa-slack"></i></li>
      </ul>

 

결과물 ::
* 다음 사진에서 가장 하단에 있는 햄버거 모양은 없을 수 있습니다.
* 추가하고 싶으신 분들은 다음 코드를 <nav> 태그 안에 넣어주시면 됩니다.

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

 

 

# 위의 내용은 Youtube 드림코딩 by 엘리 를 참고해서 작성
   - 위 유투브는 도움이 되는 내용의 영상이 많습니다. 구독하시고 유용한 정보를 많이 얻는 것도 좋습니다.
# Full script in Github :: Dony Noh 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 만들기 3.  (3) 2021.07.27
[첫번째 Project] :: 반응형 Nav Bar 만들기 2.  (0) 2021.07.27
VScode(Visual Studio code) 및 Extension 설치 방법  (0) 2021.07.26

'FrontEnd/Front Project' Related Articles

티스토리툴바