코딩짜는 일상

메뉴의 서브메뉴를 숨겼다 펼치거나 특정 목차의 컨텐츠 내용을 접었다 펼칠 때 주로 collapse 또는 아코디언을 검색합니다. 찾아보시면 여러가지 방법을 소개하고 있지만 일단 이 글에선 Javascript와 jQuery를 쓰는 방식을 비교해보고자 합니다. 먼저 HTML은 다음과 같습니다. HTML main 1 sub 1 sub 2 sub 3 Javascript 먼저 자바스크립트 입니다. 서브 메뉴의 max-height를 0으로 만들거나 원래 높이로 되돌리는 방식으로 접었다 폈다 하는 컨셉입니다. sub 클래스 스타일에 transition을 추가해주지 않으면 애니메이션 없이 팟 나타났다가 팟 사라집니다. 주의!! jQuery 마지막으로 제이쿼리 입니다. 자바스크립트보다 코드가 훨씬 짧아졌습니다! 서브 메뉴..

(업데이트) html, body 둘다 overflow를 먹인채로 scrollTo를 써야하는 경우가 있어서... 좀 더 고심끝에 새로운 방법을 찾았습니다! - 20220802 #1 원인 스크립트가 동작하지 않는다면 가장 먼저 생각해볼 것은 함수 function 이 제대로 동작하지 않는 것입니다. 함수 안에 console.log('확인문구')를 입력해서 console에 문구가 찍히는지 확인해보면 알 수 있죠. 하지만 문구가 찍히는데도 scrollTo가 안 먹힌다? 1. 이동해야 할 위치값을 못 받음 2. scrollTo로 움직일 스크롤을 잘못 특정함 원인은 이 둘 중에 하나일 것입니다. #2 구조 저는 요소를 클릭하면 javascript를 이용해 지정한 페이지로 이동하는 웹 페이지를 만들었습니다. 2번으로 ..