본문 바로가기

분류 전체보기148

[library] Swiper.js 편하게 슬라이드 캐러셀 구현하기 Swiper https://swiperjs.com 유명하고 더 편한 터치 반응형 슬라이더들도 많지만 (slick 등등..) 제이쿼리를 쓰지 않고 바닐라JS만을 가지고 사용이 가능하며, 무료로 사용이 가능하기에 프로젝트에 자주 이용 하고 있는 슬라이더 라이브러리다. React, Svelte, Vue, Angular 에서도 사용이 가능하다. 사용 방법 NPM 으로 설치하기 $ npm install swiper // import Swiper JS import Swiper from 'swiper'; // import Swiper styles import 'swiper/css'; const swiper = new Swiper(...); CDN에서 사용하기 //CSS 파일 추가 //JS 파일 추가 기본적으로 설정해.. 2022. 11. 25.
[정규식] 정규표현식 모음사이트 https://ihateregex.io/ 2022. 11. 25.
[BOX-SHADOW] 그림자효과가 어려울때 https://getcssscan.com/css-box-shadow-examples css로 박스쉐도우 주기 까다롭거나 이쁘게주는 방법을 모르겠을때, 가끔씩 이용하는 사이트이다. .text{ box-shadow: rgba(100,100,111,0.2) 0 7px 29px 0px; } 원하는 효과 스타일의 그림자가 표현된 박스를 클릭하면 값이 복사가 되는데, [ctrl+v] 를 하면 box-shadow 값을 가지고 올 수 있는 것을 볼 수 있다. 2022. 11. 25.
[HTML 디자인 및 마크업] 더미이미지 사이트 https://placeholder.com/ 웹페이지 제작에 사용되는 더미 이미지로 이미지들을 표기 하는게 아닌 box에 규격 및 색상등 간단하게 표기 할 수 있다. 사용 방법은 간단하다. https://via.placeholder.com/ 해당 URL 뒤에 / 사이즈 / 색상코드.(png jpg) / 글씨색상 순서로 입력 해주면 된다. image test 2022. 11. 25.
728x90