Swiper 옵션 알아보기 Swiper는 제가 겪은 슬라이드 관련 코드 중 단연 으뜸인 라이브러리입니다.옵션도 많고, 다른 라이브러리와 병행해서 사용하여도 잘 깨지지 않는다는 장점이 있습니다.그러나, 다양한 옵션이 있는데 이를 모르면 내 맘처럼 되지 않아 무척 답답한 마음이 들곤 합니다.이러한 어려움을 해결해 드리고자 스와이퍼에서 자주 사용되는 옵션의 설명과 간단한 팁을 준비해 보았으니 참고해 보시기를 바랍니다.// 기본 스와이퍼 JS 코드var swiper = new Swiper(".main-swiper", { // 슬라이드 방향 설정 (horizontal: 가로{가로가 기본값입니다.}, vertical: 세로) direction: "vertical", direction: 'horizontal', // 한 화면에 표.. 2024. 11. 11. text-overflow: ellipsis;로 ... 처리(말 줄임 처리)되면 JS로 이벤트 발생하기 text-overflow: ellipsis;는 글이 너무 길어질 경우 마지막 부분을 ...처리할 수 있는 CSS 코드입니다.흔히 말 줄임 효과라고 합니다.PC 화면에서는 말줄임 효과가 나타나지 않지만 반응형 작업을 하다 보면 ellipsis의 효과로 말 줄임이 되는 경우가 있습니다.이때 JS로 반응형에서는 다른 모습을 보여주거나 이벤트를 발생시킬 수 있도록 코드를 정리하였습니다.아래 코드를 통해 디자이너와 상의해서 더욱 다채로운 사이트를 만드셨으면 좋겠습니다. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy t.. 2024. 11. 9. 클릭 이벤트 발생 시 네이버 지도로 새 탭 띄워서 바로 검색하기! 아래 코드는 클릭 이벤트 발생 시 바로 새 탭을 띄우고 네이버 지도로 경로를 검색할 수 있는 코드입니다. 자동차 대중교통 Find Way주의 사항: 대중교통은 경유지를 추가할 수 없습니다. 경유지 추가 시 자동으로 자동차 경로로 검색됩니다.네이버 지도는 최대 5개의 경유지를 허용합니다. 아래 코드는 2개의 경유지만 추가하였으나 같은 방법으로 뒤에 경유지를 추가해 주시면 됩니다. 경로 검색을 위해서는 해당 주소의 경도와 위도를 알아야 합니다. 경도와 위도는 아래 링.. 2024. 11. 7. history를 사용해 앱처럼 뒤로가기 최근 업무 중에 재밌는 요청이 있었습니다.햄버거 메뉴나 검색 모달을 뒤로 가기 했을 때 모달 컨텐츠만 닫히고 페이지가 뒤로 가지 않았으면 좋겠다는 것이었습니다.여차저차 성공해서 뒤로가기 했을 때 페이지가 뒤로 가는 것이 아닌 모달 컨텐츠만 닫히도록 하였습니다.아래 코드의 진가는 모바일 제스쳐, 마우스 좌측의 뒤로 가기 버튼에 있습니다.모바일에서 제스쳐 뒤로 가기나 마우스로 뒤로 가기를 해도 페이지 이동이 아닌 모달 컨텐츠만 닫히는 것입니다!좀 더 앱 환경에 가까워진 것이죠.이 좋은 걸 저 혼자만 알 수 없어서 코드를 다듬어 왔습니다.아래 코드를 VS Code에서 라이브 서버로 보시면 한 눈에 이해하실 수 있습니다. See the Pen Untitled by 이종원 (@orugpbqu-the-soli.. 2024. 10. 10.
