jQuery54 제이쿼리 html에서 CDN 호스트 방식으로 연결하기 jQuery 라이브러리 - P.196 다운로드 방식 http://jquery.com/download사이트방문 최신 버전 다운로드 하여 head 영역 안에 연결 Migrate Plugin(하위 버전 브라우저 지원) 다운로드하여 head 영역 안에 연결 - 익스플로를 위한 설정 CDN 호스트 방식 - content delivery Network https://code.jquery.com사이트방문 최신 버전을 클릭하여 url 복사, head 영역 안에 붙여넣기 jQuery Migrate를 클릭하여 url을 복사, head영역 안에 붙여넣기 - 익스플로러를 위한 설정 CDN 호스트 방식이 최신버전으로 자동 업데이트가 되며 오류가 적다 https://releases.jquery.com/ jQuery CDN The.. 2022. 12. 29. 제이쿼리 요소 바깥쪽 클릭시 창닫기 length 판단 저렇게 모달창이 토글버튼으로 뜨면 다시 토글을 눌러줘야만 창이 꺼지기 때문에 다른곳을 클릭해도 꺼지지 않는다. 이런식으로 다른 요소와 겹쳐나옴 이럴때 제이쿼리를 이용하여 꺼주기 lanth 로 판단해 꺼주기 document 즉 window의 하위객체인 html 문서 전체를 클릭해줄때 끄게 해준다. e.target 을 찍으면 객체의 요소가 나온다. lang_wrap 이 있는지 없는지 판단해보자. consol 로 확인해보면 맞으면 true 1 아니면 false 0 방법1 요소의 부모를 판단해 꺼주기 $(document).on('click', function (e) { console.log($(e.target).parent('.lang_wrap')); if (!$(e.target).parent('.lang_wr.. 2022. 12. 16. 스크롤바 없애기 $('body').addClass('on'); 모바일 환경에서 or 타블렛 gnb 메뉴 모달창이 나올때 스크롤바를 없애주고 싶다면 /*********************** 공통스타일 *************************/ /* body에 높이가 없어도 hidden이 걸리면 스크롤바가 사라짐 */ /* body.on {overflow: hidden;} */ /* iOS 사파리는 페이지최상단에서만 hidden이 걸리므로 페이지 위로 올라오게함 */ body.on { overflow: hidden; position: fixed; left:0; top:0; width:100%; } css common 에 공통스타일로 들어가있기때문에 제이쿼리에서만 on 클래스를 걸어준다. // 타블렛모바일 $('#header .m_btn_close').hide(.. 2022. 12. 16. TOP 버튼 제이쿼리 scrolltop 정리 탑버튼을 누르면 페이지 상단이동 $() 란? 제이쿼리 선택자 함수이다. 제이쿼리객체가 리턴이 된다 {객체} $('#footer .top_wrap .btn_top').on('click', function (e) { e.preventDefault(); $('html, body').animate({ scrollTop: 0 }, 500); }); 객체표현법 {} 는 객체이다. .animate 의 객체안에 { 속성:값 객체안에 객체 배열안에 배열 다 가능 } $('html, body').animate({ scrollTop: 0, border: '2px solid red', width: 1000, }); {} 객체 표현법으로 추가 css 속성값들을 적을 수 있다. $('html, body').animate( { s.. 2022. 12. 15. 스와이퍼 슬라이더 제이쿼리 설정코드 정리 기본 설정 slidesPerView : 'auto', // 한 슬라이드에 보여줄 갯수 spaceBetween : 6, // 슬라이드 사이 여백 loop : false, // 슬라이드 반복 여부 loopAdditionalSlides : 1, // 슬라이드 반복 시 마지막 슬라이드에서 다음 슬라이드가 보여지지 않는 현상 수정 pagination : false, // pager 여부 autoplay : { // 자동 슬라이드 설정 , 비 활성화 시 false delay : 3000, // 시간 설정 disableOnInteraction : false, // false로 설정하면 스와이프 후 자동 재생이 비활성화 되지 않음 }, navigation: { // 버튼 사용자 지정 nextEl: '.swiper-bu.. 2022. 12. 9. 스와이퍼 슬라이더 - 페이지네이션(pagination) 숫자 커스텀 스와이퍼 슬라이더의 페이지네이션과 숫자 부분을 커스텀 해보자 . 이너가 작아진 이유? position: absolute; 줄어드니까 max-width: 1280px; 여도 이너가 작아진다. width: 100%; 설정한다. 그럼 이너가 100% 꽉 찬다 페이지네이션 타입을 프로그래스 바로 변경 (길게) pagination: { el: '.swiper-pagination', type: 'progressbar', }, 슬라이더의 선택자가 프로그래스바로 변경된것을 확인하고 class 명을 가져온다 .main_slider .swiper-pagination-progressbar { position:relative; background: rgba(255, 255, 255, 1); height: 10px; } 포인트.. 2022. 12. 9. 슬라이더 비율에 맞춰 크기조정할때 vw 가로가 100% 잡혀있으니 높이를 vw 로 잡으면 부모의 가로 높이 대비 비율로 창크기를 설정할수있어서 편리하다 이런 큰 비디오를 .main_slider { border: 5px solid red; /* 가로대비 높이 설정 35%조정*/ height: 35vw; } 가로 대비 비율에 맞춰 35% 만 보이게 조정 *단 창을 줄였을떄 영상이 같이 줄어드는게 아니라서 밀려남 .main_slider video { width: 100%; } 그럼 하위요소 비디오에 width:100% 높이만큼 줄어들게하자 그럼 비율에 맞춰 같이 줄어드는 모습 단 영상의 높이가 높기 때문에 다른 부분을 잘린다... 이부분 은 어쩔수없지만 가운데만 보여주게 해주자 height: 100%; 높이를 고정해주고 .main_slider vi.. 2022. 12. 9. 스와이퍼슬라이드 비디오 첫장면부터 재생하기 slideChangeTransitionStart 슬라이더에 들어간 비디오를 슬라이드를 넘겼다가 다시 돌아왔을때 처음부터 재생되도록 해보자 html 코드 연결 video 소스 코드와 autoplay 등 태그 삽입 스와이퍼에서 코드 찾기 var swiper = new Swiper('.main_slider', { loop: true, pagination: { el: '.swiper-pagination', }, navigation: { nextEl: '.swiper-button-next', }, autoplay: { delay: 3000, }, on: { slideChangeTransitionStart: function () { console.log($('.main_slider .swiper-slide-active video').attr('src')); },.. 2022. 12. 9. 파비콘 돌아가게 만들기 ( 배열 or 변수) 이미지 폴더에 favicon 이미지여러장을 넣어준다. html 파비콘 지정 ?v=1 제거가능 여기선 실시간을 보여주는게 의미가 없기때문 제이쿼리에서 설정해주기위해 id 부여 제이쿼리 지정 attr 문자로 이름을 넣어서 href를 가져온다. console.log($('#favicon').attr('href')); 방법 1. 배열로 설정해보기 $(function () { // attr 문자로 이름을 넣어서 href를 가져온다. // $('favicon').attr('href'); var faviconPath = [ 'images/favicon/favicon_logo_01.ico', 'images/favicon/favicon_logo_02.ico', 'images/favicon/favicon_logo_03.i.. 2022. 12. 7. 슬라이더 반응형 비율계산으로 칸수 조절하기 breakpoints PC버전에서 3칸으로 보이는 슬라이더가 줄어들떄 칸수를 변하게 하기 제이쿼리 슬라이더 분기점 별로 칸수를 줄어들게 하는 메서드 breakpoints slidesPerView 칸수를 보이는걸 적용하자 var liveSlider = new Swiper('.live_slider', { slidesPerView: 3, spaceBetween: 40, pagination: { el: '.swiper-pagination', }, // 분기점 breakpoints: { // 1200이하 1200: { slidesPerView: 2, }, // 767 이하 767: { slidesPerView: 1, }, }, }); 가변처리가 되어있기 때문에 2칸으로 줄으면 이미지가 깨진다 이미지의 크기가 비율에 맞춰 늘어날 수 있.. 2022. 12. 5. 제이쿼리 gnb 아코디언 전체메뉴 만들기 메뉴버튼 // 모바일메뉴 // 열기 $('#header .header_top .btn_open').on('click', function (e) { e.preventDefault(); $('#header .m_gnb_area').addClass('on'); $('#header .dimmed').show(); }); // 닫기 $('#header .m_gnb_area .btn_close, #header .dimmed').on('click', function () { $('#header .m_gnb_area').removeClass('on'); $('#header .dimmed').hide(); }); 아코디언 확인하기 $(this).parent().toggleClass('on').siblings().remo.. 2022. 12. 2. select박스의 값에따라 change 로 값넣어주기 / 버튼 켰다 끄기 조건 .search_area .search_top input[type=text] 최초 value는 '전복죽' select change 이벤트시 value 가 BF101 = 전복죽 value 가 BF102 쇠고기야채죽 value 가 BF104 광양식바싹불고기 반상 value 가 BF105 양곱창뚝배기 switch 문 사용 var searchInput = $('.search_area_wrap .search_top input[type=text]'); searchInput.val('전복죽'); $('.search_area_wrap .search_top .select_wrap select').on('change', function () { var _val = $(this).val(); console.log(_va.. 2022. 11. 28. 이전 1 2 3 4 5 다음
