Swiper
캐러셀 (이미지슬라이드되는거) 만들고 싶으면 직접 코드 짜도 되겠지만
좀 이쁘게 아니면 쉽게 여러기능을 만들고 싶으면 Swiper 라이브러리 써도 됩니다.
호환 잘되고 이미지 lazy loading 이런 것도 되고 터치/드래그도 됩니다.
https://swiperjs.com/get-started#use-swiper-from-cdn
튜토리얼 그대로 js 파일, css 파일을 다운받아서 첨부한 뒤에
html css js 예제코드 복사붙여넣기하면 캐러셀이 나옵니다.
사용법도 홈페이지 참고하면 됩니다.
Chart.js
웹페이지에 차트만들고 싶으면 씁니다.
실제 서비스면 관리자, admin 페이지 만들 때도 많을텐데 거기서 통계를 이쁘게 보여줄 때 유용하겠군요.
div 박스에 css 스타일 넣어서 그래프만들고 그림그리고 해도 되겠지만 그럴 바엔 저거 쓰는게 낫습니다.
코인거래소 같은 곳에는 더 프로페셔널한 유료 차트라이브러리 같은걸 쓰기도 합니다.
https://cdnjs.com/libraries/Chart.js
이런데 가서 js 파일 다운받거나 cdn 버전으로 구해서 html 파일에 넣으면 설치끝입니다.
https://www.chartjs.org/docs/latest/
그리고 Chart.js 홈페이지 예제 코드 아무데나 붙여넣기 하면 차트나옴
Animate On Scroll
스크롤 내리면 요소가 서서히 등장하는 애니메이션을 만들고 싶을 때 쓰면 좋습니다.
유저가 스크롤바를 ... div 박스 현재 y좌표만큼 내리면 애니메이션 보여달라고 코드짜면 되긴 하는데 귀찮으니까요
https://github.com/michalsnik/aos
여기서 css파일, js 파일 cdn버전 찾아서 html 파일에 넣고
그 다음에 밑에 script 태그 열어서
<script>
AOS.init();
</script>설치 끝
https://michalsnik.github.io/aos/
그 다음에 위 사이트에서 예제 코드 따라서 복붙하면 구현 끝
<div data-aos="fade-up"></div>원하는 박스에 이런거 추가하면 된다고합니다.
시간, 방향 설정가능하고 원하는 클래스명 부착도 되는군요
EmailJS
원래 이메일 전송은 서버가 해야하지만 Gmail 이런거 서버를 잠깐 빌리면
자바스크립트만으로 이메일 전송이 가능합니다.
유저가 내 이메일 계정으로 이메일 전송도 가능하고
내 이메일 계정으로 남에게 이메일 전송도 가능함
https://www.emailjs.com/docs/introduction/how-does-emailjs-work/
이 사이트 가서 가입하고 계정만들고 튜토리얼 그대로 복붙하고 거기에 내가 방금 만든 EmailJS 계정아이디만 잘 채우면 됩니다.
