728x90 반응형 Javascript9 [javascript] Slick 슬라이더 페이징, 커스텀 내비게이션, 진행바 달기 - slick slider custom navigation Swiper는 페이징, 내비게이션, 프로그레스바 기능들이 이미 있지만 Slick은 만만치 않습니다.근데 Slick을 써야할 경우가 있을 수도 있잖아요,, Slick은 기본적으로 dots, arrows가 있는데dots는 슬라이드 수 만큼 생성되고 클릭하면 해당 슬라이드로 이동하는 기능이며,arrows는 화살표 버튼으로 이전/다음 슬라이드로 이동하는 기능입니다.이 기본 기능들을 원하는대로 탈바꿈하고 프로그레스 바를 만들어 봅시다. 완성본 dots는 슬라이드수에 비례하여 나타나는 기능이므로 이 dots와 API를 활용해서 페이징을 만들 수 있습니다.appendDots: '.slick--visual__paging',customPaging: function (slider, i) { return ''+(i + 1.. 2023. 8. 4. [javascript] 버튼 클릭하면 클립보드로 텍스트 복사하기 (-를 제외하고 숫자만) 폰 번호나 계좌번호 등 하이픈이 들어가는 숫자 텍스트에서 '-'를 공백으로 대체하고 복사하는 코드 var textToCopy = $(this).text().replace(/-/g, ""); See the Pen copy to clipboard by sel (@wimmwell) on CodePen. 2023. 7. 27. [HTML/javascript] 옵션 선택에 따라 달라지는 셀렉트 박스 Cascading dropdown 상위 셀렉트박스에서 어떤 옵션을 선택하는지에 따라 다음 셀렉트박스의 옵션 내용이 바뀐다. 자바스크립트가 필요하다. https://www.w3schools.com/howto/howto_js_cascading_dropdown.asp How To Create a Cascading DropdownW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.www.w3schools.com 위의.. 2023. 6. 24. [javascript] HTML요소(div, p, span)의 텍스트를 클립보드로 복사하기 버튼 - Copy Text to Clipboard 자바스크립트를 이용하여 텍스트 복사 버튼을 구현해보자 function copy(id) { var r = document.createRange(); r.selectNode(document.getElementById(id)); window.getSelection().removeAllRanges(); window.getSelection().addRange(r); document.execCommand('copy'); window.getSelection().removeAllRanges(); } 위 copy 함수를 onclick 이벤트에 넣어 실행해주면 된다. (id)에 복사하려는 대상 요소의 id를 넣어주면 된다. 안녕하세요 텍스트 복사 "안녕하세요"가 복사될 것이다. codepen 코드 See the Pen C.. 2023. 2. 22. [Javascript] 전체화면 켜는 버튼 만들기 How to - fullscreen 출처 https://www.w3schools.com/howto/howto_js_fullscreen.asp HTML 삽입 미리보기할 수 없는 소스 전체화면을 켜기/끄기 버튼 코드이다. :fullscreen {}을 통해 전체화면일때 적용되는 css를 작성할 수도 있음. Fullscreen with JavaScript 전체화면 켜기 전체화면 끄기 Note: Internet Explorer 10 and earlier versions do not support the msRequestFullscreen() method. Note에 적힌대로 IE10 이전버전에서는 해당 기능을 지원하지않는다. 2022. 11. 3. [React] 리액트로 Three.js 작업하기 기본 (3D 박스 구현) 내가 까먹을까봐 쓰는 Three.js 리액트 작업 순서 VSCODE 실행하고 터미널을 열어 npx create-react-app my-app 리액트 프로젝트를 설치한다. (my-app 부분을 내 프로젝트 이름으로 대체) 나는 대충 문서 폴더에 threejs라는 프로젝트를 생성했다. cd 프로젝트명 명령어를 통해 프로젝트 폴더로 이동해준다. 터미널에 npm start를 입력해 로컬 서버를 켠다. 익숙한 리액트 로고 등장 작업 준비완 이제 리액트로 three를 설치하면 된다. https://threejs.org/docs/index.html#manual/en/introduction/Installation three.js 작업에 필수적인 document. 설치법이 나와있다. 아래의 명령어들로 THREE와 THR.. 2022. 7. 25. [Javascript] THREE.JS 3D 정육면체에 여러 이미지 적용하기 (textureLoader) 완성본 요새 THREE.JS의 사용법을 익히고 있다. 나는 3D 오브젝트를 소환하고 간단한 환경 수정 정도만 할 수 있는 초보인데 한가지 이미지의 텍스쳐가 아닌 정육면체를 6가지 이미지로 맵핑(+컨트롤 가능)을 하라는 미션이 떨어졌다. 직장인은 안되도 되게 해야한다. three.js의 예제를 뒤져보자 https://threejs.org/examples/#webgl_geometry_cube 그나마 비슷한 샘플을 찾았다. 하지만 한 개의 나무 이미지 텍스쳐만 쓰였다는 것을 육안으로 그리고 코드로 알 수 있다. ..이게 아냐 구글링 갈겨~~~ 출처: https://r105.threejsfundamentals.org/threejs/lessons/threejs-textures.html 발견! three.js 예제.. 2022. 7. 22. [javascript] 체크박스 클릭으로 selectbox의 disabled 속성 추가/제거하기 input 체크박스를 체크/해제시 selectbox의 disabled 속성이 토글되는 코드이다.체크박스 체크 여부를 확인하는 속성은셀렉터.checked /* 240711 본문 수정*/jQuery -> javascript disabled 속성 제거하기: removeAttribute('disabled');disabled 속성을 disabled로 설정: setAttribute('disabled', 'disabled'); 코드펜 예제 See the Pen Undisable selectbox o checkbox click by sel (@wimmwell) on CodePen.+jQuery에서는disabled 속성 제거하기: removeAttr('disabled');disabled 속성을 disabled로 설정:.. 2022. 4. 25. 유용한 MIT LICENSE(오픈소스 라이센스) 모음 - 애니메이션 @Github 🚩 MIT라이센스를 사용해도 될까? -오픈소스 라이센스이니 이론적으로는 저작권을 표시하면 상업적으로도 사용이 가능한 걸로 판단된다. 그래도 무작정 쓰지말고 허용 범위를 잘 찾아보고나서 저작권을 지켜 사용하도록 하자. 요약하면 MIT 허가서는 다음과 같은 라이선스이다. 이 소프트웨어를 누구라도 무상으로 제한없이 취급해도 좋다. 단, 저작권 표시 및 이 허가 표시를 소프트웨어의 모든 복제물 또는 중요한 부분에 기재해야 한다. 저자 또는 저작권자는 소프트웨어에 관해서 아무런 책임을 지지 않는다. 출처: https://ko.wikipedia.org/wiki/MIT_%ED%97%88%EA%B0%80%EC%84%9C 💻 유용한 MIT 라이센스 애니메이션 소스 10가지 1. AOS 마우스 스크롤 시 개체가 나타난다... 2022. 4. 1. 이전 1 다음 728x90 반응형
