스크롤을 내려 페이지를 보다가 새로고침 하는 경우, 브라우저가 이전 스크롤 위치를 기억하였다가 해당 스크롤 위치 그대로 보여준다. 새로고침 할 때, 이전 위치가 아닌 가장 위로 보여주고 싶은 경우 아래 코드를 넣어주면 된다. 문서 로드시, 자동으로 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)..

php 에서 Undefined variable, Undefined index 에러메세지는 값(변수)이 제대로 정의되지 않아 발생하는 오류이다. 값이 없는 경우를 대비해서 아래처럼 미리 지정을 해주어야한다. [에러 해결방법] isset()를 사용한 변수 선언 에러메세지가 Undefined variable : XX in /web/home/, Undefined index : XX in /web/home/ 이런식으로 뒤에 어떤 변수에 대한 오류인지 뜰텐데, 해당 변수를 isset()함수를 사용하여 값을 정해줘야한다. 해당 변수에 대한 값이 있으면 해당값을 보여주고 아니면 공백으로 값을 전달할 수 있도록 해야한다. $value = isset($_POST['value']) ? $_POST['value'] : '';..

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 컬러 변경 네비게이션, 페이지네이션의 파란색을 다른 색으로 변경하는 방법은 아주 간단하다. 아래와 같이 테마 컬러..

체크박스 또는 여러개의 입력필드 내용을 한 필드안에 저장해서 사용해야하는 경우가 있다. 아래와 같이하면 필드 하나에 데이터를 저장해 관리할 수 있다. 글쓰기 페이지 코드 'wr_1'라는 필드를 쪼개서 사용할 것이다. 값을 받을 체크박스 name은 임의로 관리하기 편한 이름으로 지정하면 된다. (type1~type4) * wr_1 : 값을 저장할 필드 (type1~type4에서 받은 값을 wr_1에 한번에 저장한다) * type1~type4 : 임의로 값을 받을 필드 (DB에 해당 필드 없음) [코드 설명] - 상단의 $wr1 = explode("|", $write['wr_1']); 와 체크박스 태그 안의 checked 부분은 글쓰기 페이지를 수정 페이지로도 사용하는 경우에 필요하다. 해당 값이 있는 경우..

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

그누보드 SMS 기본 코드 그누보드에서 SMS을 보내기 위해서는 기본적으로 아래 코드를 사용한다. 이 방식은 1개의 번호에서 1개로 보내는 방식이다. include_once(G5_LIB_PATH.'/icode.sms.lib.php'); $sql = " select cf_phone from sms5_config"; $row = sql_fetch($sql); $send_hp_mb = $row['cf_phone']; // 보내는 전화번호 $recv_hp_mb = "01000000000"; // 받는 전화번호 $send_hp = str_replace("-","",$send_hp_mb); // - 제거 $recv_hp = str_replace("-","",$recv_hp_mb); // - 제거 $send_numb..

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

SQL 쿼리를 통해 데이터를 가져와서 해당 데이터가 몇번째에 위치해 있는지 구할때 ROWNUM 기능을 활용해 불러올 수 있다. 나의 경우에는 해당 날짜의 주문건을 불러와 주문번호 순서대로 1부터 차례대로 번호를 매기는 작업이 필요하여 아래와 같이 쿼리문을 작성하였다. SELECT @ROWNUM: = @ROWNUM + 1 AS rownum, od_id FROM table as a, ( SELECT @ROWNUM: = 0 ) r WHERE od_invoice_time between '2023-05-31 00:00:00' and '2023-05-31 23:59:59' ORDER BY od_id ASC 그러면 이렇게 조건에 해당하는 데이터들이 순서대로 번호가 매겨지게 된다. 이 중에서도 특정 데이터가 몇번째에 ..

테이블의 데이터 총개수를 구하고 싶을 때 아래와 같이 함수를 사용해 개수를 구할 수 있다. [방법1] sql_num_rows() 함수 사용 테이블 행 개수는 sql_num_rows 함수로 간편하게 구할 수 있다. 쿼리문으로 데이터도 가져오면서 개수도 세야 할 때 유용하게 사용이 가능하다. sql_num_rows 함수는 리절트 셋(result set)의 총 결과 값 개수를 숫자로 반환한다. php5 이상부터는 mysqli_num_rows로도 사용 가능하다. $sql = " SELECT * FROM table ----- "; $result = sql_query($sql); //sql_query($db_conn, $selSql); $count = sql_num_rows($result); echo $count;..

카페 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..

카페24 관리자페이지에서 [설정 > 고객설정 > SNS로그인 연동 관리] 페이지에서 각종 로그인 관련 설정을 하고 나면 로그인화면에서 자동으로 SNS 로그인 버튼들이 뜬다. 그런데 회원가입페이지에서는 SNS로그인 버튼이 안보이는 상황이! 회원가입 링크주소를 타고 바로 접속하는 경우도 있어 회원가입 페이지에도 SNS 버튼을 다는 방법을 정리해보려고 한다. 카페24 회원가입 페이지에 SNS 로그인 버튼 넣기 (PC) 1) 카페24 관리자페이지에서 [디자인 > 디자인편집]을 클릭해 스마트 디자인 편집창을 연다. 2) 왼쪽 영역에서 [전체화면보기] 클릭 후, 회원(member) 폴더를 찾은 뒤, 그 안의 로그인(login.html)파일을 연다. 3) ~ 영역을 전체 복사한다. 4) 회원가입(join.html) ..