전체 글 6

Swiper.js - Infinte + Loop + Autoplay

Swiper.js를 사용해서 작업을 하다가 서버에서 swiper-slide를 만들어 사용하던 도중 데이터가 부족해 슬라이드가 중간에 끊기는 상황이 발생해서 이슈에 대해서 써보려고 한다. 일단 기능 자체로는 간단하게 "자동 무한 루프" 슬라이드인데 Swiper.js에 이 기능을 만들기 위해서 소스를 보여주자면 let swiper = new Swiper(".swiper", { slidesPerView: "auto", loop:true, autoplay: { delay: 0, disableOnInteraction: false }, speed: 5000, });대충 이 소스인데 소스 자체로는 문제가 될게 없다. 근데 문제는 500px 짜리 swiper-slide를 한 개만 만들었을 때 loop가 작동되지 않았다..

<dialog> 공통으로 사용 가능한 모달

오래전, 2014년에 dialog 요소가 등장했다. 이 HTML 요소는 모달, 다이얼로그와 팝업을 쉽게 생성하기 위해 만들어졌다. 2022년에 dialog 요소를 거의 사용할 수 있게 되었는데 써봐야지 써봐야지 하면서 안써봤는데 2023년 5월쯤에 한번 써봤더니 괜찮길래 대충 간단하게 복붙하려고 작성해봤다. HTML 소스 로그인 로그인 하시겠습니까? 로그인을 하시면 문의글을 남기실 수 있습니다. (로그인을 하지 않으셔도 문의 접수는 남기실 수 있습니다.) 확인 취소 로그인 페이지로 이동합니다. 확인 CSS 소스 .login_wrap{ display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; backgr..