Responsive-Header (개발노트)

wusi-hub·2022년 6월 2일
1

1. 프론트엔드 입문

목록 보기
12/13
post-thumbnail

Responsive-Header

반응형 헤더 만들기 (HTML, CSS, JS 프로젝트1)

깃허브: https://github.com/wusi-hub/Responsive-Header


구현할 반응형 헤더


들어가기 앞서......

웹 사이트를 구현하기 전에 레이아웃 구조를 먼저 생각한다.

  • 3개의 박스를 확인할 수 있었다. (로고, 메뉴, 아이콘)
  • Flexbox를 이용하여 배치한다.
  • 가로 사이트는 space-between으로 정렬
  • 세로 사이트의 경우 Media query를 이용하여 레이아웃을 재배치한다.
  • 재배치된 사이트도 똑같이 3개의 박스로 이루어져 있다. (로고, 메뉴, 이아콘)
  • 재배치된 사이트의 경우 Flexbox 정렬은 column으로 한다.


1. HTML 구조 만들기

head

  • <!DOCTYPE> 선언하기
  • Font Awesome Kit code 삽입
  • CSS 파일 삽입
  • 구글 폰트 링크 삽입
  • JS 파일을 연결하기 위해
  • JS 파일의 빠른 로딩을 위해 defer이라는 키위드 입력
<!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" />
    <title>Apple</title>
    <script
      src="https://kit.fontawesome.com/6478f529f2.js"
      crossorigin="anonymous"
    ></script>
    <script src="main.js" defer></script>
    <link rel="stylesheet" href=styles.css />
    <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=Roboto:wght@500&display=swap"
      rel="stylesheet"
    />
  </head>

body

커다란 박스를 만들 때는 최대한 Semantic tag를 이용하여 만든다.

<body>
    <nav class="navbar">
    
      <div class="navbar__logo">
      
      </div>
      
      <ul class="navbar__menu">  
      
      </ul>
      
      <ul class="navbar__icons">
      
      </ul>
      
    </nav>
  </body>    

Font Awesome을 이용하여 아이콘 삽입

  • Kit code를 받은 후 <head>안에 붙여넣기 한다.
  • 알맞은 아이콘을 각각의 <navbar>에 삽입한다.
  • 로고를 눌렀을 때 홈 화면으로 이동할 수 있도록 <a> 태그를 이용한다.
  • <ul class="navbar__menu">의 경우 (li>a)*5라는 Emmet을 이용하여 한번에 입력할 수 있다.
  • <ul>을 쓴 경우 <li>와 함께 쓴다.
<body>
    <nav class="navbar">
      <div class="navbar__logo">
        <i class="fab fa-apple"></i>
        <a href="#">Apple</a>
      </div>
      <ul class="navbar__menu">
        <li><a href="#">스토어</a></li>
        <li><a href="#">Mac</a></li>
        <li><a href="#">iPad</a></li>
        <li><a href="#">iPhone</a></li>
        <li><a href="#">고객지원</a></li>
      </ul>
      <ul class="navbar__icons">
        <li><i class="fab fa-facebook-f"></i></li>
        <li><i class="fab fa-twitter"></i></li>
      </ul>
    </nav>
  </body>

2. CSS 스타일링 하기

:root

  • :root 라는 CSS 변수를 통해 색상값 정의
:root {
  --text-color: aliceblue;
  --background-color: slategrey;
  --accent-color: cadetblue;
}

body

  • body에 있는 기본 마진 값을 없앰으로써 navbar를 꽉차게 만들기
  • 폰트 설정
body {
	margin: 0;
    font-family: "Roboto", sans-serif;
}

a

  • 모든 <a>tag에 기본 적으로 들어가는 text-decoration을 없애주고 색상 또한 변경
  • <:root>에 정의한 폰트 색 입력
a {
	text-decoration: none;
    color: var(--text-color);
}
  • 아이템들 Flexbox로 변경하기
  • 메인축에서 동일한 간격으로 정렬하기
  • 수직으로도 중간으로 정렬하기
  • <:root>에 정의한 폰트 색 입력
  • 전체적으로 아이템들이 모서리에 붙어있기 때문에 적당한 padding 값 입력
.navbar {
	display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--background-color);
    padding: 8px 12px;
}
  • Font Awesome은 폰트이기 때문에 font-size로 사이즈 조절
  • <:root>에 정의한 폰트 색 입력
.navbar__logo {
	font-size: 24px;
    color: var(--text-color);
}
  • display: flex를 이용해서 세로로 나열된 메뉴 아이템들을 가로로 변경
  • 점 모양으로 스타일링된 리스트들을 list-style: none을 통해 점 모양을 없앤다.
  • 메뉴가 가운데가 아닌 것으로 보여 확인해보니 왼쪽에 padding 값이 있다. padding-left: 0;을 통해 padding 값을 없앤다.
.navbar__menu {
  display: flex;
  list-style: none;
  padding-left: 0;
}
  • 아이템들이 바짝 붙어있어서 적당한 padding 값을 통해 간격을 만든다. 또한 padding을 사용함으로써 마우스를 올렸을 때 클릭 할 수 있는 범위가 넓어지고 하이라이팅 할 수 있는 범위도 커진다.
  • 폰트 사이즈도 적당한 크기로 설정한다.
.navbar__menu li {
  padding: 8px 25px;
  font-size: 19px;
}
  • 마우스 커서가 올라갔을 때 <:root>에 정의한 폰트 색이 나타난다.
  • 하이라이팅된 아이템의 모양을 약간 둥글게 변경한다.
.navbar__menu li:hover {
  background-color: var(--accent-color);
  border-radius: 5px;
}
  • 점 모양으로 구성된 아이템들을 list-style을 통해 none으로 바꾼다.
  • <:root>에 정의한 폰트 색 입력
  • 세로로 정렬된 아이템들을 Flexbox로 설정
  • 왼쪽에 있는 padding 값을 없애주기 위해 padding-left0으로 설정
.navbar__icons {
  display: flex;
  list-style: none;
  color: var(--text-color);
  padding-left: 0;
}
  • 해당 아이템들 또한 바짝 붙어있어서 적당한 padding 값을 통해 간격을 만든다.
.navbar__icons li {
	padding: 8px 12px;
}

@media screen and (max-width: 768px)

  • 레이아웃을 반응형으로 만들 때는 미디어 쿼리를 이용한다.

  • 스크린의 크기가 768px일 때 아이템들을 아래로 새롭게 레이아웃을 만든다.

  • 그렇게 하기 위해서 제일 상위에 있는 컨테이너인 .navbar.navbar__menuflex-directioncolumn으로 바꾼다.

  • 로고의 정렬을 왼쪽으로 하기 위해 .navbaralign-itemsflex-star로 바꾼다.

  • 메뉴의 정렬은 가운데로 하기 위해 .navbar__menuwidth100%로 바꾸고 align-itemscenter로 한다.

  • 메뉴 아이템들의 하이라이팅을 전체 크기로 바꾸기 위해 .navbar__menu liwidth100%로 설정한다.

  • 왼쪽으로 정렬된 아이템들을 다시 가운데로 오게 하기 위해서 text-aligncenter를 사용해야 한다.

  • navbar__icons의 Flexbox의 방향은 row이기 때문에 가운데 정렬을 할 때 justify-content: center를 이용하면 된다.

  • 너비가 100%가 아니기 때문에 width: 100%를 통해 너비 100%를 준다.

  • 토글 버튼이 Max 768px일 때만 나오게 하기

  • 메뉴와 아이콘들이 미디어 쿼리가 아닐 때는 display: none으로 설정

@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__toggleBtn {
    display: block;
  }

3. 토글 버튼 만들기

  • html에 토글 버튼 정의하기
<a href="#" class="navbar__toggleBtn"></a>
  • Font Awesome을 통해 알맞은 아이콘 삽입
<a href="#" class="navbar__toggleBtn">
	<i class="fas fa-bars"></i>
</a>
  • 해당 아이콘을 Normal Flow에서 나와서 Position을 할 수 있는 position: absolute를 이용해 왼쪽 끝에 배치시킨다.
  • 오른쪽에서 32px 떨어진 곳에 배치
  • 해당 아이콘의 사이즈는 font-size를 이용해서 24px로 설정
  • <:root>에 정의한 폰트 색 입력
  • 기본적으로는 display: none;을 통해 화면이 작아졌을 때만 나오게 설정
.navbar__toggleBtn {
  display: none;
  position: absolute;
  right: 32px;
  font-size: 24px;
  color: var(--text-color);
}

4. JS로 이벤트 처리

  • toggleBtn이라는 변수에 document.querySelector를 이용해서 html 노드중에 클래스가 .navbar__toggleBtn 을 할당 (html 안에 있는 클래스 노드들중에 .navbar__toggleBtn을 찾아서 toggleBtn에 연결)
  • menuicons들도 똑같이 연결
  • toggleBtn이 클릭될 때마다 addEventListener을 통해서 클릭할 때마다 지정하고 있는 함수를 호출
  • 버튼이 클릭될 때마다 메뉴와 아이콘들의 active가 없다면 active를 추가해주고 있다면 다시 빼주는 역할을 해준다.
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');
});
profile
프론트엔드 공부하고 있는 정우시입니다.

0개의 댓글