개인 공부용 블로그

simplyscroll바로가기 jQuery simplyScroll - Logicbox Jump to: [Features] [Examples] [Download] [Installation] [Config] This plugin is now legacy and is mostly unsupported! Core functionality still works, but all features described may not work as intended or at all, please use at your own risk! simplyScroll www.logicbox.net HTML ul > li 구조로 감싼 뒤 img를 넣어준다. jQuery $(function() { $('#scroller').simplyS..

swiperSlider 바로가기 HTML Slide 1 Slide 2 Slide 3 ... CSS scrollbar 사용시 scrollbar-drag 색상 및 너비 제어하기 /* will not work as it should 스크롤바 너비 제어 */ .swiper-horizontal .swiper-scrollbar{width: 50%!important;} .swiper-horizontal .swiper-scrollbar .swiper-scrollbar-drag {background-color: red;} var swiper = new Swiper(".categorySwiper", { //초기값 설정은 모바일이 먼저 적용됨 spaceBetween: 60, //간격 slidesPerGroup: 2, //슬..

업무를 하다보니 PC버전과 mobile 버전을 구분해서 사용하는 곳이 있었다. pc버전 하고 mobile버전을 하는데 계속 휴대폰을 번갈아 보면서 하는 수고를 덜기 위해 팀장님께 정보 획득 +1 https://chrome.google.com/webstore/category/extensions?hl=ko Chrome 웹 스토어 Chrome에 사용할 유용한 앱, 게임, 확장 프로그램 및 테마를 찾아보세요. chrome.google.com 크롬 웹스토어에 user라고 검색하면 많은 플러그인이 나온다. https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg?hl=ko User-Agent ..

ScrollReveal 바로가기 1. 적용해보기 상단의 Guide를 클릭해서 cdn을 html에 넣어준다.

slick slider 바로가기 1. slick 다운로드 및 js, css 파일 다운하기 우측 상단의 get it now를 클릭해서 Download Now 클릭 고고. View On Github 바로가기 아래의 링크를 head 태그에 넣어주어야 한다. js파일도 추가 slick slider의 형식 1 2 3 4 5 6 2. 만들어보기 참고자료 slick slider 사용법 및 옵션 (반응형 포함) - 삽질중인 개발자

폰트어썸을 적용하려면 본인의 이메일을 전송해 개인의 cdn 넘버를 부여받아야 한다. 번거롭다면 아래의 cdnjs를 통해 받을 수도 있다. 1번: version의 종류 2번: css, js 등의 종류 cdnjs.con 바로가기 폰트어썸 적용하기 [head태그 적용 예시] 버전별 아이콘 차이 버전4 class="fa" // 버전5 class="fas" 아이콘 불러오기 폰트어썸 바로가기 유료결제가 아니어도 기본적으로 사용할 수 있는 icon은 많다. 위의 코드를 클릭하면 자동 복사가 된다. 폰트어썸은 기본적으로 i태그를 사용한다. 아이콘 클래스에 별도 클래스를 삽입해 크기를 조절할 수 있다. 클래스 명 확대 사이즈 fa-lg 33% 확대 fa-2x 2배 확대 fa-3x 3배 확대 fa-4x 4배 확대 fa-5..

https://owlcarousel2.github.io/OwlCarousel2/ https://www.jqueryscript.net/demo/Powerful-Customizable-jQuery-Carousel-Slider-OWL-Carousel/#how-to 태그 안에 경로 설치하기 태그에 위 두개 CSS파일을 포함시킨다. 📌owl.carousel.css 파일 필요하며 css파일은 js파일 앞에 있어야 한다. 📌owl.theme.default.css : 선택사항. 기본 탐색 컨트롤이 필요할 경우 필요하다. 📌첫번째로 jquery파일 📌두번째로 caruosel.js 파일을 넣는다. MarkUP Your Content Your Content Your Content Your Content Your Conten..

PC에 최적화되어 있는 라이브러리 원본 슬라이드 크기에 따라 유연하게 변경됨 live server를 통해 본 최종 결과 사이트를 가보면 다른 예시들을 볼 수 있고 빠른 적용이 가능하다. http://fancybox.net/ Fancybox - Fancy jQuery lightbox alternative What is it? FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page. It was built using the jQuery library. Licensed under both MIT and GPL licenses Featur..