#3 Navbar 반응형 만들기

구현하려고 하는 작업

Navbar(logo, category)를 만들고 컬러, 카운터를 페이지를 따로 준다
width를 768px 이하로 줄였을 경우 category가 사라지고 석 삼(三) 버튼이 나온다
버튼을 눌렀을 때 category가 column으로 표시되고 전체 페이지가 어두운 계열 색상으로 덮는다
(modal-box) 구현
modal 창에서 석 삼(三) 버튼을 누르면 modal-box 사라지고 메인 페이지 표시한다
(뭐 이렇게 설명하기가 어려울까... 글도 자주 써야 늘지..)

사용한 태그

querySelector, getElementById, document.style.display, addEventListener

구현한 작업 결과 완성 이미지

예제 설명

이번 작업은 CSS가 더 오래걸렸다..
석 삼(三) 버튼 만들고 modal-box 꾸미는데 더 오래걸렸던 것 같다
결국 modal창에서 석 삼(三) 버튼을 오른쪽으로 못 옮겼다
같은 위치에 두지 못해서 좀 속상하네
계속 공부를 하다보니 CSS도 차근히 더 배워야 할 것 같다

• index.html

<header id="main-header">
  <div class="navbar">
    <span></span>
    <a href="index.html" id="logo">Chan</a>
    <button class="side-btn">
      <span></span>
      <span></span>
      <span></span>
    </button>
  </div>

일단 header를 만들고 id를 지정해줬다
그안에 div 생성 후 class를 지정했다
navbar에 logo와 modal-box를 나오게 하는 버튼을 묶어주었다
이때 span을 같이 묶어 줬는데 이유는 flex사용해서 버튼을 끝으로 보내기 위해 임의로 빈 span을 지정했다
768px이상에서는 어차피 버튼이 가려지겠지만 줄였을 경우 오른쪽으로 보내기 위해서다
(justify-content: space-between 사용)
button안에 지정한 span 3개가 석 삼(三) 버튼을 만드는 용도이다
span에 width를 100%로 지정해주고 height를 얇게 지정한다(나는 5px로 지정했다)
color를 지정해주면 선처럼 석 삼(三) 버튼이 된다
(이건 솔직히 야매인듯. 다른 방법도 찾아봐야겠다)
이 버튼은 768px 이상에서는 보이지 않게 설정했다

• nav.css

/* 768px이상에서 화면에 출력안함 */
.side-btn {
  width: 3rem;
  height: 3rem;
  display: none; /* 이부분 */
  flex-direction: column;
  justify-content: space-evenly;
  background-color: transparent;
  cursor: pointer;
  border-radius: 10px;
}

@media (max-width: 768px) {
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 20px;
  }
  .side-btn {
    display: flex; /* 768px 이하일 때 버튼 화면에 출력 */
  }
}

• space-between 이미지 예시
  

반응형 media는 CSS 맨 아랫쪽에 작성해야 한다
코드는 위에서 아래로 내려가기 때문에
위에서 겹치는 부분은 반응형 media에 작성하지 않아도 된다
변경되는 부분만 작성하면 된다

• index.html

  <nav class="category">
    <ul>
      <li><a href="index.html">🎨COLOR-CHANGE</a></li>
      <li><a href="/html/counter.html">🔢Counter</a></li>
    </ul>
  </nav>
</header>

category를 지정해주기 위해 ul, li, a태그로 묶었다
navbar에 있는 페이지 이동 버튼?하이퍼링크?
ul태그는 목록을 표현하는 것이므로 앞에

이런 점들을 없애기 위해 li 태그에 list-style:none;을 지정해주었다
a 태그는 링크에 밑줄이 있기 때문에 text-decoration: none;도 지정했다

<section id="modal-box">
  <button class="side-btn close-btn">
    <span></span>
    <span></span>
    <span></span>
  </button>
  <ul>
    <li><a href="index.html">🎨COLOR-CHANGE</a></li>
    <li><a href="/html/counter.html">🔢Counter</a></li>
  </ul>
</section>

section을 나누어 modal-box를 생성했다
똑같이 위처럼 button을 만들어 주고 span을 3개 똑같이 지정했다
close-btn이라는 class를 지정해주었다 (이따가 이벤트를 추가해줘야하기 때문에)
ul, li, a 도 동일하게 지정해주는 이유는 위에 지정한 ul, li, a는 display:none으로 숨겨줄거기 때문이다
modal-box자체를 없앴다 보여줬다 할것이기 때문에 따로 지정해준다

• nav.js

const sideBtn = document.querySelector(".side-btn");
const closeBtn = document.querySelector(".close-btn");
const modalBox = document.getElementById("modal-box");

modal-box를 열기 위한 버튼, 닫기 위한 버튼, modal-box를 숨겨야 하기 때문에 modal-box 이렇게 필요한 3가지를 가져온다

sideBtn.addEventListener("click", () => {
  modalBox.style.display = "block";
});
closeBtn.addEventListener("click", () => {
  modalBox.style.display = "none";
});

오픈 버튼 클릭시 modal-box의 display: block으로 변경한다
그러기 위해서 modal-box 자체를 미리 display: none으로 지정해주었다
닫기 버튼 클릭시 다시 none으로 변경한다

#modal-box {
  width: 100%;
  height: 100%;
  background-color: gray;
  position: fixed;
  top: 0;
  display: none; /* 이 부분이 변경된다 */
}

사실 이부분은 classList로 쓰는것 같은데 간단하게 html의 해당 태그의 style 속성에 넣는 방식을 사용했다
(잘 안쓰는 방법이다..)
나중에 다시 수정해서 공부해야 할 것이 많다

전체 코드

오늘부터 깃허브에 올려야겠다
코드가 너무 길다 읽기 힘들게...

https://github.com/front-chan/example-40

오늘은 이만 자러갑니다
왜냐면 오늘은 2개나 했거든 안녕