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) ..

카페24에서 jQuery 스크립트를 사용하려면 카페24 자체 내에 포함되어있는 제이쿼리와 충돌이 일어나 제대로 작동이 안되는 경우가 많다. 이 경우에는 jQuery가 충돌이 나지 않게 아래 코드를 추가해주면 된다. 여기서 jQuery_new는 원하는대로 변경이 가능하다. jQuery_new를 선택자 앞의 jQuery 또는 $를 대신해서 사용하면 된다. window.jQuery_new = jQuery.noConflict(true); [사용 예시]

서로 다른 곳에 있는 데이터를 가져오는 경우 캐릭터셋이 맞지 않으면 아래처럼 문자가 깨져보이게 된다. 이 경우에는 아래처럼 iconv 함수를 사용하여 문자 인코딩을 해주면 된다. iconv함수 iconv(기존 Charset, 변환할 Charset, 문자열); 나의 경우에는 웹 DB(UTF-8)에 있는 데이터를 엑셀로 출력하는 코드를 만들고 있었는데 한글문자열 부분만 아래처럼 변경해주면된다. 문자열을 UTF-8에서 UHC로 변경해주는 함수이다. iconv('UTF-8', 'UHC', 문자열); UHC란? UHC(또다른 이름으로는 CP949)는 확장완성형 (Unified Hangul Codeset)의 줄임말인데, EUC-KR에서 표현하지 못한 글자까지 인코딩의 영역을 확장한 캐릭터셋이라고 한다. EUC-KR..

카페24 쇼핑몰 메인페이지에 상품 후기 게시판 최신글을 보여주기 위한 코드 $count = 3 에서 보여줄 개수 조정 ~ 부분이 후기에 해당하는 상품을 보여주는 영역 여기서 {몰아이디} 부분에 몰 아이디(카페24 계정아이디)를 입력하면 된다. 썸네일이 아닌 원본 이미지를 불러와서 화질이 선명하게 보이기 위한 것. 등록 날짜를 보여주고 싶으면 {$write_date|date:Y-m-d} 추가 기본 코드 {$category_name} {$subject} {$icon_new} {$content} {$product_img} {$product_name} {$product_price} {$category_name} {$subject} {$icon_new} {$content} {$product_img} {$produ..