jquery8 숙소 인원 설정 해보기 완성화면 ui 설명서 객실은 최대 3개까지 선택 객실별 성인은 최대 10명 (기본값 1) 객실별 아동은 최대 3명 (기본값 0) html 인원 및 객실수 객실1 성인 - + 아동 - + 나이 2세 3세 4세 5세 나이 2세 3세 4세 5세 나이 2세 3세 4세 5세 객실추가 css a{text-decoration: none;} input[type=text]{border:none;outline: none;width:20px;text-align: center;} .ally{position:absolute;display:block;width:1px;height: 1px;margin:-1px;padding:0;border:0;overflow: hidden;} .btn-base{background: #000;di.. 2022. 7. 4. 모바일) 선택한 탭, 센터로 이동하기 html --------------------------------------------------------------- 하와이 괌 태국 베트남 일본 영국 스페인 뉴질랜드 스위스 css --------------------------------------------------------------------- .tabs-container{ margin:20px 0; .tabs-wrapper{ width:100vw; overflow-x: scroll; -ms-overflow-style:none; scrollbar-width: none; padding:0 0 0 15px; box-sizing: border-box; display: flex; &::-webkit-scrollbar{ display: none;.. 2022. 6. 29. mCustomScrollbar 사용 사용 동기 시스템 기본 스크롤이 아닌 예쁘게 디자인된 스크롤을 사용하고 싶었다. 회사 내에서 이 스크립트를 살짝 수정하여 사용중인데, 원 스크립트의 기본 동작을 시간 날때 살펴봐야겠다는 생각을 함. (링크 : http://manos.malihu.gr/jquery-custom-content-scroller/) HTML 구조 내용가득......................... // script 에 content class를 이용하여 스크롤 사용을 등록함 (아래 참조) , 참고로 mCustomScrollbar 클래스는 반드시 추가하여야 함. SCRIPT 구조 CSS 구조 .content {width: 200px; height: 200px; } // 높이값이 반드시 들어가야 작동합니다. 저는 내용값이 heig.. 2022. 1. 12. 현재 국내 도시 날씨 알아보기 (jquery) 본 예제는 다음 동영상을 참고하여 작성되었습니다. 출처 : youtu.be/ccTAedW2KPg See the Pen seoul weather by ziziziczic (@ziziziczic) on CodePen. 본 예제는 날씨 정보를 json 형식으로 실시간으로 받습니다. 날씨 정보를 얻는데 필요한 정보는 도시코드와 개인 key값입니다. 이를 조합하여 접속 url이 만들어집니다. (개인 key는 회원 가입으로 얻을수 있으며, 도시코드는 사이트에 나와있습니다.) json 파일에서 날씨 정보의 일부만 발췌하여 보여줍니다. 2021. 1. 4. gallery 따라 만들기 See the Pen gallery animation by ziziziczic (@ziziziczic) on CodePen. 아래 영상 강의를 보고 비슷하게 만들어 보았습니다. 자세한 내용은 영상을 참고하세요. 구현시 어려웠던 점. 1. button의 아웃라인을 초기화 하지 않아서 border가 계속 클릭시 마다 나왔다. 해결법 : button { outline:none; } 2. 코딩시 오타 주의 ! (시간 잡아먹는다.) 3. .gallery: before 와 after 의 위치 잡아주는 것. transform : translate(50%, 50%) 필요없다고 생각했다가 엉뚱한 곳에서 애니메이션이 시작됨. 2020. 12. 25. 캐러셀 구현 - owl carousel 플러그인 (feat. jquery) Owl Carousel 플러그인은 터치스크린 지원, 자동 스크롤, 속도 조절, 오른쪽에서 왼쪽으로 스크롤등 여러가지 기능을 갖추고 있습니다. 특징은 화면상에 1개부터 n개까지 이미지를 표시가 가능하다는 것입니다. github.com/OwlCarousel2/OwlCarousel2 OwlCarousel2/OwlCarousel2 DEPRECATED jQuery Responsive Carousel. Contribute to OwlCarousel2/OwlCarousel2 development by creating an account on GitHub. github.com html 본문 보여주고 싶은 이미지를 item에 넣고, 이 item을 owl-carousel로 감싼다. script 내용 $(function().. 2020. 12. 18. 캐러셀구현 - bxSlider 플러그인 (feat. jquery) 장점1 : 캐러셀에 필요한 다양한 기능 지원 장점2 : 반응형 지원으로 모바일 캐러셀을 구현가능 bxslider.com/ jQuery Content Slider | Responsive jQuery Slider | bxSlider Coded with ♥ by bxslider.com 주의점1 : 사용할 이미지들은 div에 각각 담기. 주의점2 : 전체 이미지들을 한 div로 감싸기. 주의점3 : 스크립트 파일에서 주의점2에서 지칭한 div를 선택. bxSlider() 함수를 호출한다. script 사용법 (div.bxslider로 전체이미지를 묶어둔 상태, 주의할 점은 bxslider는 지정된 클래스명입니다. ) $(function(){ $('.bxslider').bxSlider(); }); $(functi.. 2020. 12. 18. 실습) 탭사용 (feat. jquery) https://codepen.io/ziziziczic/pen/LYRErrj 만들어보기▶ 붉은 부분: 주의 할것panel1panel2panel3panel401.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lo.. 2020. 11. 19. 이전 1 다음
