마우스오버 (1) 썸네일형 리스트형 Vue + Tailwind에서 반응형 메뉴 구현 시 흔히 겪는 문제와 해결법 웹사이트에서 상단 메뉴를 구현할 때, PC에서는 hover로 메뉴가 열리고, 모바일에서는 클릭으로 메뉴가 열리는 방식을 자주 사용합니다.Vue 3 + + TailwindCSS 환경에서 반응형 디자인이 아닌 PC와 동일한 디자인을 적용할 때 겪은 시행착오와 해결 방법을 정리합니다.문제 상황모바일에서 동작을 위해 상위 메뉴 클릭시 모바일 여부와 메뉴 오픈 여부를 체크하여 하위메뉴를 보여주도록 적용한 뒤, PC에서는 hover로 하위 메뉴가 열리지만, 마우스를 아래로 내리는 순간 메뉴가 사라짐모바일에서는 클릭으로 하위 메뉴를 열어야 하는데, viewport가 고정되어 있어 window.innerWidth로는 모바일인지 구분이 안 됨v-show로 메뉴를 열어도 class="hidden"이 같이 적용돼서 메뉴가.. 이전 1 다음
