wow.js는 스크롤 시 페이지들의 요소들이 하나씩 애니메이션 효과로 나타날 수 있도록 해주는 라이브러리로 각 요소들마다 옵션값을 넣어 개별적으로 애니메이션 설정할 수 있어서 사용하기 편하다. 설치방법1. 공식 사이트 Github에서 파일 다운로드https://wowjs.uk/ wow.js — Reveal Animations When Scrolling wowjs.uk  2. WOW-master/css/libs/animate.css 파일을 css폴더나 적당한 폴더에 업로드 원하는 페이지에 로드   3. WOW-master/dist/wow.min.js 파일을 js폴더나 적당한 폴더에 업로드 후 원하는 페이지에 로드, 스크립트 추가  스크립트는 아래처럼 설정도 가능하다.var wow = new WOW( { ..

Uncaught TypeError: Cannot read properties of undefined (reading 'split') 오류가 뜨는경우데이터 값이 정의된게 없는데(undefined) split을 실행시켜서 생기는 오류이다.  해결방법이 경우 (sUrl || "")  처럼 변수값이 없는 경우도 포함시켜주면 오류가 나지 않는다. 수정전var aUrl = sUrl.split('?');  수정 후var aUrl = (sUrl || "").split('?');

Grid 기본코드 Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7   특정 칸만 크기 조절특정 박스만 크기를 다르게 하고 싶다면  grid-column-end (행 크기 조절),  grid-row-end (열 크기 조절) 를 이용해 조절하면 된다. 아래의 경우에는 big class를 가진 박스는 가로 3칸중 2칸, 세로로도 2칸씩 차지하도록 하였다. Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7      그런데 특정 박스만 크게 하는 경우에, 상황에 따라 여백이 생기는 경우가 있다.아래 경우에는 Grid를 3칸으로 하였는데, 3n번째 크기를 다르게 하..

보통 입력폼에서 엔터키를 누르면 form이 전송되는데 전송되지 않고 특정 스크립트가 실행되게 하려면 아래처럼 스크립트를 추가해주면 된다. 여기서 keyCode == 13이 엔터키를 의미하고, 엔터키 누르면 form submit 대신 특정 스크립트(f_search)를 실행하게 된다.

예약어(Reserved Words)는 자바스크립트에 먼저 등록된 요소를 말한다. 이 예약어는 변수, 라벨, 펑션 네임으로 사용할 수 없다. 변수, 라벨 등에서 사용할 수 없는 예약어 arguments break case continue default do else false for function if null return super switch this true try typeof var void while with 예시 //사용가능 var apple = a; var name = a; //사용불가 var arguments = a; var if = a; var do = a; var default = a; 생각보다 많은 예약어가 있는데 아래 표 참고 참고 : https://www.w3schools.com/..

스크롤을 내려 페이지를 보다가 새로고침 하는 경우, 브라우저가 이전 스크롤 위치를 기억하였다가 해당 스크롤 위치 그대로 보여준다. 새로고침 할 때, 이전 위치가 아닌 가장 위로 보여주고 싶은 경우 아래 코드를 넣어주면 된다. 문서 로드시, 자동으로 scrollTop: 0 을 적용하여, 문서 맨 위로 로드될 수 있도록 해준다. $(function(){ $("html, body").animate({ scrollTop: 0 }, "fast"); });

스크롤 위치에 따라 요소들에 Class를 추가해준다던지, 효과를 변경할 수 있다. 현재 스크롤 위치 구하기 $(document).scrollTop(); 특정 요소의 위치 구하기 offset().top을 사용하면 문서 상단으로부터 특정 섹션, div가 있는 위치를 구할 수 있다. $("#section3").offset().top; scroll()기본 코드 $(window).scroll(function(){ var h = $(document).scrollTop(); //현재 스크롤 위치 if(h > 200) { // 스크롤 위치가 200을 넘으면 } else { } }); 응용 현재 내 스크롤 위치와 특정요소의 위치를 통해 사이트에서 다양하게 구현이 가능하다. 1) 배경색이 검정색인 섹션(#section1)..

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 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 위와 같이 기본 CSS를 불러와 사용하면 아래처럼 모든 버튼들 컬러가 파란색으로 보여진다. Navigation, Pagination 컬러 변경 네비게이션, 페이지네이션의 파란색을 다른 색으로 변경하는 방법은 아주 간단하다. 아래와 같이 테마 컬러..

날짜 선택 시 유용하게 사용 가능한 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..