Strength & Honor

반응형 헤더 만들기 (3)

---

그럼 이번에는 모바일 환경이었을때 보여지는 것을 구현 해 보자.
화면의 사이즈가 750px 보다 작을때에 보여지는 조건들이다.

물론 아래 명령들은 모두 지난 시간에 작성했던 css 파일에서 그 다음으로 작성 해 주면 된다.

flex-direction: column 은 수직으로 정렬하라는 뜻이다.
align-items: flex-start 은 왼쪽으로 정렬하라는 뜻이다.

여기서 메뉴는 중앙에 배치해야 되므로 center 라는 명령을 주었다.
그런데 중앙으로 오지 않는다.
왜냐하면 메뉴의 너비가 화면 전체의 크기가 아니기 때문이다.
그래서 width 를 100% 로 설정한다.

navbar__menu 에서 li 항목들은 마우스를 갖다 대었을 때 색깔이 나타나도록 하였는데 모바일 환경에서는 너비가 100%의 박스 형태로 보여져야 하기에 width 를 100% 로 설정했다.

navbar__menu 나 navbar__icons 는 나중에 navbar__tooggleBtn 에 의해서 나타나게 할 것이므로 모두 display: none 으로 속성값을 설정하였다.

            
  @media screen and (max-width: 750px) {
  .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__tooggleBtn {
      display: block;
  }

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

        

자 이제 자바스크립트를 이용해서 navbar__tooggleBtn 버튼을 클릭했을때 navbar__menu 와 icons 들을 보여줄 수 있도록 해 보겠다.
아래와 같은 명령어를 html 파일에 body 태그안에 넣는다.

    
    <script src="practice.js"></script>
  

그리고 자바스크립트 파일에는 아래와 같이 작성 해 본다.

    
    const toogleBtn = document.querySelector('.navbar__toogleBtn');
    const menu = document.querySelector('.navbar__menu');
    const icons = document.querySelector('.navbar__icons');
    
    toogleBtn.addEventListener('click', () => {
        menu.classlist.toggle('active');
        icons.classlist.toggle('active');
    });
    

그런데 불행하게도 자바스크립트 명령이 동작되지 않는다.
혹시 오타가 있는 것은 아닌지 몇번을 확인해도 잘못된 곳을 찾을 수 가 없었다.
심지어 이렇게 블로그를 작성하면서 하나하나 다시 검토 해 보았으나 역시 안된다.

좀 더 공부를 더 해 봐야 할 것 같다.

---