placeholder="아이디를 입력하세요">이런식으로 태그에 직접 속성을 지정해주면 간단하지만 간혹 직접 지정이 어려운 경우가 있다. ex) 카페24에서는 자체 모듈(변수)로 회원가입 인풋항목을 생성하기 때문에 인풋 태그 안에 placeholder를 직접 지정해줄수가 없다.또는 제이쿼리 스크립트에 따라 속성이 추가되거나 삭제되어야하는 경우 등  이런 경우 아래의 스크립트를 넣어 해결이 가능하다.$( document ).ready( function() { $("input#member_id").attr("placeholder", "아이디를 입력하세요");}); 그러면 직접 placeholder="아이디를 입력하세요"를 넣지 않고도 동일한 결과를 얻을 수 있다.  attr()의 다양한 활용 방법제이쿼리의..

기본 sql 구문 $sql = " select * from 테이블명 where wr_is_comment = '0' and wr_id = '{$view['wr_id']}' "; $row = sql_query($sql); 이 기본 구문은 배열로 보여주기 때문에 보통 for 문과 함께 많이 사용한다. 아래와 같이 for문과 함께 사용하면 해당되는 값을 모두 불러온다. [for문과 함께 사용 예시] $sql = " select * from 테이블명 where wr_is_comment = '0' "; $result = sql_query($sql); for ($i=0; $row=sql_fetch_array($result); $i++) { echo $row['id']; } where 조건절에 해당하는 값이 딱 한개만..

어떤 코드를 반복적으로 사용할 때 for문과 while문을 많이 사용한다. for문 vs. while문의 차이점은 for문은 반복 횟수가 정해져있을 때 주로 사용하고, while문은 반복 횟수가 정해져있지 않고, 값이 있는 만큼 계속 반복해서 보여줄 때 사용한다. for문 예시 sql문 + for문 보통 이 경우는 sql 조건문에 해당하는 자료 갯수 구해서 갯수만큼 뿌려오도록 하는데 아래 처럼 모두 나오게 할 수도 있다. while문 예시 sql문 + while문

보안SSL이란? SSL이란 Security Socket Layer의 약자로 Netscape에서 웹서버(웹사이트)와 사용자PC(브라우저)간의 주고 받는 데이터의 암호화/보안을 위해 만든 프로토콜. 보안서버가 구축된 웹서버는 해커가 중간에 데이터를 가로채더라도 데이터가 암호화 되어있어 개인정보 노출을 막을 수 있다. 이제는 보안서버가 선택이 아니라 필수가 된 것 같다. 보안서버를 적용하지 않으면 크롬에서는 아예 주의요함이라고 뜬다..;; 호스팅사에 보안SSL 구축 신청을 한 뒤 셋팅이 완료되면 그누보드에서는 몇군데 설정만 변경해주면 바로 보안 서버 적용이 가능하다. 아래의 방법은 사이트 전체에 보안 SSL를 적용하는 방법이다. 1. 기본 도메인 변경하기 copnfig.php 파일 에서 G5_DOMAIN, G..

각 상품별 상품 사용 리뷰마다 좋아요 버튼을 추가하는 작업을 하였다. 좋아요 버튼 클릭시 페이지 이동을 하지 않고 그 자리에서 바로 좋아요 숫자가 변경되고, 채워진 하트로 바뀌고, 다시 클릭했을 때는 좋아요 숫자가 -1 감소되고, 다시 빈 하트로 보여주기 위해서 ajax를 활용하였다. 1. 좋아요 테이블 생성 먼저 좋아요 기능에 필요한 테이블을 하나 추가하고, 필드를 추가한다. rg_id : 좋아요 데이터 아이디 it_id : 상품 id (상황에 따라 생략가능) is_id : 상품평 아이디 (상황에 따라 생략가능) mb_id : 회원아이디 rg_datetime : 좋아요 누른 시간 2. 좋아요 버튼을 넣을 자리에 추가 상품 후기를 여러개를 불러오기 때문에 btn_like버튼 아이디 값에 각각의 고유 번호..

체크박스를 통해서 값을 받고 | 를 구분자로 배열로 저장하는 작업을 했다. 값을 저장하는 것 까지는 문제가 없는데, 값이 있는 경우만 불러오고 콤마로 깔끔하게 보여주는 방법을 고민해보았다. 예를 들어 아래와 같이 체크박스를 통해서 값을 받았다고하자. 좋아하는 과일을 선택하세요(중복선택가능) □사과 □배 □포도 □복숭아 □망고 사과 배 포도 복숭아 망고 | 로 구분해 값을 각각 저장하는 경우에 $fruit = "$fruit1|$fruit2|$fruit3|$fruit4|$fruit5" 와 같은 형식으로 값을 저장하게 될 것이다. 좋아하는 과일을 선택하세요.(중복선택가능) ▣사과 □배 □포도 ▣ 복숭아 □망고 예를들어 사과와 복숭아만 선택한 경우, $fruit 의 저장된 값은 사과|||복숭아|| 중간에 값이 ..

https://hongpage.kr/16 [jQuery] 기본 탭 소스 유용하게 많이 사용하는 기본 jquery 탭 html부분 탭1 탭2 탭3 탭1내용 탭1내용 탭3 탭을 추가하는 경우 1) 사이에 를 추가하고 탭4 탭5 2) 클릭시 나올 컨텐츠 부분도 추가하면된다. 탭4 내용 hongpage.kr 지난번 올린 기본 탭 소스 포스팅은 탭 메뉴를 클릭 했을 때 내용이 바뀌는 방식이었다. 이 코드는 기본 탭 코드와 동일하게 탭 메뉴를 클릭했을 때 내용이 바뀌는 방식 뿐만아니라 auto switch 를 활용해서 탭 메뉴를 클릭하지 않아도 일정시간이 지나면 다음 탭으로 넘어가는 코드이다. 다른 것은 동일하고 스크립트만 변경하면 된다. 탭 넘어가는 속도는 3000 숫자를 조정하면 된다.

홈페이지가 반응형인 경우, 디바이스 크기별 jQuery 스크립트를 다르게 불러와야하는 경우가 종종있다. 같은 슬라이더를 쓰더라도 PC버전과 Mobile 버전의 속성을 다르게 할 수도 있는데 아래와 같이 윈도우 가로 사이즈에 따라서 스크립트를 다르게 불러 올 수 있다. 예시코드 $(window).resize(function(){ if (window.innerWidth > 480) { // 다바이스 크기가 480이상일때 /* 스크립트내용*/ } else { /* 스크립트내용*/ } }).resize(); 화면이 리사이즈 될 때마다 조건에 맞는 스크립트를 불러 오게 된다.

유용하게 많이 사용하는 기본 jquery 탭 html부분 탭1 탭2 탭3 탭1내용 탭1내용 탭3 탭을 추가하는 경우 1) 사이에 를 추가하고 탭4 탭5 2) 클릭시 나올 컨텐츠 부분도 추가하면된다. 탭4 내용 탭5 내용 rel값고, id만 동일하게 넣어주면 된다. 스크립트 $(function () { $(".tab_content").hide(); $(".tab_content:first").show(); $("ul.tabs li").click(function () { $("ul.tabs li").removeClass("active").css("color", "#555"); $(this).addClass("active").css("color", "#fff"); $(".tab_content").hide() v..

매번 jQuery 최신 버전에 맞추어서 다운받고 관리하기가 어렵다면 아래 한줄이면 끝! 이 한줄만 추가하면 jquery를 항상 최신 버전으로 이용할 수 있다.

테이블 추가하기 g5_write_task 테이블이 없다면 5teamname1~5teamname10 (text) 필드와 함께 테이블을 추가하여라. CREATE TABLE IF NOT EXISTS `g5_write_task`( `5teamname1` text NOT NULL, `5teamname2` text NOT NULL, `5teamname3` text NOT NULL, `5teamname4` text NOT NULL, `5teamname5` text NOT NULL, `5teamname6` text NOT NULL, `5teamname7` text NOT NULL, `5teamname8` text NOT NULL, `5teamname9` text NOT NULL, `5teamname10` text NO..

Datepicker 기본 코드 결과 이 영문으로 표기된 datepicker를 한글로 바꿔보자! 한글로 변경 (모든 input에 적용) 스크립트 부분을 아래와 같이 적용하면 웹사이트 내에 사용되는 모든 datepicker에 한글이 적용된다. 특정 인풋 클릭시에만 datepicker를 한글로 변경하고 싶다면 아래와 같이 인풋 아이디( #datepicker )를 지정하는 방식으로 하면 되지만, 굳이 그럴 이유가 있을까 싶다. 선택 날짜 범위 지정하기 option value 설명 minDate -1D : 하루전 -1M : 한달전 -1Y : 일년전 0 : 오늘부터 최소로 가능한 선택 일자를 지정 max Date 0 : 오늘까지 +1D : 하루후 -1M : 한달후 -1Y : 일년후 최대로 가능한 선택 일자를 지정 ..

Superslide.js 코드가 나온지 꽤 오랜시간이 지난것 같은데 Bxslider와 함께 많이 활용하는 코드이다. Superslide은 풀스크린으로 반응형이 지원되서 꽤 활용도가 높은데, 모바일에서 터치가 되지 않아 불편한 점이 있다. 그래서 touchSwipe 코드를 응용해 스와이프하면 슬라이드가 넘어가도록 만들어보았다. Superslide 기본코드 예시 : www.jqueryscript.net/demo/Full-Screen-Slider-Plugin-Superslides/demo/ Superslide + touchSwipe 기존 Superslide에서 클릭시 넘어가도록 하는 애니메이션이 기본적으로 적용되어있는데 이 부분을 활용하였다. superslides('animate', 'next'); super..

최근 의뢰를 받아 했던 카페24 작업. 왼쪽에서 어느 컬러를 하나 클릭하면 그 컬러 제품만 볼 수 있도록 하는 기능을 작업하였다. 자동으로 분류되는건 아니고 약간의 소스 노가다가 필요한 작업이다. [예시화면] [작동 방식] 상품 등록시, 자체 코드에 컬러명을 영문으로 입력하면 별도의 페이지에서 컬러칩 클릭시 자체코드가 해당 컬러명을 가진 상품만 탭방식으로 show, hide 해주는 방식이다. [작업소스] - 일반페이지를 하나 생성한 후 아래의 소스 추가 - ul.colorchip부분에 쓴 영문명을 자체코드에 동일하게 입력해주면 됨. /pl/item_list.html - 여기서 중요한 점은 상품리스트(li) class에 {$ma_product_code}를 넣어주는것. 해당 컬러를 클래스로 가진 li만 보여..