본문 바로가기
FrontEnd/Front Project

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

AXCE 2021. 7. 27. 14:23
반응형

# 오늘은 지난번에 만들었던 HTML에 CSS를 덧붙여 Nav bar를 꾸며보도록 하겠습니다.
# CSS에서 색깔을 변수로 사용하는 방법과 Item 배치하는 방법에 대해서 알아보도록 하겠습니다.
# Item 배치를 공부하시고 싶은 분은 "FlexBox" 와 "Display & Position" 을 공부해보시기 바랍니다.
# Visual Studio Code 및 Extension 설치 방법 << Click!



# 비전공자가 진행한 PROJECT

 



Nav Bar를 꾸미기 위한 CSS 작성

CSS 기본 작성 방법은 여기 ! 를 클릭해서 확인해주세요.

아래 내용 중 Hamburger 가 있는 내용이 있고 없는 내용이 있습니다. Hamburger 를 넣고 진행하고 싶으신 분들은 아래 태그를 넣고 진행하시기 바랍니다.

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

 

 

1) 현재 상태

지금까지 작성한 HTML을 확인해보면 왼쪽과 같은 모양인 것을 확인할 수 있습니다.
우리는 이제 CSS를 활용해 왼쪽을 오른쪽의 모습으로 바꾸도록 하겠습니다.

현재상황(왼쪽) 목표(오른쪽)

 

 

2) 전체 HTML

아래 과정을 진행하기 전에 CSS 파일을 HTML에 불러와서 사용해야합니다. 그 방법을 간단히 설명드리도록 하겠습니다.

1. css 파일을 만들고, 그 위치를 폴더 내에 혹은 다른 폴더에 위치시켜 놓습니다. 
2. HTML의 <head> 태그 부분에 <link rel="stylesheet" href="style.css"> 다음과 같이 작성합니다.
3. href속성에 "css 파일 경로" 를 넣습니다. 만약 두 파일이 같은 폴더에 있는 경우는 위와 같이 파일명만 작성해도 됩니다.

<!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>
      
      <a href="#" class="navbar__toggleBtn">
        <i class="fas fa-hamburger"></i>
      </a>
    </nav>
  </body>
</html>

 

 

3) Layout

먼저 나누어 놓은 박스들과 아이템들을 원하는 모양으로 배치해보도록 하겠습니다.

(1) 우선적으로 가장 큰 박스인 navbar의 안에 있는 요소들을 재배치 해줍니다.

*색깔을 변수로 사용하는 background-color: var() 에 대해 모르시는 분들은 여기! 를 클릭해서 확인해주세요.

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

display: flex; 를 이용해 세로로 있던 박스들을 가로로 옮겨놓습니다.
justify-content: space-between; 을 이용해 박스들 사이에 빈 공간을 넣어줍니다.
align-items: center; 는 navbar에 있는 박스들을 navbar 내에서 가운데 정렬해줍니다.
Background-color: var(--background-color); 배경색을 --background-color에 할당한 값으로 넣습니다.
padding: 8px 12px; 은 navbar에 공백은 위아래로 8px, 양 옆으로 12px을 넣어 끝에 바짝 붙는 것을 방지합니다.

지금까지 진행하면 아래 사진과 같은 모습일겁니다.

(2) 그 다음으로 떨어져 있는 부분(빨간 동그라미)을 없애고, 배경색을 lightgray로 변경해보도록 하겠습니다.

body { 
  margin: 0;
  background-color: var(--bodybackground-color);
}

window 의 전 영역을 차지하는 body 부분의 margin을 0으로 함으로써 떨어져 있는 부분을 없애고, 배경색을 lightgray 색상으로 변경했습니다.

 

 

4) item 꾸미기

지금부터는 <nav> 태그 안에 있는 각 박스들을 꾸며보도록 하겠습니다.
(1) 먼저 첫번째 로고가 있는 .navbar_logo 박스를 수정하겠습니다.

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

.navbar__logo 의 <i> 태그들의 색상을 --accent-color 로 바꿔주고, 왼쪽 공간을 차지하던 padding을 0으로 설정했습니다. 이렇게 하면 로고만 --accent-color로 변경된 것을 확인하실 수 있습니다. 다음은 <a> 태그인 글씨를 꾸며보도록 하겠습니다.

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

전체적인 <a> 태그들의 글씨를 변경하였습니다.
text-decoration: none; 은 <a> 태그를 사용할 때 보이는 파란글씨와 밑줄을 없애기 위해 사용했습니다.
지금까지의 모습은 아래 사진과 같이 보일겁니다.

(2) 이번에는 두번째 박스인 .navbar__menu 박스를 수정해보도록 하겠습니다.

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

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

list-style: none; 으로 <li> 태그 앞에 붙어있는 구분점을 없애주었습니다.
display: flex;로 세로로 되어 있는 아이템들을 가로로 위치를 변경했습니다.
margin 과 padding-left를 0으로 정해 공백이 생기는 것을 없애주었습니다.

.navbar__menu 박스 안에 있는 <li> 태그에 공간을 주기 위해 padding 을 추가했습니다.
padding 추가한 모습과 하지 않은 모습은 아래와 같습니다.

적용 전
적용 후

(3) 이번에는 세번째 박스인 .navbar__icons 박스를 수정해보도록 하겠습니다.

.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)번에서 진행한 부분과 동일한 과정입니다. 궁금하신 내용은 (2)번을 참고해주시기 바랍니다.

지금까지 문제없이 잘 진행하셨다면 아래와 같은 페이지를 확인하실 수 있습니다. 

Hamburger 없는 상태
햄버거 있는 상태

다음 시간에는 추가로 동작이 들어갔을 때 생기는 효과들을 입혀보도록 하겠습니다. 추가적으로 javascript도 일부 사용할 예정입니다.

 

 

# 위의 내용은 Youtube 드림코딩 by 엘리 를 참고해서 작성
   - 위 유투브는 도움이 되는 내용의 영상이 많습니다. 구독하시고 유용한 정보를 많이 얻는 것도 좋습니다.
# 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 만들기 3.  (3) 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

티스토리툴바