Web dev
-
JS / 유튜브 자주쓰는 iframe player API 매개변수 정리Web dev/ETC 2024. 2. 14. 23:01
자주 쓰는 유튜브 iframe player 매개변수 정리 유튜브영상 시작시간 설정 // 시작시간 설정 유튜브영상 끝나는시간 설정 // 끝나는시간 설정 유튜브영상 자동재생 // 자동재생 설정 mute=1 로 소리없음을 해야 자동재생 유튜브영상 컨트롤러 제거 // controls=0(컨트롤 제거), controls=1(기본값)플레이어 컨트롤이 플레이어에 표시 유튜브영상 로고 제거 // 유튜브 로고 제거: modestbranding=1 유튜브영상 반복 재생 // 반복재생 단일영상은 playlist를 추가 해줘야한다. 유튜브영상 관련 영상 표시 안하기 // 관련 동영상 표시 안하기 유튜브 IFrame Player API https://developers.google.com/youtube/player_parame..
-
JS / checkValidity(), input required 폼태그 e.preventDefault() 이슈Web dev/JavaScript 2024. 2. 14. 22:38
파이어베이스로 백엔드를 만들고 프로필 수정기능을 만들던 중 이슈가 생겼다. input 태그의 속성인 required 속성을 사용하여 폼태그의 유효성 체크를 했는데, 버튼 클릭시 e.preventDefault(); 를 사용하면 required가 동작안하고, e.preventDefault();를 빼면 DB업데이트가 안되었다. 그래서 검색하던중 checkValidity();를 체크해 required 분기 체크를 할 수 있었다. required 체크가 다되면 e.preventDefault() 후에 DB업데이트 코드실행 // required 체크가 다되면 e.preventDefault(); 실행 $('#updateProfile').click(function(e){ const form = document.query..
-
Error / gulp server CSP errorWeb dev/Error 2023. 6. 25. 16:32
회사에서는 gulp를 쓰고 있다. 근데 갑자기 아래와 같은 에러가 발생하면서 스크립트를 수정하면 적용되지 않았다. Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-g+j6GGgaPxpY5NBSgWFCJYMgEBGipeao9g4UR6+wsmw='), or a nonce ('nonce-...') is required to enable inline execution. 신기한게 이미 빌드가 되어있어서 그런가 기존 스크립트적용된건 잘 작동했는데 수정하면..
-
JS / modal scroll방지시 화면 울렁이는 이슈Web dev/JavaScript 2023. 6. 25. 16:22
모달을 구현하다보면 scroll을 안되게 막아야 할때가 있다. 스크롤을 막으면 기존에 있던 스크롤이 사라지면서 뚱땅거린다. 뚱땅거림을 방지하기 위해 스크립트를 짜보았다. /* 보통 height:100%;로 처리하지만 다르게 처리해보았다 */ .scroll_stop { overflow: hidden; position: fixed; top: 0; bottom: 0; left: 0; right: 0; } let posY $('.sku_btn').on('click', () => { posY = $(window).scrollTop(); $('.sku_modal').addClass('on'); $("body").addClass('scroll_stop'); $('.scroll_stop').css('top',-posY..
-
JS / 웹접근성 팝업에서 탭 이동시 벗어나지 않게 하기Web dev/JavaScript 2023. 6. 24. 14:17
작업을 하다보면 팝업창(모달)을 띄어야 할 때가 많다. 웹접근성을 고려했을때 팝업창을 열면, 팝업창으로 포커스 해주고 아웃라인(시각적),탭인덱스0(키보드접근성) 처리를 해줘야 한다. 그래야 팝업을 열고 나서 탭을 눌러이동하면 팝업으로 이어진다. 문제는 팝업을 열고 탭을 계속누르면 포커스가 팝업창 밖으로 이동한다. 그래서 팝업을 닫기 전까지는 팝업창을 빠져 나가지 못하도록 처리해줘야 한다. 1) 모달의 닫기 버튼은 마크업에서 하단에 배치한다. 2) 아래와 같이 스크립트를 짜준다. $(".modal-wrap").off('keydown.modal').on('keydown.modal', function(e) { if ($(".modal-wrap").is(':focus') && e.shiftKey && e.key..
-
JS / swiper linear autoplay 물흐르듯 슬라이드 구현하기Web dev/JavaScript 2023. 6. 17. 17:57
물흐르듯이 스와이퍼를 구현하려면 CSS 를 수정해주면된다. disableOnInteractiond옵션을 false로 해주면 스와이퍼를 잡고 움직여도 다시 물흐르듯 움직인다. 아니면 아예 터치안되도록 처리하는것도 괜찮을 것 같다. let sectionSwiper = new Swiper(".swiper-container.section_swiper", { slidesPerView: "auto", loop:true, observeParents:true, observe:true, autoplay: { delay: 0, disableOnInteraction: false }, speed: 5000, }); .section2 .section_swiper > ul{ align-items: center; /* 이건 빼도 ..