반응형 Navbar 만들기

 

이번에 반응형 Navbar를 만들면서 내 능력에 대한 자괴감이 들었다.

엄청 쉬운거같은데 생각의 정리를 안하고 무작정 코드를 짜면 이렇게 되는구나 느꼈던 프로젝트이다.

 

핵심적 코드

 

가장 핵심적인 부분은 화면이 줄어들면 menu와 sns가 없어지는 @media부분 그리고 list_menu 아이콘을 누르면 세로로 menu들이 나오는 부분이다.

여기에서 너무 막무가내로 코드를 짜서 엄청 헤매었다.

 

이런거를 할때는

 

변하기 전, 변한 뒤 코드를 짜고

이걸 연결시키면 편하다는 걸 너무 늦게 깨달아버렸다.

 

이것들을 만드는 코드 ui를 먼저 만들고 연결해주면 편하다.

 

media 부분

@media all and (max-width: 725px) {
  // sns 아이콘 사라짐
  #sns {
    display: none;
  }
  // list.menu 아이콘 생김
  .list {
    display: block;
  }
  // container column으로 바꿈
  .nav_container {
    display: flex;
    flex-direction: column;
    transition: all 1.1s;
    overflow: hidden;
    #nav_title {
      margin-bottom: 10px;
    }
  }
  // menu column으로 바꿈
  .nav_menus {
    display: flex;
    flex-direction: column;
    div {
      margin-top: 15px;
      transition: all 1s;
      &:hover {
        transform: translateX(20px);
        background-color: rgb(205, 205, 255);
      }
    }
  }
}

 

배운부분

 

overflow :hidden; 의 사용

 

메뉴를 누르면 메뉴리스트가 나오게하는 부분에서 자꾸 위의 영상처럼 안 이쁘게 나와서 답답했었다.

 

이때의 방식은 hidden 클래스를 만들어서 display: none;으로 

classList.toggle("hidden")으로 메뉴를 누르면 hidden클래스가 붙여야 뗴어졌다하는식으로 만들었었다.

.hidden {
  display: none !important;
}

list.addEventListener("click", function () {
  nav_menus.classList.toggle("hidden");
  nav_container.classList.toggle("size");
});

 

근데 이렇게 하는것보단 메뉴를 누르면 nav_container의 height만 변경되게 하고 overflow :hidden하면 더 이쁘게 되었다.

 

 .list {
    display: block;
  }

list.addEventListener("click", function () {
  nav_container.classList.toggle("size");
});

@media all and (max-width: 725px) {
 ... (생략)
  .nav_container {
    display: flex;
    flex-direction: column;
    transition: all 1.1s;
    overflow: hidden;
    ...(생략)
  }

 

!importe

이거를 하기전에 자꾸 hidden 클래스가 다른 클래스한테 묻혀서 적용이 안되었다.

그래서 알아보니 !important;를 사용하면 무조건적으로 적용이 된다고 하여 사용하게되었다.

 

전체적인 스타일 적용 우선 순위는 다음과 같다.

 

• 인라인 스타일(inline style) >내부 스타일(internal style)>외부 스타일(external sytle)>브라우저 기본값 순
• 두 가지가 똑같은 등급일 때, 가장 마지막으로 적용한 것이 가장 우선한다.
• 특정도 값이 높을 수록 우선순위
  • 인라인 스타일 1000점
  • ID 선택자 100점
  • 클래스 & 가상 클래스 10점
  • 태그 선택자 1점