본문 바로가기

Front-end/Api6

[Swiper] 똑같은 스와이퍼 반복문으로 편하게 만들기 #swiper #script #스와이퍼여러개만들기  옵션은 다 똑같은데 스와이퍼 코드를 이렇게 작성했던 적이 있습니다.지금은 배열을 사용해서 편하게 쓰고 있어서 정리합니다.   탭바 안에 똑같은 레이아웃의 스와이퍼가 들어있는 디자인이 많더군요.그 때 스와이퍼를 스크립트를 하나씩 작성하는 것이 아닌, 배열/반복으로 한번에 만드는 방법입니다. HTML                                               Swiper                                 Swiper is~                                                                           Swiper                          .. 2024. 8. 25.
KHN KCP 본인인증 도메인 추가등록 KCP 파트너관리자(partner.kcp.co.kr) > 부가서비스 > 휴대폰본인확인 > 인증결과URL 설정  도메인이 naver.com 인 경우naver.com / www.naver.com 둘 다 등록 2024. 5. 7.
[SweetAlert] Alert창 예쁘게 적용하기! #sweetalert #alert #design 안녕하세요. Gi-1의 개발일기 입니다. alert창은 알림창 / 확인창 등을 위해 주로 사용합니다. 간단하게 사용 가능하고 편리하지만 디자인 적인 부분이 매우 부족합니다. [Alert] [SweetAlert] 1. SweetAlert 주소 https://sweetalert2.github.io/ SweetAlert2 A beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes sweetalert2.github.io 2. Link, Script https://cdnjs.cloudflare.com/ajax/libs/limonte-swe.. 2022. 12. 4.
[비메오 API] iframe 영상 종료 시 0초로 이동 #비메오 #vimeo #비메오API 안녕하세요. Gi-1의 개발일기 입니다. 비메오 영상은 반복재생을 하지 않으면 영상 종료 후에 관련영상이 뜨게 되는데요. 이를 막기 위해서 영상 종료 시 0초로 이동하게끔 해 볼 것 입니다. const iframe = document.querySelector('iframe'); const player = new Vimeo.Player(iframe); player.on('play', function() { // 비디오 시작 시 발생할 이벤트 }); player.on('ended', function() { // 비디오 종료 시 발생할 이벤트 player.setCurrentTime(0); }); 2022. 12. 1.
[Fullcalendar] 구글캘린더 연동하기 #fullcalendar #달력 #구글캘린더 안녕하세요. Gi-1의 개발일기입니다. fullcalendar와 관련된 달력개발이 있다면, 간편하게 구글캘린더와 연동하여 사용할 수도 있습니다. 1. Fullcalendar https://fullcalendar.io/ FullCalendar - JavaScript Event Calendar Open Source... With over 10 years of open source and over 120 contributors, FullCalendar will always have a free and open source core. Learn more fullcalendar.io fullcalendar 사이트에 접속하셔서 main.css / main.js / loc.. 2022. 8. 29.
Slick 사용방법 [ 슬라이드 api ] #slick#슬라이드api#간편슬라이드 안녕하세요. Gi_1입니다. 다양하고 간단한 슬라이드를 구현api slick 포스팅입니다. slick은 슬라이드 방향, 속도, arrow버튼, autoplay, dots버튼 등을 간단하게 제어할 수 있습니다. 제가 1년간 퍼블리싱을 하면서 제일 많이 사용한 api이기도 하네요! slick은 jquery기반으로 만들어진 라이브러리이므로 jQuery가 필요합니다. 우선 slick홈페이지에 접속합니다. 오른쪽 상단의 get it now를 클릭 후 다운로드 합니다. slick.min.css파일과 slick.min.js파일을 업로드합니다. 저는 plugins 폴더 안에 넣겠습니다. 기본적인 구조 HTML 1 2 3 script $(function(){ $('.slick-sl.. 2022. 1. 20.