반응형 jquery6 jQuery Zoomer를 이용하여 이미지를 확대 축소 해보자 이번에 필요했던 기능은 header와 bottom을 고정한 상태에서 이미지 영역만 확대를 시킬 수 있는 기능이 필요 했습니다. 은행이나 카드 상품 정보에서 약관을 PDF나 이미지 정보로 보여주는 기능을 볼 수 있는데, 이 기능이 필요해서 작성을 하게 되었습니다. HTML부터 CSS와 그리고 jQuery 플러그인인 Zoomer 플러그인을 사용해서 이미지를 확대하고 스크롤 할 수 있는 기능까지 추가로 알아봅시다.0. 준비하기 (CDN)jQuery 플러그인 Zoomer를 사용하기 위해서는 기본적으로 jQuery가 필요하고, zoomer.js가 필요합니다. 파일이 있으시면 추가하시면 되지만, 저는 CDN 기준으로 작성 하였습니다. zoomer.css 역시 추가 해주시면 됩니다. 해당 CSS는 확인해보니 라인 수.. jQuery 2024. 9. 6. jQuery Migrate 플러그인 jQuery는 1.9 버전 이전에 작성된 코드와 작성된 코드 간의 호환성에 이슈가 있습니다. 이러한 호환성 문제를 해결하기 위해서 사용하는 플러그인이 바로 jQuery Migrate입니다. 최신 버전의 jQuery를 필요로 하는 플러그인, 스크립트 등을 삽입할 때 발생하는 문제를 해결하기 위해서 jQuery Migrate 플러그인을 사용합니다. Download jQuery | jQuery link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file s.. jQuery 2021. 11. 14. [웹 퍼블리셔 125일차] 커뮤니케이션을 잘해야 한다! 정말 오랜만에 글을 쓰는 것 같습니다. 현재 프로젝트를 하면서 오픈이 얼마 남지 않았고, 그에 따른 야근이 필수로 하게 되면서 많은 내용들이 오고 가고 하는 것에 느끼는 것이 많았습니다. 현재 제 경우에는 9월까지 프로젝트를 하게 되는데, 7월 한 달 동안 어떠한 일을 했는지 살짝 나열해보려고 합니다. 프레임워크를 이용해서 제작한 코드 분석 개발자들과 커뮤니케이션 Chrome Inspect를 통해서 개발 버전 어플리케이션 디버깅 체크 개인적으로 제일 힘들었던 부분은 2번 항목이었습니다. 웹 퍼블리셔의 경우는 기획서보다 디자인 시안을 보고 마크업을 진행하는 부분인데, 기획서와 틀리다고 오시는 분들이 생각보다 많았습니다. 기획서는 Mock으로만 그려지는 부분이기 때문에 디테일한 부분이 아닌, 어떻게 어떻게 .. 웹 퍼블리셔 일기 2021. 8. 7. [jQuery] 이벤트 중복 오류 해결 (이벤트가 두번 실행됩니다!) jQuery를 이용해서 좌측의 메뉴를 클릭할 때마다 SlideToggle 메서드를 이용해서 구현하려고 하였으나, 뭔지 모르게 갑자기 두번씩 SlideToggle이 발생되는 것을 보았습니다. $('셀렉터').on('click', function(){ 이벤트 내용 }); 하지만 여러가지 방법을 찾다가 해결책을 찾게 되었고, 위 현상이 일어나는 것은 바로 이벤트가 중복으로 걸리는 경우라고 확인 되었습니다. 조금 코드가 길어지기는 하지만, off 메서드를 혼합하여 사용함으로써 해당 이벤트 중복 오류를 막을 수 있었습니다. $('셀렉터').off('click').on('click', function(){ 이벤트 내용 }); 위의 코드 내용으로 작성하면 이벤트 중복을 막을 수가 있습니다. 하지만, 해당 셀렉터에게만.. jQuery 2021. 1. 27. 아이디, 비밀번호 입력란에 로그인 버튼 색 변경하기 jQuery를 이용하여 아이디, 비밀번호란에 데이터를 입력 시에 로그인 버튼 배경 색상을 변경하는 방법입니다. - ID, 비밀번호 입력란에 text가 모두 입력이 되면, addClass('on')을 통해서 배경색이 pink로 변경 - ID, 비밀번호 입력란이 하나라도 비어있다면, removeClass('on')으로 기존 배경색으로 됨 - ID, 비밀번호 입력란 모두 작성했다가, 다시 삭제하면 기존 배경색으로 되는 부분 function checkInput() { var idCheck = $('.id_input').val(); // idCheck 변수 var passwordCheck = $('.password_input').val(); // idCheck 변수 var btnLogin = $('.btn_sub.. jQuery 2020. 12. 11. [jQuery] 아...이런 siblings;; 제이쿼리로 현재 모바일 홈페이지를 과제로 하고 있습니다. 기존에는 데스크탑으로 탭메뉴를 구성하는 형태였고, ul 구조에 li가 4개로 하나씩 누를 때 마다 쉽게 변경되는 구조였습니다. 위의 코드는 누구나 구현이 가능한 쉬운 누구나 기초를 배우셨다면 구사가 가능한 정도입니다. 하지만, siblings() 이녀석이 저를 괴롭힐 거라고는 조금도 생각하지 못했습니다... 이번에는 select 태그의 value 값으로 리스트를 호출하는 방식으로 셀렉트 메뉴를 구성했습니다. 일단, 하나의 ul의 여러개의 list 구조로 이루어져있고, 각 주제마다 class를 부여한 상태입니다. 맨 위의 예제처럼 쉽게 풀릴 것 같았지만, 같은 클래스를 사용하는 list 구조에서 siblings를 부여하니까 show는 커녕 리스트 전.. jQuery 2020. 11. 7. 이전 1 다음 💲 추천 글 반응형