반응형 Nav Bar 만들기

display: none과 visibility: hidden의 차이

맨 오른쪽 아이템 옆 공간에 a 태그를 추가하였을 때 차이를 보자.

• display: none 공간을 차지하지 않는다.
  
• visibility: hidden 공간을 차지한다.
  

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

max-width: 768px 에서 아래와 같은 화면이 나타나도록 했다.

• 토글 close display: none
  
• 토글 open display: flex
  

  • 자바스크립트로 toggle을 클릭할 때 'active' class를 추가하고, CSS로 .active에 display: flex;를 주었다.

const toggle=document.querySelector(".toggle"),
      navUl=document.querySelector(".navUl"),
      icon=document.querySelector(".icon");

//toggle을 클릭할 때 마다 active class를 추가해줘
toggle.addEventListener('click',() => {
    navUl.classList.toggle('active');
    icon.classList.toggle('active');
});

Tip

• CSS에서 변수 사용하기

  • 웹페이지에서 사용하는 폰트, 색상을 미리 지정하여 사용한다.
  • 한번에 수정이 용이하다!

:root {
--text-color:
--background-color:
--accent-color:
}

.class{
var(--text-color)
}

Reference

• 드림코딩 by 앨리
• Font Awesome