밀 종합 ٩(`╹ω╹´)و

See the Pen [swiper] 기본 설정 모두 넣음 by mill (@millfeel) on CodePen. [연관] 기본 설정

See the Pen [Swiper] 추가 옵션 by mill (@millfeel) on CodePen. 옵션 기본값 값 설명 direction 'horizontal' 'horizontal' | 'vertical' 슬라이드 방향 speed 300 number 슬라이드 전환 시간 단위: ms freeMode false boolean 활성화하면 슬라이드에 고정 된 위치가 없다. allowTouchMove true boolean 스와이프 막는 기능 [false 인 경우] 슬라이드를 전환하는 유일한 방법은 slidePrev 또는 slideNext와 같은 외부 API 기능을 사용하는 것이다. watchOverflow false boolean 슬라이드가 1개 일 때 pager, button 숨김 여부 설정 slid..

slidesPerView, slidesPerGroup, spaceBetween, slidesPerColumn과 같이 다른 레이아웃과 로직이 필요하지 않은 매개 변수만 변경할 수 있다. 루프 및 효과와 같은 매개 변수는 작동하지 않는다. See the Pen [Swiper] 반응형 설정 by mill (@millfeel) on CodePen. 설정 값이 이해 안될 때, 기본 설정 참고

const swiper = new Swiper('.swiper-container', { a11y: { prevSlideMessage: 'Previous slide', nextSlideMessage: 'Next slide', }, }); swiperjs.com/swiper-api#accessibility-a11y Swiper API Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com

See the Pen [컴포넌트 CSS] util menu by mill (@millfeel) on CodePen.

CDN 설정 방법 # 01:00 보안때문에 외부 연결을 못하는 경우, 플러그인을 다운받아서 사용하고, 보통은 CDN을 사용한다. # 01:18 swiperjs.com/get-started#installation Getting Started With Swiper Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 각각 2개의 CDN 중 CSS는 일반 CSS를 사용한다. => 커스텀 마이징을 하기 위해서 JS는 min 버전을 사용한다. # 02:10 Swiper을 사용하기 위해서 제이쿼리를 사용해야 함. code.jquery.c..

See the Pen [인터랙션 CSS] 햄버거 메뉴 만들기 by mill (@millfeel) on CodePen. 접근성 이슈 tab 사용시 포커스 되지 않는 이슈를 해결하기 위해서 "tabindex"를 사용해야 하고, role과 aria-label을 선언하여 해당 ‘div’ 영역에 대한 설명을 제공해야한다. label의 기본 속성은 포커스가 되지 않는다. input[id='menuicon'] {display: none;} input[id='menuicon'] + label { position: relative; display: block; width: 60px; height: 40px; cursor: pointer; /* 포인터가 label에 설정돼 있다. */ background-color: #d..

window.addEventListener('click', function(e){ e.preventDefault('막을 대상'); });