📋 Swiper swiper는 slick과 같은 슬라이드 라이브러리이지만 jQuery가 아닌 JavaScript를 사용하며 다양한 옵션을 지원해서 사용하기 편합니다. 그리고 하위 브라우저(IE9)에서도 동작하기 때문에 크로스 브라우징 측면에서도 뛰어납니다. 1. 설치 방법 swiper를 사용하려면 여러가지 방법이 있습니다. 원하는 방식으로 사용하시면 됩니다. CDN으로 사용하는 방식 swiper 파일을 직접 다운받아 사용하는 방식 npm으로 설치하여 사용하는 방식 CDN 2. 기본 사용법(구조) 사용법은 매우 간단합니다. 슬라이더를 사용하기위해 만들어 놓은 html문서 안에 swiper의 기본 구조에 맞는 class를 넣어주면 됩니다. 주의할 점은 swiper에서 정해 놓은 class명을 지정해줘야 합니..
📋 마우스 커서 모양 바꾸기 커서 모양을 바꾸는 원리는 간단합니다. html에 비어있는 태그를 만들어준 후에 css로 사용할 커서 모양을 커스텀 해준 후에 script로 마우스를 따라다니게 하는 원리입니다. 아래 태그를 살펴보겠습니다. html에 커서로 사용할 빈 태그를 만들어 줍니다. css로 커서로 사용할 모양을 커스텀 해줍니다. position: absolute 로 만들어진 div 태그를 띄워줍니다. body에 cursor: none 으로 기존 커서를 없애줍니다. body{cursor: none;} .cursor{ width: 20px; height: 20px; background-color: #000; border-radius: 10px; position: absol..
📋 script 태그 위치? script 태그는 보통 html 문서의 /*스크립트 파일 3*/ script 파일1 document.body.prepend('script_1.js'); console.log('script_1.js'); script 파일2 document.body.prepend('script_2.js'); console.log('script_2.js'); script 파일3 document.body.prepend('script_3.js'); console.log('script_3.js'); script파일 1과 2는 /*스크립트 파일 3*/ script태그에 defer 속성을 사용하게 되면 브라우저가 html문서를 읽을 때 script 태그를 만나더라도 DOM생성을 멈추지 않고 계속해서 ht..
📋 slick-slider slick-slider 는 반응형 웹을 지원하는 jQuery 슬라이더 라이브러리입니다. 기본 사용법과 반응형 작업방법을 설명 드리겠습니다. 1. slick 다운로드 및 css,js 파일 로드 slick 메인 홈페이지 오른쪽 상단에 get it now를 클릭한 후 다운로드를 진행하거나 그 아래의 CDN주소를 복사해서 태그안에 넣어서 사용하면 됩니다. 그리고 slick-slider는 jQuery 기반으로 만들어졌기 때문에 jQuery가 필요합니다. CSS JS 2. 기본 사용법 slick-slider의 기본 구성은 아래 코드 처럼 div형태로 구성되어 있는 html문서를 슬라이더 형태로 변경해줍니다. 1 2 3 4 5 $(function(..
