창고

1탄이었던 이전 포스팅 주소 : https://aosceno.tistory.com/492 커스텀 셀렉트 박스 만들기 - HTML DOM에는 select만 작성하고 vaniila JS로 알아서 DIV 생성 HTML CSS JS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64.. aosceno.tistory.com 감사한 덧글을 보고 class문법으로 리팩토링 해볼겸 기능도 추가하였습니다~! 추가된 기능 키보드 동작 (위 아래 화살표..

우선 최고의 참고 사이트 MDN 링크 (1)Reduce : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce Array.prototype.reduce() - JavaScript | MDN reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. developer.mozilla.org (2)Rest parameters : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters Rest 파라미터 - JavaScript | MDN..

지난번에 만든 터치슬라이더는 웹에서는 터치이벤트를 제공하지 않기 때문에 반쪽짜리 슬라이더였음. 이번에는 웹에서는 mousedown + mousemove + mouseup / 터치 지원 환경에서는 touchmove, touchend시 좌우로 SNAP 되는 바닐라 자바스크립트 슬라이더를 만들어봤다. 다음은 소스코드 HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 touch, grab 일시정지 0 1 2 3 4 5 ⬅ ➡ Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25..