# 유용한 CSS, 자바스크립트 라이브러리 소개 ## 라이브러리 CDN 정리 - [라이브러리 CDN 정리](https://codepen.io/sangwon7242/pen/raBvbMX?editors=1000) --- ## 1. jQuery - [jQuery 공식 홈페이지](https://jquery.com/) **설명** DOM 조작, 이벤트 처리, 애니메이션 등을 간편하게 할 수 있는 자바스크립트 라이브러리. **특징** - 간단한 문법으로 HTML 요소를 조작 가능. - AJAX 요청을 쉽게 처리. - 오래된 브라우저에서도 호환성 제공. **예제** ```html ``` --- ## 2. Lodash - [Lodash 공식 홈페이지](https://lodash.com/) **설명** 배열, 객체, 문자열 등의 데이터를 쉽게 조작할 수 있는 유틸리티 라이브러리. **특징** - 데이터 변환과 조작을 위한 다양한 함수 제공. - 중복 제거, 배열 나누기 등 복잡한 작업을 간단히 처리. **예제** ```html ``` --- ## 3. Tailwind CSS - [Tailwind CSS 공식 홈페이지](https://tailwindcss.com/) **설명** 유틸리티 클래스 기반의 CSS 프레임워크로, 빠르고 효율적으로 스타일링 가능. **특징** - 미리 정의된 유틸리티 클래스를 사용하여 CSS를 작성할 필요가 없음. - 반응형 디자인 지원. **예제** ```html

Tailwind로 스타일링된 박스

``` --- ## 4. Font Awesome - [Font Awesome 공식 홈페이지](https://fontawesome.com/) **설명** 다양한 아이콘을 쉽게 사용할 수 있는 라이브러리. **특징** - 무료 및 유료 아이콘 제공. - 간단한 클래스 추가로 아이콘 사용 가능. **예제** ```html ``` --- ## . Swiper - [Swiper 공식 홈페이지](https://swiperjs.com/) **설명** 반응형 슬라이더/캐러셀을 구현할 수 있는 라이브러리. **특징** - 터치 및 마우스 드래그 지원. - 다양한 커스터마이징 옵션 제공. **예제** ```html

슬라이드 1

슬라이드 2

``` --- ## 6. AOS (Animate On Scroll) - [AOS 공식 홈페이지](https://michalsnik.github.io/aos/) **설명** 스크롤 시 애니메이션 효과를 추가할 수 있는 라이브러리. **특징** 다양한 애니메이션 효과 제공. 간단한 속성 추가만으로 구현 가능. **예제** - [AOS 예제 코드](https://codepen.io/sangwon7242/pen/vEBjMpJ) ```html

스크롤 애니메이션

``` --- ## 7. FullPage.js - [FullPage.js 공식 홈페이지](https://alvarotrigo.com/fullPage/) **설명** 페이지를 풀스크린 방식으로 스크롤할 수 있도록 도와주는 라이브러리. **특징** 각 섹션을 풀스크린으로 표시. 터치 스크롤 및 키보드 네비게이션 지원. **예제** - [FullPage 예시코드](https://codepen.io/sangwon7242/pen/raBvbJa) ```html

섹션 1

섹션 2

``` --- ## 8. Hammer.js - [Hammer.js 공식 홈페이지](https://hammerjs.github.io/) **설명** 터치 제스처(스와이프, 핀치, 팬 등)를 쉽게 감지할 수 있는 라이브러리. **특징** 모바일 환경에서 제스처 이벤트 처리 간편. 다양한 제스처 이벤트 지원. **예제** - [Hammer 예제코드](https://codepen.io/sangwon7242/pen/QwLrPQY?editors=0110) - [마우스 드래그 효과](https://codepen.io/sangwon7242/pen/dPbKRPa?editors=0010) ```html

터치 제스처를 테스트하세요!

``` ---

유용한 자바스크립트 라이브러리 모음