overflow 속성 웹 개발에서 자주 사용되는 CSS의 속성 'overflow: hidden'에 대해서 알아보겠습니다. 우선, 'overflow' 속성이란 요소의 내용이 요소의 크기를 넘어가게 되면 어떻게 처리할지를 지정하는 역할을 합니다. hidden: 넘치는 부분이 보이지 않도록 숨깁니다. visible: 요소의 외부로 표시됩니다. scroll: 요소에 스크롤 바가 추가되어 넘치는 내용을 볼 수 있습니다. auto: 내용이 넘칠 경우에만 스크롤 바를 추가합니다. ex) overflow: hidden ex) overflow: visible
slick 옵션 autoplay : true : 자동재생 autoplaySpeed : 5000 : 자동재생 속도 5초 speed : 1000 : 재생 속도 1초 slidesToShow : 3 : 화면에 한 번에 3개를 보여줌 slidesToScroll : 3 : 슬라이드 넘길때 3개씩 넘어감 centerMode : true : 캐러셀 센터 모드 vertical : true : 세로방향 슬라이드 arrows : false : 버튼 없애기 variableWidth: true : 너비값 다양하게 주기 (안하면 각 이미지 너비값 동일함) ( slick 버튼 영역에는 a태그 사용금지 악먹히게 만들어놨음)
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 버튼
