본문 바로가기

분류 전체보기235

제이쿼리 스크롤 스크롤위치 $(window).scrollTop(); 문서에서의 요소 위치 $('요소').offset().top 기준에서의 좌우위치 $('요소').position().left 스크롤을 하단으로 내릴때 컨텐츠가 나타나는 이벤트를 제이쿼리로 표현해보자 . 1.요소가 가장 위로 스크롤 되는것을 판단 먼저 스크롤이 찍히는 위치를 파악하기 위해 제이쿼리 콘솔로 찍어보자. 문서전체에서 요소의 위아래 위치 판단 $(function () { console.log($('.main_about .box').offset().top); }); offset 메서드 안에 top 속성을 가져와라. (top은 속성이기에 괄호 없음) 문서가장 위에서 요소의 수직위치를 판단 offset 메서드 : 선택한 html 요소의 오프센 좌표를 가져.. 2022. 10. 27.
제이쿼리 기본정리 요소선택 이벤트바인딩 탐색메서드 효과메서드 등등 제이쿼리 생성자 함수 이름 호출 $() 문자열만 하는 경우 window 객체 키워드 의미 "" 필요없음 $(window) 자신이만든 객체를 선택할때 '' 사용 $('#header .gnb>li:nthchild(1)') 이벤트를 바인딩하는방식 $('#header .gnb>li').on('click', function(){ $(this) $(this).find('.depth02') $(this).siblings(); $(this).parent() $(this).closest('#header'); }); 제이쿼리 객체가 리턴됨 .on = addeventlitener 2개 인수가 들어감 이벤트 인수가 들어감 .on(이벤트명 , 이벤트 핸들러 콜백함수(익명함수) :.. 2022. 10. 27.
css img,png,svg 색상변경 원래 하얀색 로고 이미지를 호버로 내렸을때 검정색으로 변경 filter: brightness(0); 익스 변환불가. filter: brightness(0); 은 검정색 filter: brightness(0); 은 하얀색 비슷한 것으로 filter: hue-rotate(90deg); 도 있다 참고 링크 - https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate hue-rotate() - CSS: Cascading Style Sheets | MDN The hue-rotate() CSS function rotates the hue of an element and its contents. Its result is a . develo.. 2022. 10. 26.
제이쿼리 슬라이더 응용 동일하게 html 구성 후 제이쿼리 초기화 코드 복붙 > 클래스명 새로 지정하기 var characterSwiper = new Swiper('.main_character .swiper-container', { slidesPerView: 'auto', spaceBetween: 30, scrollbar: { el: '.swiper-scrollbar', }, 슬라이더 가운제부터 시작하게 하기 var characterSlider = new Swiper('.main_character .swiper-container', { slidesPerView: 'auto', spaceBetween: 50, // active슬라이더 가운데로 centeredSlides: true, scrollbar: { el: '.swiper-.. 2022. 10. 26.
제이쿼리 슬라이더 위치변경 / 초기화 상태에서 만들기 스와이퍼에서 Add Swiper HTML Layout html 복붙 https://swiperjs.com/get-started 지금 신상 지금 바로 입고된 따끈따끈한 신상품 과자 이번 주 핫 신상 보러가기 Slide 1 Slide 2 Slide 3 2022. 10. 25.
제이쿼리 swiper 슬라이더 응용 100% 디자인에서 텍스트 목록과 슬라이더가 bar 와 함께 나올수 있도록 적용해보자 1. swiper 에서 원하는 디자인 찾기 2. get started 에서 html layout 태그 복붙 (예외없음) 3. 본인에 맞는 디자인으로 태그 수정 를 꼭 container 추가 지정할 이름 추가 더보기 KT VIP 고객 생일달해피버스데이 도넛+아메리카노 FREE! 매주 금요일 글레이즈드팩6개입 6,900원, 12개입 12,900원! LGU+ 멤버십 행사추석 맞이 5천원 금액권 증정 T멤버십 VIP/GOLD 15%할인 적립SILVER 5% 할인/적립! KT VIP 고객 생일달해피버스데이 도넛+아메리카노 FREE! 매주 금요일 글레이즈드팩6개입 6,900원, 12개입 12,900원! LGU+ 멤버십 행사추석 맞.. 2022. 10. 24.
제이쿼리 scroll/animate 헤더가 마우스 스크롤을 하면 이렇게 gnd 색이 변할수 있도록 제이쿼리를 설정해보자 $(function () { // scroll 이벤트는 스크롤시 아주 많이 발생하므로 최적화를 신경써야함 // 선택하여 변수에 대입하면 탐색은 한번만 $(window).on('scroll', function () { var st = $(this).scrollTop(); console.log(st); if (st > 0) { $('#header').addClass('on'); } else { $('#header').removeClass('on'); } }); }); 최적화후 $(function () { // scroll 이벤트는 스크롤시 아주 많이 발생하므로 최적화를 신경써야함 // 선택하여 변수에 대입하면 탐색은 한번만 .. 2022. 10. 24.
background-image / size 변경 / 가상선택자 여기 동일 크기의 목록에 배경이미지를 변경해보자 . .main_new li>a { display: inline-block; width: 180px; height: 180px; border-radius: 50%; border: 1px solid #CCCCCC; background: url(../images/main_newmenu_dounut.png) no-repeat 50%; background-size: 200px; } 먼저 첫번째 아이콘 이미지를 삽입 후 크기조정 .main_new li:nth-child(2) a { background-image: url(../images/main_newmenu_drink.png) ; background-size: 80%; } 그리고 부모의 2째 자식을 선택해라를 li.. 2022. 10. 23.
제이쿼리 슬라이더 페이지 네이션 커스텀 (swiper) 페이지 네비게이션 커스텀 해보자 Pagination custom 먼저 html. css로 자리 잡아놓기 더보기 /* 일시정지 버튼 */ .main_slider2_wrap .btn_wrap { position: absolute; left: 0; bottom: 100px; width: 295px; height: 89px; background: url(../images/main_label.png) no-repeat; z-index: 100; text-align: center; padding-top: 40px; } .main_slider2_wrap .btn_wrap .btn_arrow { width: 24px; height: 34px; border: 1px solid black; display: inline-b.. 2022. 10. 20.
제이쿼리 swiper 슬라이더 스와이프 이미지 커스텀 스와이프 이미지로 변경 해보자 기본 제공 기능 없음 html 에 버튼 태그추가해주기 /* 메인슬라이더 일시정지 버튼 */ .main_slider_wrap .btn_pause { border: 1px solid red; position: absolute; left: 50%; bottom: 40px; z-index: 100; margin-left: 420px; width: 37px; height: 37px; border-radius: 50%; text-indent: -9999px; background: #fff; } .main_slider_wrap .btn_pause:before { content: ''; position: absolute; left: 50%; top: 50%; transform: trans.. 2022. 10. 20.
제이쿼리 슬라이더 용어정리 + 화살표 커스텀 기존코드 화살표 네비게이션 커스텀해주기 기존 코드에 이미 버튼이 들어가있지만 우리스타일로 바꾸기 위해 공통 클래스를 지정해준다. 슬라이더 단추 이미지 하나로 양쪽 바꿔서 사용해주기 기존 코드 확인후 위치 조절 이미 margin-top 에 -22px 적용되어있으므로 중앙 배치를 위해 배너높이 확인후 margin-top:-31px; 적용 반대쪽 슬라이더 버튼 뒤집어서 사용해주기 .main_slider_wrap .swiper-button-next { left: auto; right: 30px; transform: rotateZ(180deg); } 기존코드에 left 가 걸려있기때문에 right 가 적용안됨 이땐 left 를 auto 로 초기화해준다. (left는 aoto가 기본값) 페이지네이션 수정해주기 페이.. 2022. 10. 20.
제이쿼리 swiper 슬라이더 정렬 overflow 슬라이더 이미지를 포지션으로 정렬공식으로 띄워 가운데 배치하자 .main_slider_wrap .swiper-slide a { position: absolute; left: 50%; top: 0; transform: translateX(-50%); } 그럼 부모의 높이가 사라지기 때문에 창에서 보이지 않는다. 높이를 잡아 보자 .main_slider_wrap .main_slider { height: 440px; border: 3px solid red; } 높이적용시 이미지가 넘쳐 흐름 오버플로우 히든으로 적용 해 주어야한다. swiper 가져올때 css 기존코드에 이미 position: relative; 가 적용되어있음을 확인 .main_slider_wrap .swiper-slide { overflow:.. 2022. 10. 20.

티스토리툴바