실무 팁
시작 링크
https://codepen.io/nuabohxs-the-vuer/pen/mdZbpVg
테일 윈드 활용하기
-
li요소에 밑줄 transition 주기
https://codepen.io/nuabohxs-the-vuer/pen/LYKPeYr?editors=1100 -
반응형 리스트 만들기(테일윈드 grid 사용)
https://codepen.io/nuabohxs-the-vuer/pen/ExBYoPo?editors=1100
제이 쿼리 활용하기
- 왠만하면 자바스크립트 말고 제이 쿼리 사용하자!
- 비밀번호 입력란 만들기
https://codepen.io/nuabohxs-the-vuer/pen/XWLrVpV?editors=1100
스와이퍼 활용하기
- 스와이퍼 데모
https://swiperjs.com/demos#pagination - 스와이퍼 사용하기
https://codepen.io/nuabohxs-the-vuer/pen/wvLwppG - 스와이퍼에도 반응형으로 작동이 된다.
ㄴ breakpoints : 화면 크기에 따라 크기 설정
AOS 활용하기
Tilt.js 활용하기
- Tilt.js 사이트
https://gijsroge.github.io/tilt.js/ - Tilt.js 사용하기
https://codepen.io/nuabohxs-the-vuer/pen/eYwOMZm
부가적 기능
- 글자 애니메이션 만들기
https://codepen.io/nuabohxs-the-vuer/pen/ZEdzrLm - 문장 애니메이션 만들기
https://codepen.io/nuabohxs-the-vuer/pen/ExBYQdx - 테마 라이트, 블랙에 따라 설정
https://codepen.io/nuabohxs-the-vuer/pen/JjQPpeY - 스크롤바 디자인 바꾸기
https://codepen.io/nuabohxs-the-vuer/pen/XWLrEWJ - GSAP 스크롤 트리거
https://gsap.com/demos/?page=1 - 커서 커스텀하기
https://codepen.io/nuabohxs-the-vuer/pen/vYqBRmd
student