분류 전체보기

tip
하나의 도메인에 메일서버, 홈페이지 서버 각각 연결하기

하나의 회사 도메인으로 홈페이지 주소로도 사용하고 이메일 주소로도 사용하는 경우가 많다. 이렇게 사용하기 위해서는 몇가지 설정이 필요해서 정리해보려고한다. STEP 1. 도메인 네임서버 설정 도메인의 네임서버를 홈페이지 서버의 네임서버로 설정해준다. STEP 2. 대표도메인 설정 홈페이지 및 메일 서버의 대표 도메인을 설정한다. 예) 둘다 모두 abc.com으로 설정 STEP 3. 도메인 설정 이용하는 서비스 홈페이지의 도메인 DNS 설정에 들어가 메일 서버의 A레코드, MX값, SPF값을 넣어준다. 카페24 서비스에서는 직접 설정이 가능하다. (나의서비스관리 > 도메인 관리 > 도메인 부가서비스 > DNS관리) 혹시 직접 설정할 수 있는 부분이 없다면 도메인 업체에 전달하면 설정해준다. [일반 메일서버..

tip
[네이버 웹마스터도구] 웹사이트 빠르게 등록하는 팁 ② 사이트 등록하기

이전글 - [네이버 웹마스터도구] 웹사이트 빠르게 등록하는 팁 ① 메타태그 설정 [네이버 웹마스터도구] 웹사이트 빠르게 등록하는 팁 ① 메타태그 설정 네이버에 사이트 등록하기 (네이버 웹마스터도구) STEP 1. 메타태그 삽입 네이버 또는 다른 포탈사이트에 내 홈페이지를 등록하기 위해서는 몇가지 설정을 해야하는데 그 중 가장 먼저 해야할 일 hongpage.kr 이전 글에 이어 네이버 웹마스터 도구를 통해 네이버에 홈페이지를 등록 하는 방법을 안내하려고한다. 홈페이지/블로그에 메타태그 설정하는 방법은 이전 글을 참고하면 된다. 홈페이지 파일 내에 메타태그를 설정했다면 이제 네이버 웹마스터도구에 등록할 차례이다. 네이버 웹마스터도구에 사이트 등록하기 1. 네이버에 로그인 한 후, 네이버 서치어드바이처 홈페..

tip
Font Awesome 사용해서 아이콘 넣는 방법

FontAwesome(폰트어썸)이란? 폰트어썸(Font Awesome)은 웹상에 많이 사용하는 아이콘을 벡터 형태로 제공해주는 서비스이다. 무료버전, 유료버전이 있는데 무료버전에서 제공하는 아이콘만해도 1609가지라 활용도가 높아서 홈페이지에서 많이 사용하고있다. 홈페이지를 만들 때 아이콘을 하나하나 만들지 않고, 코드를 가져다 쓰면 바로 사용할 수 있어서 아주 편리하다. Font Awesome 사용방법 1. 가입후 키트 코드 복사하기 1. https://fontawesome.com/에 접속해서 회원가입 후 로그인한다. Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More ..

파비콘(favicon) 만들어주는 사이트 추천, 웹사이트에 적용하기

파비콘(Favicon)이란? 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다. 최근 네이버 검색 결과에 파비콘이 노출되면서 파비콘의 중요성이 더 높아진 것 같다. 단순히 16*16 사이즈로 ico를 만들어서 적용할 수 도있지만, 디바이스 크기가 다양해진 만큼 어느부분에 파비콘이 어떻게 보여질지 몰라 획일화된 사이즈 보다는 다양한 사이즈로 등록해두는 것이 좋을 것 같은 개인적인 생각이 든다. 파비콘 사이즈를 직접 사이즈별로 만들지 않아도, 다양한 사이즈로 자동으로 파비콘을 만들어주는 사이트를 추천하고자한다. 파비콘 만드는 방법 1. 우선 포토샵이나 이미지툴로 192*192 픽셀의 이미지를 만든다. 이미지 확장자는 png나 jpg이면 상관없다. 2. www.favicon-ge..

tip
카카오톡 SNS 로그인 연동 기록 삭제하기

SNS 로그인 테스트를 하다보면 홈페이지 DB상에서는 모든 로그인 정보를 삭제해도 카카오쪽에는 아직 해당 사이트에 로그인한 기록이 남아 있어, 새롭게 다시 로그인이 되지 않고 이전 기록을 계속 불러오게 된다. 이런 경우 카카오 계정에 접속해 해당 사이트 로그인 이력을 삭제해주어야한다. 또는, 그동안 카톡으로 어떤 사이트에 로그인/회원가입 했는지 보고 싶을 때 이용할 수도 있다. 방법은 아래와 같다. 1. 카카오 계정에 접속 accounts.kakao.com/weblogin/account 2. 상단 메뉴에서 [계정 이용]을 클릭한다. 3. 연결된 서비스 관리에서 [외부 서비스 전체보기]를 클릭한다. 4. 그동안 카카오톡 소셜 로그인으로 연결한 사이트들을 모두 볼 수 있다. 4. 이력 삭제를 원하는 서비스 ..

[php] sql 쿼리 반복문으로 데이터를 불러오는 여러가지 방법 (for문, while문)

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

[php] 그누보드 보안 SSL 적용 (https 강제 리다이렉션하기)

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

[php] ajax를 활용하여 좋아요 버튼 만들기

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

[php] explode 배열 값 있는 것만 콤마로 구분해서 보여주기

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

[jQuery] 일정 시간이 지나면 자동으로 넘어가는 탭

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

tip
쿼리스트링 추가로 js, css, img 파일 캐싱 방지

js나 css 파일, 이미지 파일을 변경해서 서버에 업로드를 하였는데 바로 반영이 안되는 경우가 종종 있다. 바로 캐싱 때문에 이전에 불러왔던 파일을 불러 오기 때문이다. 크롬의 경우에는 ctrl+shift+r을 눌러 확인이 가능하기도하지만, 해당 작업을 공유하는 다른 사람들에게 매번 '쿠키와 캐시를 지우고 들어가보세요!' 할수도 없고, 참으로 불편하다. 더군다나 캐시 지우는 방법을 모르시는 분들도 많고.. 파일이 업데이트 될 때마다 캐싱이 되지 않도록 하는 방법은 아래와 같다. 캐싱 방지하는 방법 1. 파일명 변경하기(URL변경) (비추천) 파일명을 style.css -> style2.css 으로 변경 파일명을 아예 변경해서 업로드하면 캐싱 없이 새로운 파일을 불러온다. 하지만 수정 할 때마다 파일명을..

[jQuery] 디바이스 크기별로 jquery 스크립트 다르게 불러오기 (반응형)

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

[jQuery] 기본 탭 소스

유용하게 많이 사용하는 기본 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..

6년간 1인기업을 운영하면서 느낀점.

2015년 3월 사업자등록. 그로부터 5년 하고도 9개월이 지났다. 처음 사업자 등록을 하던 그 날에는 내가 이 일을 이렇게 오래 할 줄은 생각도 못했다. 어쩌다 보니 6년째 1인 기업(기업이라 하기도 거창하다)을 운영하고 있다. 6년쯤 되면 시니어 정도는 되지 않나 하는 생각에 약간의 흐뭇함이 생기는 한편 그동안 앞만 보고 달려왔으니 이제는 한 번쯤 되돌아보는 시간도 가져야겠다는 생각도 든다. 6년간 일하면서 느낀 점을 정리해보고자 한다. 모두 다 당연한 얘기 같지만 당연하다 느끼는 것은 머릿속에만 있지 오히려 잘 지키지 않게 된다. 글로 표현하면 조금 더 명확히 다가오지 않을까 싶어 정리해 본다. 한 손님이 다른 손님을 불러온다. 끝까지 잘해줄 것. 혼자 일하다 보니 따로 영업을 하기가 쉽지 않다. ..

tip
디자이너가 알면 좋은 유용한 사이트 모음

1. 이미지 화질을 높여주는 사이트 간혹 화질이 좋지 않은 이미지를 어쩔수 없이 사용해야할 때 아래 사이트에서 어느정도 해결이 가능하다. waifu2x.udp.jp 사용방법 1. 이미지 선택 부분에서 이미지 URL을 입력하거나 파일 업로드를 한다. 2. 스타일 : 그림 또는 사진 선택 3. 노이즈감소 : 최고 선택 (결과에 따라 다른 선택을 해도 됨) 4. 확대 : 2x 선택 (결과에 따라 다른 선택을 해도 됨) 5. 로봇이 아닙니다 체크 후 변환 클릭 2. 누끼 따주는 사이트 (이미지 배경 없애주는 사이트) www.remove.bg/ko 일일히 누끼 따는게 귀찮다면 이 사이트가 아주 유용하다. 이미지를 업로드만 하면 알아서 누끼를 따준다. 고화질로 다운 받기 위해서는 결제를 해야하지만 무료로 제공하는 ..