Front-end 개발

1. swiper 사용 시 필요한 파일 import 2. swpier tag 삽입하기 3. CSS 삽입 아래 코드를 꼭 넣어야 합니다. 그래야 작동중 끊김 현상 (슬라이드가 끊다고 다시 시작할때) 을 방지 할수 있습니다. .swiper-wrapper{-webkit-transition-timing-function:linear!important; transition-timing-function:linear!important; } 4. swpier 컨트롤 하기 $(function(){ var swiper = new Swiper('.swiper-container', { spaceBetween: 0, freeMode: false, enteredSlides: true, speed: 5000, autoplay: { ..

[^0-9]/g : 숫자가 아닌 모든 문자를 나타내는 정규 표현식입니다. ^ : 문자열의 시작을 의미합니다. [^0-9] : 0에서 9 사이의 숫자가 아닌 모든 문자를 의미합니다. / : 정규 표현식의 끝을 의미합니다. g : 모든 일치 항목을 바꾸는 것을 의미합니다 /* 처음 ex 010 */ /* 중간 ex 1234 */ /* 마지막 ex 5678 */ var replacePN = /[^0-9]/g; $(".inputPN").on("focusout", function() { let i = $(this).val(); if (i.length > 0) { if (i.match(replacePN)) { i = x.replace(replacePN, ""); } $(this).val(i); } }).on("ke..

1. NVM(Node Version Manager) 이란? 각 상황에 맞게 node버전 변경하고 사용할 수 있게 해주는 Node.js의 버전 관리자입니다. 2. 사용방법 https://github.com/nvm-sh/nvm GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant ba..

1. International Telephone Input 이란? International Telephone Input은 전화번호 입력 필드를 국제 전화번호 형식에 맞게 처리하는 JavaScript 플러그인입니다. 이를 사용하려면 몇 가지 단계를 따르면 됩니다. 2. 사용방법 1. International Telephone Input 라이브러리를 다운로드하거나 CDN을 통해 가져와야 합니다. CDN을 사용하는 것이 편리하며, 다음과 같이 HTML 섹션에 추가할 수 있습니다. 2. 전화번호를 입력할 수 있는 HTML 입력 필드를 만듭니다. 3. 라이브러리를 초기화하고 입력 필드에 International Telephone Input을 적용하기 위해 JavaScript 코드를 작성합니다. 4. 필요에 따라 ..

1. HTML 2. Javascript /* 파일용량 제한*/ $("input[name=file_size").on("change", function(){ let maxSize = 5 * 1024 * 1024; //* 5MB 사이즈 제한 let fileSize = this.files[0].size; //업로드한 파일용량 if(fileSize > maxSize){ alert("파일첨부 사이즈는 5MB 이내로 가능합니다."); $(this).val(''); //업로드한 파일 제거 return; } }); ※ maxSize 설정시 참고 하세요. (데이터 크기는 1024의 제곱으로 표현합니다) 1024 = 1KB 1024 * 1024 = 1MB 1024 * 1024 * 1024 = 1GB 1024 * 1024 *..

1. 카운트업(CountUp.js)이란? 숫자모션을 만들어주는 프레임워크(frameworks)and 플러그인(plugins)입니다. Angular, React, Vue, WordPress, jquery 지원 합니다. Demo 사이트 https://inorganik.github.io/countUp.js/ 공식 Github 사이트 https://github.com/inorganik/CountUp.js 2. 사이트 제작하다고 보면 카운트 모션을 사용하고 싶을때가 있습니다. 간단한 플레임워크(frameworks)and 플러그인(plugins)을 이용하여 카운트 모션을 만들어 봅시다. 카운트모션 제작시 필요한 옵션값외 자세한 설명은 공식 Github사이트에서 확인할수 있습니다. Options (defaults i..

원인 : Swiper 사용시 비노출(display :none) 요소에 사용하면 에러가 발생한다. 방법1. 해당요소와 부모요소를 감지하여 DOM에 변화가 생기면 초기화 하는 메서드를 추가 시켜줍니다.(observer : true, observeParents : true ) 방법2. display : block 시 swiper init 후 display : none 시 destroy(초기화) 시켜 줍니다. 방법3. CDN버전7이상 사용하면 됩니다.(작성기준 최신버전 8.4.4 ) (https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js) 결론 : 최신 버전의 Swiper(CDN)를 사용한다면 별도의 메서드 추가 없이 정상 작동 된다. 이 글이 도움이 되었다면..

1.클립보드(clipboard.js)로 복사하기 input 입력 값 복사하기 textarea 입력 값 복사하기 지정된 text 값 복사하기(버튼) data-clipboard-target : 타켓이 되는 앨리먼트 ID값을 넣어 줍니다. data-clipboard-text : 복사 하고 싶은 텍스트 값을 넣어줍니다. 이 글이 도움이 되었다면 ♡(공감)를 눌러 주세요.

1.스크롤 올릴때 헤더,네비 고정하기 고정할 태그는 자유롭게 변경하여 사용합니다. 스크롤 올릴때 nav, header 높이를 지나는 순간부터 숨김 처림 됩니다. (예제소스에서는 class로 제어했습니다. 직접 css로 제어해도 무관) 이 글이 도움이 되었다면 ♡(공감)을 눌러 주세요.

1. 사용 방법 비교 할 이미지 2장을 HTML 내 추가 하여 줍니다. ​ 비교 슬라이드 영역은 웹, 모바일(반응형)에서 사용 가능합니다. 참고 사이트 : before-after.js GitHub - jotform/before-after.js: An Image Comparision Slider: See an example demo here: http://www.jotform.com/formscentral/ An Image Comparision Slider: See an example demo here: http://www.jotform.com/formscentral/ - GitHub - jotform/before-after.js: An Image Comparision Slider: See an examp..