Swiper 플러그인 연결 https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com css script Swiper로 이미지 슬라이드 만들기 swiper-wrapper, swiper-slide 클래스 이름 반드시 지켜줘야함!! ex) Swiper 옵션 Swiper 사이트 상단 메뉴 Resources->Demos에서 다양한 옵션 소스를 확인할 수 있습니다. ex) ( 참고로 swiper는 슬라이드 무한루프 안됨!)
CSS 사이즈 기본 단위 절대 단위 px, in, cm, mm, pt, pc 상대 단위 em rem % vw(뷰포트 너비) vh(뷰포트 높이) 기타 vmin(뷰포트 최소너비) vmax(뷰포트 최대너비) font-size에서 많이 사용하는 단위 em : 부모 폰트의 크기를 기준으로 상대적인 크기 설정 rem : 가장 상위태그 HTML의 폰트 크기를 기준으로 상대적인 크기를 설정 font-size 변수로 만들어 사용하기 브라우저 사이즈별로 font-size를 키울 때, font-size 앞에 ' -- ' 를 넣으면 변수로 설정해서 사용하실 수 있습니다.
slick 반응형 옵션 responsive slick에서 breakpoint는 초과 값을 의미 1280 이상일 때 설정을 하고 싶으면 breakpoint : 1279로 입력 mobileFirst : 모바일을 기준으로 시작 slidesToShow : 한 번에 보여질 슬라이드 개수 arrows : 슬라이드 버튼 infinite : 무한대로 슬라이드 넘기기
overflow: scroll : 요소의 내용이 요소 크기를 초과하는 경우 스크롤바를 추가하여 해당 영역을 확인할 수 있습니다. overflow: scroll : 가로 세로 스크롤바 overflow-y: scroll : 세로 스크롤바 overflow-x: scroll : 가로 스크롤바
