Web dev
-
JS / 바닐라로 video play(), pause() 구현하기Web dev/JavaScript 2023. 2. 26. 16:18
커서를 올리면 동영상을 재생하도록 구현해보았다. 제이쿼리를 사용했으면 get(0) 을 사용해 간단하게 구현 했었겠지만 바닐라로만 작업하기로 했었다. 비디오는 promise를 반환하기 때문에 비동기 처리를 하여 구현하면 된다. 처음 랜딩 된 후 바로 커서를 올리면 아직 로드되지 않았다는 에러가 뜨고 영상재생이 되지않았다. 동영상 크기가 크거나 리스트가 많아서 그런 이슈가 생긴줄 알았는데 video태그에 muted(음소거) 속성을 추가하면 에러없이 잘동작했다. 동영상이 다운로드되는 시점을 체크하려고 삽질했지만 그게 아니였던것이다..ㅋㅋ videoEvt:function(){ let item = document.querySelectorAll("#video_list .item"); for(i = 0; i < it..
-
JS / nav anchor, active 효과 구현Web dev/JavaScript 2023. 2. 26. 15:46
스크롤에 따른 nav 엑티브효과 anchor 효과 코드펜에서 뺏겨 왔다. 키키 출처 https://codepen.io/eksch/pen/xwdOeK Jump menu with active class and smooth scroll Smoooooooooth... codepen.io Section 1 Section 2 Section 3 Smooth scroll, fixed jump menu with active class Section Two Section Three $(document).ready(function() { $('a[href*=#]').bind('click', function(e) { e.preventDefault(); // prevent hard jump, the default behavio..
-
JS / input 정규식으로 숫자만 입력하기Web dev/JavaScript 2023. 2. 26. 15:32
정규식 함수로 숫자만 입력하는 방법 인라인스타일로 바로 넣을 수 있다.
-
jQuery / jQueryUI datepicker 데이트피커 한글설정 UI커스텀Web dev/jQuery 2022. 10. 30. 13:58
기본 데이트피커 UI는 겁나구리다. 그래서 이쁘게 커스텀을 해주었다. 게다가 영어가 기본설정이므로 한글설정도 해주었다. 1. jquery, jqueryUI를 사용하기 위해서 불러온다. 2.한글설정을 해준다. // 데이트피커 한글설정 function datepickEvt(){ $.datepicker.setDefaults({ dateFormat: 'yy-mm-dd', prevText: '이전 달', nextText: '다음 달', monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9..
-
JS / selectBox custom하기Web dev/JavaScript 2022. 10. 30. 12:54
셀렉트박스를 커스텀해보았다. 처음엔 w3스쿨스에서 긁어다가 적용해보려했는데 개뿔 더 거지같다 알아보기도힘들고 ㅋㅋ 그냥 만들어보기로 결심! select 태그를 쓰지않고 만들어 보았다. 1. value를 담아줄 인풋 생성 2. option을 list태그로 생성 3. 옵션을 선택하면 값을 input에 전달 인풋을 두개 만들어 직접입력 칸까지 만들어 보았다. // email로 예제를 만들어 보았다. // list에 data-select에 value를 넣어준뒤 선택되면 인풋에 값으로 넘겨준다. 직접입력 naver.com google.com daum.com nate.com kkkkkkkkkkkkkkkkkkkkkkkk.com aaa.com aaa.com aaa.com aaa.com aaa.com aaa.com aa..
-
CSS / Scollbar custom 스크롤바 커스텀하기Web dev/HTML&CSS 2022. 10. 30. 12:08
브라우저 마다 기본으로 제공되는 스크롤 모양이 다르다. 특히 윈도우는 쫌 못생겼다 ㅋㅋ 1. width,border-radius,border-width로 디자인에 맞게 커스텀 해주면된다. /* 스크롤 바 커스텀 */ .scrollbar_custom::-webkit-scrollbar {width: 18px;} .scrollbar_custom::-webkit-scrollbar-track {border-radius: 10px;} .scrollbar_custom::-webkit-scrollbar-thumb {background-color: #bcc5db; border-radius: 10px; border: 7px solid #fff; } 2. 스크롤을 적용시킬 박스에 스크롤바 커스텀 클래스를 주고 overflo..