자주 사용하는 JS 라이브러리들
Front/JavaScript 2023. 5. 1.더보기
- 각 라이브러리 소개 홈페이지에 들어가 Get started 메뉴 정독 (github 일 경우 readme 파일)
- 설명서에 필요한 js 파일, css 파일을 설치
- Get started 예제 코드 or 오픈 코드 복사붙여넣기
- 끝!
- Swiper
- 캐러셀(이미지 슬라이드)를 예쁘게 만들 수 있다.
- → js 파일, css 파일 다운 받아서 첨부한 후에 예제 코드를 복사 붙여넣으면 실행됨!
-
더보기<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<style>
.mySwiper {
width: 100%;
height: 300px;
}
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper(".mySwiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});
</script>
</body>
</html>
- Chart.js
- 웹페이지에 차트를 만들 때 사용할 수 있습니다.
- Animate On Scroll
- 스크롤 내리면 요소가 천천히 등장하는 애니메이션 관련 라이브러리
- 깃허브에서 css파일, js 파일 cdn 버전 찾아서 html 에 삽입하고
-
더보기<script>
AOS.init();
</script> - 입력하면 됨!
- Fullpage.js
- 웹페이지를 PPT 처럼 만들어주는 라이브러리
- 상업적 이용은 유료
- Slick
- → Slick 자바스크립트, Slick CSS 파일, jQuery 파일 첨부가 필요!
- navnav
- 다양한 navbar들을 이용할 수 있는 사이트
- Full Calender
