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

1. 구글 사이트 등록 전 - SEO 설정 구글 사이트 등록하기전에 홈페이지 사이에 메타태그를 적절히 넣어줘야한다. SEO 메타태그 관련한 자세한 내용은 아래 포스팅 참고 https://hongpage.kr/14 [네이버 웹마스터도구] 웹사이트 빠르게 등록하는 팁 ① 메타태그 설정 네이버에 사이트 등록하기 (네이버 웹마스터도구) STEP 1. 메타태그 삽입 네이버 또는 다른 포탈사이트에 내 홈페이지를 등록하기 위해서는 몇가지 설정을 해야하는데 그 중 가장 먼저 해야할 일 hongpage.kr 2. 구글 사이트 등록하기 1) 구글에 사이트 등록은 서치콘솔에서 가능하다. https://search.google.com/search-console?hl=ko 에 접속한 뒤, 오른쪽 URL 접두어 란에 사이트 주소..

다음 검색시 사이트가 뜨게 하려면 다음에 사이트 등록을 하면 되는데, SEO설정 없이 간단하게 아래와 같이 신청하면 하면 된다. 다음 사이트 검색 등록하기 1. 다음 검색등록 페이지(https://register.search.daum.net/index.daum)에 접속한 뒤, 가운데 등록화면 URL에 등록할 홈페이지 주소를 입력한다. 2. 개인정보 및 서비스 이용 동의에 체크 후 [확인]을 누른다. 3. 검색시 나오게할 정보들을 입력하면 된다. 1) 제목(필수) : 사이트이름 2) 모바일 URL : 별도의 모바일 홈페이지 주소가 있는 경우 적어준다. ex) 카페24 쇼핑몰의 경우 기존 주소 앞에 m. 붙은 모바일 주소 3) 설명 : 검색시 사이트이름 아래에 나오는 설명 4) 설명-품목 (필수) : 검색시..

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

홈페이지에 대한 기본적인 설정을 할 때 유용하게 쓰이는 .htaccess 파일 이 파일에서 정의를 하면 긴 주소도 짧게 사용이 가능하다. 리다이렉션 기본 코드 에디터에 아래와 같이 작성 한 뒤, 서버 가장 상위 폴더에 업로드하면 된다. RewriteEngine On RewriteBase / RewriteRule 줄일주소 /기존주소 [L] 한줄한줄씩 해석을 해보자면 아래와 같다. RewriteEngine On

특정 순서의 CSS를 변경할 때 유용한 nth-child(). 다양하게 활용이 가능하다. 3의 배수인 박스 배경 변경 .box:nth-child(3n){ background:red } 20번째 이후 모든 박스 배경 변경 /* 22번 부터 이후 모든 box 폰트색 변경 */ .box:nth-child(n+20) { background:red } 1번째부터 5번째까지 박스 배경 변경 1번째부터 지정할때는 -n으로 시작하는 것 주의 .box:nth-child(-n+6) { background:red } 15번째부터 20번째까지 박스 배경색 변경 .box:nth-child(n+15):nth-child(-n+20) { background:red } 마지막에서 3번째 박스 변경 .box:nth-last-child(..

1) /lib/thumbnail.lib.php 파일 $thumb_tag 부분 주석처리 // $img_tag에 editor 경로가 있으면 원본보기 링크 추가 $img_tag = $matches[0][$i]; if(strpos($img_tag, G5_DATA_DIR.'/'.G5_EDITOR_DIR) && preg_match("/\.({$config['cf_image_extension']})$/i", $filename)) { $imgurl = str_replace(G5_URL, "", $src); //$thumb_tag = ''.$thumb_tag.''; } 2) /lib/common.lib.php 파일 $img 첫번째, 세번째 주석처리 if (preg_match("/\.({$config['cf_image_e..

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

audio태그를 이용해서 음악을 넣으면 아래처럼 ... 버튼을 누르면 다운로드, 재생속도를 조절할 수 있는 메뉴가 뜨게 된다. 이 메뉴가 뜨지 않게하려면 태그 사이에 controlsList="noplaybackrate nodownload nofullscreen"을 추가하면 된다. noplaybackrate -> 재생속도 메뉴 안보이게 nodownload -> 다운로드 메뉴 안보이게 nofullscreen -> 영상의 경우 풀스크린 안되게 코드

placeholder 글자색 변경하는 방법은 아주 간단! CSS 파일에 아래 코드를 추가하면 된다. input::placeholder {color:#ccc;} input::-webkit-input-placeholder {color:#ccc;} input:-ms-input-placeholder {color:#ccc;} textarea::placeholder {color:#ccc;} textarea::-webkit-input-placeholder {color:#ccc;} textarea:-ms-input-placeholder {color:#ccc;}

영카트 쇼핑몰은 네이버페이와 연동하는데 아래와 같은 메일을 받았다. 네이버쇼핑 입점이 완료되실 경우 네이버페이 연동 시 주문 등록 과정에서 쿼리 스트링 중 네이버쇼핑 상품ID(EC_MALL_PID) 항목을 전송해주셔야 합니다. 네이버쇼핑에 입점하시어 네이버 쇼핑 검색에 판매 상품을 노출하고 계시는 가맹점은 네이버페이를 연동할 때 관련된 정보(MAPID)를 함께 제공해주셔야 합니다. EC_MALL_PID는 다른 상품 관련 정보들(ITEM_ID, ITEM_COUNT, ITEM_NAME... 등)에 1:1로 대응하여 보내주시면 되며, 해당 항목의 값은 네이버 쇼핑으로 송출중인 상품 ID(MAPID 또는 MALL PID) 값을 입력해주셔야 합니다. 이게 무슨말인가했는데 아래와 같이 간단히 한줄만 추가해주면 된다..

일러스트레이터에서 PDF로 내보내기 하는 경우 이미지가 깨져보이는 경우가 있다. 이 경우 간단하게 설정만 바꾸면 고화질로 내보낼 수 있다. 1) 파일 > 내보내기 > 화면에 맞게 내보내기 클릭 후, 내보낼 대지를 선택한 다음 포맷을 PDF로 한 뒤, 바로 오른쪽 위쪽 톱니바퀴 아이콘을 클릭한다. 2) PDF를 선택 후, Adobe PDF 사전설정을 [고품질 인쇄]로 선택한다. 설정값 저장 후, PDF 내보내기하면 끝! (물론 고품질 인쇄로 하면 PDF 용량이 배가 커지는 단점이 있긴하다.) PDF [고품질 인쇄] 설정 전/후가 이렇게나 화질 차이가 난다. 꼭 [고품질 인쇄]로 설정하고 PDF로 내보내기!!!

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

디자인하면서 간혹 캘리그라피 같은 손글씨 폰트가 필요할 때가 있는데 매번 찾기도 번거로워서 자주 사용하는 폰트들을 한번 정리해보고자한다. 손글씨체도 디자인에 다용도로 활용하기 어려운 애매한 폰트들이 많은데 이 폰트들은 깔끔하고 뭔가 프로페셔널해보이는 손글씨라 다용도로 활용하기 좋다. 더군다나 무료 사용이 가능하다는 점! (다만, 자세한 허용범위는 각 홈페이지를 참고!) 1. 제주한라산 제주특별자치도의 상징성과 문화적 고유성을 살리고, 국제도시로서 디자인적 예술적 품격을 갖춘 문화예술의 이미지를 담은 미래 지향적 서체 ■ 개인/기업/상업적인 용도 사용 가능 ■ 다운로드 : https://jeju.go.kr/jeju/symbol/font/infor.htm 2. 상상토끼 꽃길 사방간데 넘실데는 꽃길처럼 비단색..

그누보드 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..