html, css Responsive header 역시나 오늘도 있었던 issue

오늘도 Ellie님 강의를 보며 만들었다. 아예 처음부터 시도해보기는 어려워서 영상을 한 번보고난 후 코드를 쳤다. 

한 두 번정도 쳤더니 술술쳐지는 수준이었다. 

 

하지만 오늘은 두 가지의 issue가 있어서 해결하는데 또 시간이 걸렸다. 

 

1. css에서 class가 아닌 태그를 .으로 명명했다. 

body 와 a 태그에서 전체적으로 수정할 것이 있어서 명령을 했는데 반영이 안되었다. 한참 뭐가 잘못 됬는지 보면서도 못찾다가..한 30분정도 후에 찾아냈다. 

.body {

}

.a {

}

이런식으로 쳤다. 이 것도 처음에는 이상한줄도 모르고있다가 보다보니까 

'어? body와 anchor tag는 class 가 아닌데..?'라는 생각이 들고 깨닫게 되었다. 

 

 

2. JS에서 event 오류

사실 JS는 아직 배우지도 않았지만 엘리님께서 맛뵈기로 해주신걸 따라했다. 

그런데 웬걸, 모바일 버전에서 햄버거를 눌렀을 때 토글이 나오지 않고 잠깐 떴다가 사라지는 것이 아닌가. 

혹시 오타가 있을 까 하여 두눈 씻고 찾아봤지만 없었다. 

 

const toggleBtn = document.querySelector('.navbar_toggleBtn');
const menu = document.querySelector('.navbar_menu');
const sns = document.querySelector('.navbar_sns');

toggleBtn.addEventListener('click', (e) => {
   e.preventDefault(); /* 수정한 부분 */
    menu.classList.toggle('active');
    sns.classList.toggle('active');
});

 

문제에 대한 답은 유투브 댓글에 있었다. 그걸 못보고 한시간동안 헤매다니..

html 에서 toggleBtn을 a tag로 걸었다.

toogleBtn 에 a태그를 걸어놔서 일어나는 오류였다. 그런데 여기서 의문점.. 왜 굳이 a 태그를 걸었을까? button을 쓰면 되는 것 아닌가? 라는 생각이 들어 커뮤니티에 물어보니 된다고 한다.

 

그래서 총 해결 방법은 총 3가지 
1. a href="#" 로 링크를 막는다.
2. 위와같이 event를 막는 태그를 넣는다.
3. 애초에 토글은 버튼이지 앵커가아니다. btn을 써서 이럴 일을 방지하자. 

 

a 태그를 쓰는 이유는 그 개발자분 말로는 커서 포인트가 귀찮아서 썼을 수도 있다.. 라고 하셨는데... 음.. 아시는 분 댓글 부탁드린다.