날짜 선택 시 유용하게 사용 가능한 Jquery플러그인 Datepicker https://jqueryui.com/datepicker/ Datepicker | jQuery UI Datepicker Select a date from a popup or inline calendar The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (b jqueryui.com Datepicker 기본코드 DatePicker 기본 ..

1. audio 태그를 사용하여 배경음악 또는 비디오를 넣는다. 2. 컨트롤 버튼 click me 3. 스크립트 삽입 (2번의 버튼을 클릭하면 재생/일시정지 번갈아 가면서 작동함) var video = document.getElementById("player"); $("#btn_player").click(function(e){ if(video.paused==true){ video.play(); //재생 }else{ video.pause(); //일시정지 } }); video.addEventListener("ended", function(){ //끝났을 때 }); 개별버튼 재생, 일시정지, 음소거 각각 버튼을 넣고 싶을때는 아래 코드를 이용하면 된다. Play Pause Mute/ Unmute

jquery 로 특정 영역에 값을 보여줄 때, number_format()을 사용하면 자동으로 숫자에 콤마가 찍혀서 보이게 된다. 이때 숫자가 아닐 수도 있으므로 String으로 먼저 감싸준뒤, number_format()를 사용해서 사용하면 된다. var final = Number(price1) + Number(price2) + Number(price3); $('.total').text(number_format(String(final))); // total 클래스를 가진 영역에 결과 값을 보여줌 250,000

카페 24에서 기존에 잘 작동하던 스크립트가 갑자기 작동하지 않았다. 개발자 모드로 오류 내역을 확인해보니 아래와 같이 써있었다. Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure script ''. This request has been blocked; the content must be served over HTTPS. 이는 https인 홈페이지에 외부 경로의 파일을 http로 불러와서 생기는 오류로, 외부 경로들을 홈페이지와 동일하게 모두 https 또는 //로 변경해주면 된다. jQuery 스크립트 경로도 변경해주고, 나의 경우에는 구글 웹폰트, 이미지에도 경로 문제가 발생하여 모두 변경해 주었다. 변경 전..

Uncaught TypeError: $(...).sortable is not a function 오류가 아래처럼 나는 경우 jquery-ui-min.js 버전을 변경 또는 jquery-ui.js 스크립트를 로드하고 있지 않다면 추가해주면 해결된다. jquery 버전 차이에 따른 스크립트 오류가 난 듯 하다.

여러모로 다양하게 활용이 가능한 jQuery 슬라이더 Swiper https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com Swiper 기본 스크립트 var swiper = new Swiper('.swiper', { slidesPerView: 1, speed:1000, autoplay: { delay: 2000 }, spaceBetween: 0, pagination: { el: ".swiper-pagination..

보통은 jQuery로 css를 조정하는 경우, css 파일과 동일하게 속성값을 지정하면 되지만, jQuery 스크립트로 배경 이미지를 변경하고 싶은 경우에는 background가 아닌 background-image로 작성해주어야 작동이 된다. 작동X $("#section").css({"background":"url(img.png)"}); 작동O $("#section").css("background-image", "url(img.png)"); 다른 속성값과 사용할 땐 아래처럼 콤마로 구분하여 사용 가능 $("#section").css({ "background":"url(img.png)", "background-repeat" : "no-repeat", "background-position":"center c..

1. 자바스크립트로 확인하기 (단순 유효성 검사) 사업자 등록번호는 123-45-67890 이런식으로 10 자리 구조이다. 이때 각 구성 요소의 의미는 아래와 같다. 123 (3자리): 국세청 / 세무서별 코드 45 (2자리) : 개인 법인 구분코드 6789(마지막4자리) : 과세/면세/법인 사업자 등록/지정일자 일련번호 0(마지막 1자리) : 검증번호 여기서 마지막 1자리로 유효한 사업자 등록번호인지 확인이 가능하다. 예를 들어 사업자번호가 123-45-67891 인 경우, 1. 마지막 자리 1을 제외한 사업자번호 앞 9자리 인증키 9자리의 각 자리수를 각각 곱하여 전부 더해준다. (인증키값 = 1 3 7 1 3 7 1 3 5) S = (1 * 1) + (2 * 3) + (3 * 7) + (4 * 1)..

잘 쓰고 있던 swiper 스크립트에서 어느날 갑자기 이런 오류가 떴다. Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. 구글링해봤더니 Window에 파라미터를 지정해야 해결이 가능한것 같은데, 그동안 잘 작동하던게 갑자기 오류가 뜬 경우라 스크립트를 수정하고싶지는 않았다. 혹시나하고 swiper-bundle.min.js 경로를 다른 것으로 변경해보았더니 해결되었다. 기존에 swiper-bundle.min.js 을 외부링크로 불러와서 사용했는데 업데이트가 되면서 일부 코드와 맞지 않았던게 있던 것 같다. 이럴 땐 다른 파일로 변경해보면 해결이 될 수 있겠다. 기..

디바이스 화면 크기에 따라 스크립트를 다르게 적용(반응형)하는 방법은 아래 글 참고! (화면 크기만으로 구분하므로, PC이더라도 화면 크기가 작아지면 모바일 버전으로 나오게 된다.) https://hongpage.kr/20 [jQuery] 디바이스 크기별로 jquery 스크립트 다르게 불러오기 (반응형) 홈페이지가 반응형인 경우, 디바이스 크기별 jQuery 스크립트를 다르게 불러와야하는 경우가 종종있다. 같은 슬라이더를 쓰더라도 PC버전과 Mobile 버전의 속성을 다르게 할 수도 있는데 아래와 같 hongpage.kr 아래의 방법은 디바이스 크기가 아니라 디바이스 기종에 따라서 모바일과 모바일이 아닌 경우를 구분하는 제이쿼리 스크립트이다. 따라서 PC에서 화면을 작게한다해도 모바일 스크립트가 적용되지..

다양한 옵션과 효과를 제공하여 홈페이지에서 많이 사용하고 있는 Swiper 슬라이더. 작업을 다 하고 브라우저별로 확인하는데 익스플로러에서는 Swiper 작동이 안되는 불상사가. 여기저기 헤매던 중 해결 방법을 찾게 되었다. 바로 Swiper버전을 낮추는 것! https://cdnjs.com/libraries/Swiper/ Swiper - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers Most modern mobile touch slider and framework with hardware accelerated transitions - Simple. Fast. Reliable. Cont..

.not() jquery 선택자 중에 특정 요소(특정 클래스, 특정 아이디)만 제외하고 싶은 경우 아래와 같이 사용하면 된다. .not(selector) 사용 예시 1) 클래스명이 link인 것만 제외한 a 태그 $('a').not('.link').css(); 2) 링크 주소가 #인 것만 제외한 a태그 $('a').not('[href^=#]').css(); 3) 클래스명이 content 가 아닌 #section $('#section').not('.content').css(); .not() 여러개 지정하기 아래와 같이 두가지 방법으로 사용 가능하다. [방법1] 선택자(여기서는 a태그) 밖에 .not()을 사용하여 '제외할 선택자1, 제외할선택자2' 로 표기한다. ※ 주의 ※ 작은 따옴표 안에 제외할 선택자..

php로 폼 내용을 전송하는 경우, 폼 스크립트 안에 ajax를 넣어 값을 체크한 뒤에 문제가 없는 경우 전송하는 스크립트를 짜는데, ajax success 안에 바로 return false를 쓰니 제대로 실행되지 않고 그냥 submit이 되어버렸다. 해결 방법은 ajax 구문안에 return false를 직접적으로 쓰기보다는 스크립트 상단 부분에 rtn=false;를 정의한뒤 ajax 구문안에서 실패한 경우 rtn = false; 성공한 경우 rtn = true 값을 넣어주고 스크립트 맨 마지막에 return rtn을 호출하면 된다. 이때 ajax 구문안에 async: false를 꼭 넣어줘야한다. function checkform() { var rtn = false; // 변수선언 $.ajax({ t..

Owl Carousel는 jquery 기반으로 반응형, 터치 기능을 제공하는 이미지 슬라이더이다. https://owlcarousel2.github.io/OwlCarousel2/ Home | Owl Carousel | 2.3.4 Modules and Plugins Owl Carousel supports plugin modular structure. Therefore, you can detach plugins that you won't use on your project or create new ones that fit your needs owlcarousel2.github.io 그런데 Owl Carousel 옵션에 margin:0, items:1 을 넣어 이미지 하나씩 나오도록 설정하여 사용하였는데, 오..

ajax란? AJAX란 비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)을 말한다. 간단히 말하면, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말한다. JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있다. AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"이다. 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해준다. 출저 : MDN Web docs 정리하자면 ajax의 가장 큰 특징 두가지는 페이지 새로고침 없이 서버에 요청하고, 서버로부터 데이터를 받고 작업을 수행한다는 것이다. 아마 웹이나 앱개발을..