slick 이미지 슬라이드 dots 디자인 바꾸는 법 customPaging을 하지 않은 기본 dots입니다. customPaging : function(slider, i){ return i+1 + '/' + slider.slideCount; } 현재 페이지 수를 나타내는 i는 인덱스 0부터 시작하기 때문에 1부터 시작하기 위해서 i + 1 해줍니다. slider.slideCount는 전체 페이지 수를 나타냅니다. 해당 페이지만 보이기 위해서 모든 페이지를 display : none 해주고 .slick-active 해당 페이지는 display : block; 해줍니다.
on 메소드 : on 메소드는 선택한 요소에 이벤트 핸들러를 등록하여 특정 이벤트에 대한 동작을 정의하는 jQuery 함수 입니다. $('셀렉터').on('이벤트명', 함수); 이벤트 핸들러 등록 $('input태그').val() : input태그의 value 값 저장 이벤트 핸들러 제거
미디어 쿼리 미디어 쿼리는 웹 페이지, 앱의 뷰 포트 크기, 장치 종류, 화면 방향 등 미디어의 특성에 따라 스타일을 적용할 수 있게 해주는 CSS입니다. @media 미디어 유형 and 조건 { } 미디어 유형의 종류 all print screen tv aural braille handheld projection tty embossed breakpoint(중단점) : 서로 다른 css를 적용할 화면 크기 스마트폰 portrait(세로) 320px, landscape(가로) 480px 태블릿 세로 768px 가로 1024px 데스크톱 1024px
slick 플러그인 연결 https://bagun-coding.tistory.com/entry/JavaScript-slick-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EC%97%B0%EA%B2%B0%ED%95%98%EB%8A%94-%EB%B2%95 [JavaScript] slick 플러그인 연결하는 법 slick이란 slick은 웹 사이트에서 반응형을 구현하는 jQuery의 플러그인 입니다. 웹 페이지의 이미지 슬라이드에 많이 활용됩니다. https://kenwheeler.github.io/slick/ slick - the last carousel you'll ever need slick is bagun-coding.tistory.com html 구조 ( slick 버튼은 a태..
