웹/VueJS (1) 썸네일형 리스트형 [Modern][vue3] dialog 태그를 활용한 로딩 바 구현 Modern 시리즈는 작성일 기준 최신 자바스크립트 문법으로 구현한 예제입니다. 는 원래 모달을 구현하기 위해 제안된 스펙으로 2022년 3월에 HTML5의 기능으로 추가되었습니다. 모달을 위해 설계되긴 했지만 모달의 특성을 생각해보면 로딩으로 활용했을 때, 그 이점이 상당하다는 것을 알수 있습니다. div 태그로 로딩 바를 구현해보시면 이벤트를 완전히 차단하는게 꽤나 피곤한 작업이란걸 아실겁니다. backdrop 효과를 적용하기 위에 바깥에 div를 씌우고... 클릭 이벤트, 키보드 이벤트(tab 키 클릭), 스크롤 등 신경써야 할 부분이 상당히 많죠 dialog 태그를 이용해 로딩 바를 구현하면 많은 부분을 지원해주기 때문에 상당히 안정적입니다. 아래는 dialog가 지원해주는 기능입니다. dialo.. 이전 1 다음
