메뉴 기본 구성 현재 서브메뉴는 display: none; 처리되어 브라우저에는 메인 메뉴만 보입니다. 서브메뉴 한번에 드롭다운하기 - slideDown() & slideUp() 이용해서 드롭다운 - $('.gnb').mouseover(function(){}) gnb클래스에 마우스를 갖다대면 $(this).find('.sub') 선택한 요소의 자손들 중에 sub클래스를 찾아 .stop().slideDown(); 아래로 슬라이드하며 화면에 나타납니다. $(this) : 내가 선택한 요소를 가리킵니다. stop() : 실행 중인 모든 애니메이션을 중지시키고 요소의 상태를 고정시킵니다. 여기서 stop() 명령을 사용하지 않으면 서브메뉴가 slideDown을 반복하게 되기 때문에 서브 메뉴를 고정시키기 위해 ..
slick이란 slick은 웹 사이트에서 반응형을 구현하는 jQuery의 플러그인 입니다. 웹 페이지의 이미지 슬라이드에 많이 활용됩니다. https://kenwheeler.github.io/slick/ slick - the last carousel you'll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! kenwheeler.github.io slick 플러그인 연결하기 slick 홈페이지에서 파일 다운로드 압축을 풀고 slick 폴더 안에 있는 slick.css slick.min.js 파일을 현..
애니메이션 옵션 $('셀렉터').애니메이션명령(시간, easing, 콜백함수) easing : 구간 가속을 설정하는 옵션 콜백함수 : 애니메이션이 끝난 후 수행할 명령 easing swing(기본값) : 애니메이션이 일정한 속도로 진행 linear : 애니메이션의 진행 속도가 점점 빨라짐 콜백함수 callbackBt클래스를 클릭하면 callbackOK클래스가 5초간 서서히 나타나는 애니메이션 fadeIn이 실행되고 애니메이션이 끝난 뒤 실행될 함수로 css 배경색이 변경된다. -- 콜백함수를 썼을 때와 안 썼을 때의 차이 콜백함수를 쓰면 fadeIn(서서히 나타나는 이벤트)이 완료된 후에 배경색이 바뀌지만, 콜백함수를 쓰지 않고 css를 넣으면 fadeIn 이벤트 동작을 시작할 때 함께 배경색이 바뀌게 ..
