offset() 명령 $('셀렉터').offset() : 셀렉터로 선택 한 요소의 위치를 반환 box2클래스의 위치값을 변수에 넣어 로그로 확인할 수 있습니다. ( f12-console ) scrollTop() & scrollLeft() 명령 $('셀렉터').scrollTop() : 스크롤바의 세로위치를 저장 $('셀렉터').scrollLeft() : 스크롤바의 가로위치를 저장 스크롤을 내리면 변하는 위치값을 콘솔에서 확인 가능 활용예시 브라우저의 스크롤을 200px 밑으로 내리면(if) box2의 배경색이 pink로 바뀌고 그렇지 않으면(else) lightgray 색으로 바뀜
jQuery Top버튼 만들기 : 브라우저 스크롤을 맨 위로 올리는 버튼 버튼 형태를 만들어줍니다. $('셀렉트').click() : 셀렉트를 클릭하면 발생하는 이벤트 $('html, body').stop().animate({scrollTop : 0}) : html과 body 태그의 스크롤 위치값을 0으로 만드는 애니메이션 Bottom 버튼
메뉴 기본 구성 현재 서브메뉴는 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 파일을 현..
