js

https://jsfiddle.net/ug98cxsr/ Edit fiddle - JSFiddle - Code Playground jsfiddle.net html 글씨를 쓸 공간인 textarea 입력창을 만든 후 jQuery 글씨가 입력될 때 마다 => keyup 이벤트 아래 데모보기 https://jsfiddle.net/ug98cxsr/ Edit fiddle - JSFiddle - Code Playground jsfiddle.net

다양한 기능을 가진 툴팁(tooltip) 확인 할 수 있는 무료 라이브러리를 소개합니다. 1. popper.js 많이 사용하고 부트스트랩에도 들어가 있는 툴팁 라이브러리 ! 용량이 작아 사용감이 좋다는 장점이 있음 https://popper.js.org/ Home Positioning tooltips and popovers is difficult. Popper is here to help! Popper is the de facto standard to position tooltips and popovers in modern web applications. popper.js.org 2. Tippy.js tippy.js는 popper.js를 기반으로 업그레이드화한 플러그인으로 popper.js의 스크롤 액션..

//실제 파일 첨부 기능 //사용자에게 보여지는 첨부하기 label { position: relative; display: block; height: 60px; cursor: pointer; } .file_real { position: absolute; top: 0; left: 0; z-index: -1; opacity: 0; width: 0; height: 0; } .file_fake { position: absolute; top: 0; left: 0; z-index: 2; padding: 0 calc(134px + 37px) 0 37px; width: 100%; height: 100%; font-size: 16px; border: 2px solid #111; border-radius: 30px; po..

jquery 버전 업데이트를 진행하면서 호환성 문제가 발생할 수 있다. 해결하는 방법중에 하나로 jQuery Migrate가 있다. jquery 마이그레이션 경고 메세지 github.com/jquery/jquery-migrate/blob/1.x-stable/warnings.md jquery/jquery-migrate A development tool to help migrate away from APIs and features that have been or will be removed from jQuery core - jquery/jquery-migrate github.com 감사하게도 한글 번역본이 있다. webdir.tistory.com/469 jQuery Migrate Plugin - Warnin..

https://swiperjs.com/swiper-api Swiper API Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 1. 스와이프 js fade effect fade 효과일 때 슬라이드 이미지가 쌓이는 느낌 그림자 이미지가 점점 진하게 드리움 위 현상을 막기 위해 아래 옵션 추가 effect : 'fade', fadeEffect: { crossFade: true }, 2. swiper js display:none 상태에서 작동하지 않을 경우 display none 요소에서 block이 될 때 슬라이드는 작동되지 ..

https://webclub.tistory.com/142 jQuery 를 효율적으로 작성하는 방법 jQuery 효율적 작성 제이쿼리를 사용함에 있어 성능 최적화(performance)에 간단히 알아봅니다. DOM 을 캐싱(Caching)하라 한번 탐색한 DOM을 다시 탐색하는 것은 비효율적이다. Bad Code $('button.confirm').o.. webclub.tistory.com

https://bxslider.com/ js, css html // Slider HTML (change this to your own!) I am a slide. I am another slide. bxSlider 호출 및 옵션 $(document).ready(function(){ $('.bxslider').bxSlider( { mode: 'horizontal',// 가로 방향 수평 슬라이드 speed: 500, // 이동 속도를 설정 pager: false, // 현재 위치 페이징 표시 여부 설정 moveSlides: 1, // 슬라이드 이동시 개수 slideWidth: 100, // 슬라이드 너비 minSlides: 4, // 최소 노출 개수 maxSlides: 4, // 최대 노출 개수 slideM..

// select box ID로 접근하여 선택된 값 읽기 $("#셀렉트박스ID option:selected").val(); // select box Name로 접근하여 선택된 값 읽기 $("select[name=셀렉트박스name]").val(); // 같은 방식으로 span과 같은 다른 태그도 접근 가능하다~ $("span[name=셀렉트박스name]").text(); // 선택된 값의 index를 불러오기 var index = $("#셀렉트박스ID option").index($("#셀렉트박스ID option:selected")); // 셀렉트 박스에 option값 추가하기 $("#셀렉트박스ID").append("1번"); // 셀렉트 박스 option의 맨앞에 추가 할 경우 $("#셀렉트박스ID").p..