본문 바로가기
반응형

Jquery, Javascript17

[Jquery] 컨텐츠, 게시물 더보기 버튼 만들기 (more 버튼) 컨텐츠나 게시물이 너무 많을시 한번에 다 노출되는 것보다 조금씩 노출시켜서, Jquery를 사용해 더보기 버튼을 만들어 깔끔하게 노출 시킬수 있습니다. 초기에 컨텐츠에 display:none 을 지정해주어야 합니다. Content Content Content Content Content Content Content Content Content Content 더 보기 더보기 버튼에 id를 지정해 줍니다. 저는 load id를 지정해주었습니다. 하단에 스크립트를 넣어줍니다. 상황에 따라 갯수를 수정해서 사용 가능합니다. 더보기 버튼을 눌러서 컨텐츠를 more 할수 있습니다. 2022. 8. 10.
[Jquery] 모바일 기기 접속시 모바일 페이지로 이동하기 1. 상단 head 사이에 스크립트 삽입해줍니다. 이동할 경로에 경로만 넣으시면 됩니다.. 2022. 8. 5.
[Jquery] Swiper Slider 이용해서 쉽게 슬라이드 사용하기 1. swiper 라이브러리를 복사해서 head 안에 넣어줍니다. 2. 슬라이드 할 HTML 코드를 작성합니다. Slide 1 Slide 2 Slide 3 3. 하단 body 끝나는 윗지점에 script를 넣어줍니다. 4. 결과 3단계로 간단히 만들었구요, 옵션을 사용해서 사용하고 싶은대로 옵션 스크립트를 수정해주면 됩니다. swiper 옵션정리 slidesPerView : 'auto', // 한 슬라이드에 보여줄 갯수 spaceBetween : 6, // 슬라이드 사이 여백 loop : false, // 슬라이드 반복 여부 loopAdditionalSlides : 1, // 슬라이드 반복 시 마지막 슬라이드에서 다음 슬라이드가 보여지지 않는 현상 수정 pagination : false, // pager.. 2022. 8. 4.
[Jquery] 쉽게 모달창 띄우기 구글링하다가 쉽게 모달창 띄우는 방법을 발견해서 저장,공유용으로 작성합니다. https://jquerymodal.com/ jQuery Modal This example demonstrates how visually customizable the modal is. This example shows how modals are centered automatically. It also demonstrates how a vertical scrollbar appears whenever the modal content overflows. More! Lorem ipsum dolor sit amet, consec jquerymodal.com 1.라이브러리 복사 해줍니다. 2. HTML 코드 작성 모달창 내용부분 div의.. 2022. 8. 3.
반응형