반응형 Jquery, Javascript17 [Jquery] Bxslider 사용해서 쉽게 슬라이드 사용하기 안녕하세요 Bxslider 소개해드립니다. 홈페이지에서 슬라이드 넘기는 동작을 사용할 때가 많은데요, 그때 Bxslider 사용해서 쉽게 슬라이드를 만들수 있습니다. 사용방법은 간단 cdn 주소 불러와서, 슬라이드 사용할 곳들을 셋팅해서 jquery를 입혀 주기만 하면 Bxslider를 사용할 수 있습니다. 1. jquery라이브러리, bxslider jquery cdn 적용 1번째 - jquery 라이브러리 2번째 - bxslider 구성하는 css스타일 3번째 - bxslider 작동하게 하는 js파일 사이에 적용해줍니다. 2.html 구성 css .slider_wrap{width:100%;max-width:600px;margin:0 auto;} .my_bxslider img{width:100%;} .. 2022. 9. 20. [Jquery] datepicker 사용 제이쿼리로 달력 입력 방법 달력을 이용해서 날짜를 입력하고 싶을 경우에 자주 사용되는 datepicker를 소개합니다 jquery에서 제공하는 기본 달력 ui 입니다. 참고사이트 https://jqueryui.com/datepicker/ Datepicker | jQuery UI Datepicker Select a date from a popup or inline calendar The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (b .. 2022. 9. 1. [Jquery] 이미지 떨림효과 주기 마우스 올렸을때 이미지가 떨리는것처럼 보이는 효과 입니다. 이미지를 icon 클래스의 div로 감싸주었습니다. 스크립트 하단 쪽에 스크립트 넣어줍니다. 2022. 8. 25. [Jquery] 스크롤 내렸을때 상단 메뉴 변경 스크롤 내렸을때 상단 컨텐츠가 바뀌는 스크립트를 소개합니다. #wrap{width:100%; height:1000px;} .main{width:100%; height:50px; background-color:blue; text-align:center; line-height:50px;} .scroll{width:100%; height:50px; position:absolute; left:0; top:0; background-color:green; text-align:center; line-height:50px; color:#fff; font-weight:600;} 상단 메뉴 스크롤 했을때 상단 메뉴 HTML, 스타일은 위와 같이 설정 해 주었습니다. $(document).ready(function(){ v.. 2022. 8. 11. 이전 1 2 3 4 5 다음 반응형
