AOS(Animate On Scroll Library) 사용법 저번에 "프론트엔드 개발자에게 추천하는 사이트 모음 (특히 뉴비)” 글에서 AOS라는 라이브러리를 소개해 드린 적이 있습니다.정말 좋은 라이브러리라 간단하게 소개하고 넘어가는 것이 아닌 사용법과 간단한 팀 몇 가지를 공유해 드리고 싶어 다시 가져와봤습니다.개인적으로 라이브러리를 가져와 사용할 때 가장 중요다고 생각되는 점은 순서대로 성능, 충돌 여부, 무게입니다.AOS는 위 3가지 조건을 모두 만족하면서 사용법 또한 간단합니다.AOS 사용법: See the Pen Untitled by 이종원 (@orugpbqu-the-solid) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스응용:1. 페이지 들어가자마자 컨텐츠 올라오는 인터렉션 주기. See t.. 2024. 11. 12. Swiper 옵션 알아보기 Swiper는 제가 겪은 슬라이드 관련 코드 중 단연 으뜸인 라이브러리입니다.옵션도 많고, 다른 라이브러리와 병행해서 사용하여도 잘 깨지지 않는다는 장점이 있습니다.그러나, 다양한 옵션이 있는데 이를 모르면 내 맘처럼 되지 않아 무척 답답한 마음이 들곤 합니다.이러한 어려움을 해결해 드리고자 스와이퍼에서 자주 사용되는 옵션의 설명과 간단한 팁을 준비해 보았으니 참고해 보시기를 바랍니다.// 기본 스와이퍼 JS 코드var swiper = new Swiper(".main-swiper", { // 슬라이드 방향 설정 (horizontal: 가로{가로가 기본값입니다.}, vertical: 세로) direction: "vertical", direction: 'horizontal', // 한 화면에 표.. 2024. 11. 11. 클릭 이벤트 발생 시 네이버 지도로 새 탭 띄워서 바로 검색하기! 아래 코드는 클릭 이벤트 발생 시 바로 새 탭을 띄우고 네이버 지도로 경로를 검색할 수 있는 코드입니다. 자동차 대중교통 Find Way주의 사항: 대중교통은 경유지를 추가할 수 없습니다. 경유지 추가 시 자동으로 자동차 경로로 검색됩니다.네이버 지도는 최대 5개의 경유지를 허용합니다. 아래 코드는 2개의 경유지만 추가하였으나 같은 방법으로 뒤에 경유지를 추가해 주시면 됩니다. 경로 검색을 위해서는 해당 주소의 경도와 위도를 알아야 합니다. 경도와 위도는 아래 링.. 2024. 11. 7.
