말줄임 hover 시 툴팁(스크립트X)
·
🐣codeLab
sticky를 활용한 소개페이지
·
🐣codeLab
참고페이지 https://www.jandi.com/landing/kr JANDI - AI로 진화한 메신저 기반 업무용 협업툴메신저의 잠재력을 깨운 AI 협업툴 잔디는 맥락 요약, 향상된 정보 검색 그리고 생성으로 개인과 조직의 생산성을 한 번 더 끌어올립니다.www.jandi.com sticky를 사용해 이미지 소개 페이지를 만들어 보았다.sticky가 쉬우면서도 어려운.. 속성 같다😵😵
JavaScript로 slideDown, slideUp 구현해보기
·
🐣codeLab
jQuery로 `slideDown()`, `slideUp()` 으로 편하게 작업했었는데 이번에는 자바스크립트로 스크립트를 짜보았다. `accSlide()` : 해당 버튼 클릭 시 자신만 닫힘`accOtherSlide()` : 해당 버튼 클릭 시 다른 버튼 닫힘  해당 버튼만 toggle 버튼1 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti laudantium consequatur cumque repellendus, sit ducimus iste doloremque accusantium autem. Itaque, voluptatum. Dolorum ratione laborum..
[GSAP] gsap 정리
·
🐣codeLab
정리중 간단하게 볼 수 있어서 좋다. http://302chanwoo.com/lab/tween/ https://lily-im.tistory.com/70?category=950585 gsap 한글 번역?? https://agal.tistory.com/m/210 GSAP 3 Cheat Sheet https://greensock.com/cheatsheet/ GSAP 메소드 메서드속성 Tween바로 실행되어야하는 간단한 모션만들 때 유용Timeline다양한 메서드를 사용해 모션을 컨트롤 pause(), play(), progress(), reverse(), timeScale() 등등 GSAP demo https://greensock.com/st-demos/page/3/?d=19 GSAP | properties ..
마크다운 접기/펼치기 버튼
·
🐣codeLab
접기/펼치기 버튼내용입니다.접기/펼치기 버튼내용입니다.
쿠키팝업
·
🐣codeLab
CLOSED 이용 순서 → 주소입력 → 매장선택 →장바구니 담기 → 장바구니를 선택 → 공급시간 선택 → 주문하기 → 공급내역순으로 되어있습니다. 오늘 하루 보지 않기 닫기 // jquery/* 쿠키팝업 */$(document).on('click', '.lyCookieClose', function(e) { e.preventDefault(); if($('input[name=cookiePopChk]').is(':c..
디바이스(device) 기기 확인 스크립트
·
🐣codeLab
안드로이드 아이폰 구분내일채움더하기 참고function checkMobile() { var varUA = navigator.userAgent.toLowerCase(); //userAgent 값 얻기 if ( varUA.indexOf('android') > -1) { //안드로이드 $('body').addClass('android isDevice'); } else if ( varUA.indexOf("iphone") > -1||varUA.indexOf("ipad") > -1||varUA.indexOf("ipod") > -1 ) { //IOS $('body').addClass('ios isDevice'); var vh = windo..
column-count사용하여 masonry 나타내기
·
🐣codeLab
조건! javascript말고 css만 사용하여 masonry grid 나타내기. 반응형에도 적용할 수 있는 masonry만들기. Reference https://w3bits.com/demo/css-masonry/ https://hwanlee.tistory.com/64 https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts