슬라이드에서 autoplay(자동재생)를 적용한 경우 마우스 오버, 아웃 시 멈춤, 재생하는 이벤트 조작법 autoplay 적용 var swiper = new Swiper('.mySwiper',{ autoplay: { delay: 2000, // 2초 disableOnInteraction: false, }, }); disableOnInteraction의 기본값은 true로 사용자가 슬라이드를 움직일(마우스 드래그로 슬라이드 전환) 경우 자동재생이 멈추게 되므로 이 기능은 비활성화 하는 편이 좋다. 마우스 오버/아웃 시 슬라이드 멈춤/재생 // JS let $slides = document.querySelectorAll('.swiper-slide'); for(let i of $slide) { i.addEv..

기본 세팅 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 script(옵션)var swiper = new Swiper('.mySwiper', { direction: 'horizontal' // 기본값. 수직은 'vertical' slidesPerView : 'auto', // 화면에 보여질 슬라이드의 갯수(숫자도 가능) slidesPerGroup : 3, // 그룹으로 묶을 슬라이드의 갯수 (slidePerView와 같으면 좋음) spaceBetween: 10, // 슬라이드..

window.scrollTo() 문서의 지정한 위치로 스크롤 되는 함수 사용법 // window.scrollTo(x좌표, y좌표); window.scrollTo(0, 0); // window.scrollTo({top:x좌표, left:y좌표, behavior:''}) window.scrollTo({top:0, left:0, behavior:'smooth'}) 맨 위로 / 맨 아래로 가기 HTML / CSS JS // 맨 위로 가기 $('.top').click(function(){ window.scrollTo({top:0, left:0, behavior:'smooth'}) }); // 맨 아래로 가기 $('.bottom').click(function(){ let bottom = document.body.s..

1. 태그를 쓸 때 : border-collapse: collapse; HTML 내용1 내용2 내용3 내용4 내용5 내용6 적용 전 CSS td { padding:5px; border:1px solid #000; } 적용 후 CSS td { padding:5px; border:1px solid #000; } table { border-collapse: collapse; } border-collapse: collapse; 은 table 태그에 적용하면 된다. 2. display: table태그를 쓸 때 : border-collapse: collapse; HTML 박스1 박스2 박스3 CSS .wrap { display: table; border-collapse: collapse; } .box { paddi..

긴 문장을 말줄임표로 처리하는 속성은 text-overflow: ellpsis와 -webkit-line-clamp:숫자 가 있다. HTML 다른 삶은 없다고 말하는 이에게 다른 삶이 있다고 말해서는 안 된다. 어떤 절망에는 다른 삶을 꺼낼 수조차 없어야 한다. 잦아드는 불씨처럼 타들어가는 숨이 마침내 다 꺼질 때까지. 형체를 간직하고 있지만 이내 주저앉아 바스러질 때까지. 그대로 내버려두는 수밖에 없다. 그러니 절망하지 않는 사람이 절망하는 사람에게 할 수 있는 것은 없다. 한 줄로 표시하기 CSS .word { display: block; width: 500px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; border: 1px so..

.swiper-wrapper { display: -webkit-inline-box } swiper 사용 시 세로정렬이 되는 경우 swiper-wraper에 해당 값을 입력하면 된다. 참고사이트 https://morohaji.tistory.com/21