반응형 헤더 안보고 만들기

안보고 만들어 봤는데 몇몇 부분에서 실수를 했다. 그것들을 정리하려고 한다.

 

.navbar {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background-color: var(--background-color);
    align-items: center;
}

전체에 align-items: center;을 해야 반응형 창을 만들 때 영향을 안준다.

 

const toggleBtn = document.querySelector(".nav__toggleBtn");
const menu = document.querySelector(".nav__menu");
const icon = document.querySelector(".nav__icon");

toggleBtn.addEventListener("click", () => {
    menu.classList.toggle('active');
    icon.classList.toggle('active');
    }
)

js에서 querySelector(".nav__toggleBtn")으로 해야하는데 querySelector("nav__toggleBtn")으로 해서 실행이 안됐다.

 

사실 이 외에도 잔실수가 있었는데 제일 고생한 두 개의 실수를 정리해봤다.