전체 글 153

facetest.kr 심심풀이용 페이지

제목 - facetest.kr => Face Break 간략 소개 - 남녀 연예인들 얼굴 사이에 누군가의 얼굴을 넣어 오징어로 만드십시오. 주요 정보 - php, javascript, ajax, jquery 사용- js/css 파일 경로, include 등의 편의를 위하여 그누보드 사용- php 이미지 관련 함수 (php gd) 들을 사용하여, 이미지 타입 변경 ex) png → jpeg / 썸네일 생성 / 이미지 자르기 / 이미지 합치기 / 워터 마크 삽입 등의 기능 구현- php header 를 사용하여 이미지 다운로드 기능 구현- jquery.Jcrop.js 플러그인을 사용하여 이미지 드래그 영역 선택 및 자르기 기능 삽입 스크린샷 남자버전 여자버전 이미지 업로드 및 이미지 영역 드래그 선택 이미지..

웹페이지 속도 최적화 방안을 알려주는 사이트 (PageSpeed Tools Insights)

구글에서 제공하는 웹페이지 속도 개선을 위한 툴 (PageSpeed Tools) 중 하나인 PageSpeed Insights 를 소개해드리겠습니다. 이것 외에도 PageSpeed Module, PageSpeed Optimization Libraries 가 있는데, 이것들은 다음에 다루도록 하겠습니다. - PageSpeed Tools Insights 위 링크를 눌러 접속하면 아래와 같은 페이지가 뜹니다. URL 입력 부분에 URL을 입력하면 해당 웹페이지의 최적화 가능 항목 (속도 개선 방안) 들을 알려줍니다. 시험삼아 티스토리 공식 주소를 넣어보았습니다. - 모바일 페이지 분석 결과 - 데스크톱 페이지 부분 분석 결과 분석 결과 등급은 Poor , Needs Work , Good 으로 나뉘어집니다. 결과..

[JavaScript/jQuery] input file 이미지 선택시, 미리보기 구현 (ie11+)

input 태그를 이용하여 이미지 파일을 업로드 할 때, 선택한 이미지의 미리보기 기능이 필요한 경우가 있습니다. (서버에 파일을 업로드하지 않고, 미리보기 기능을 구현하는 것) 해당 소스는 크롬, 파폭, 엣지 등 현재 많이 사용되는 최신 브라우저와 익스플로러 11버전 이상만 지원합니다. input file 이미지 선택시, 미리보기 구현 소스 (ie11+) ※ 해당 소스는 제이쿼리와 함께 사용해야합니다. 스크립트 부분 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 ..

웹페이지 모바일 친화성 테스트 사이트

요즘에는 웹에서 모바일의 비중이 커지면서 반응형 웹, 모바일 웹 등의 중요성이 커지고 있습니다. 사이트 제작, 운영 부분에서도 PC 버전 못지않게 모바일 버전에 신경을 많이 쓰는 추세이기도 합니다. 그런 추세에 맞추어, 웹페이지가 모바일에서 보기에 적합한지 테스트 해볼 수 있는 사이트를 소개해 드리겠습니다. 본 사이트는 구글에서 제공합니다. 모바일 친화성 테스트 사이트 (바로가기 : https://search.google.com/test/mobile-friendly) 테스트할 사이트의 URL을 입력하면, 해당 사이트의 모바일 친화성을 테스트 해줍니다. (네이버 모바일 웹 테스트 결과) (본 블로그 모바일 버전 테스트 결과) 모바일에 친화적인 사이트의 경우 위와 같은 결과 화면이 뜹니다. 이것 외에도 몇개..

애드센스 드디어 승인 받았습니다. (스냅북 이용)

어제 일기를 썼듯이, 일주일이 지나도 애드센스 심사 결과가 안나와서, 오늘 낮에 문의를 넣었었습니다. 심사 중일 때 애드센스 페이지에 들어가보면, 일반적인 경우 최장 3일 걸린다고 안내가 되어있는데 나는 왜 이렇게 늦어지는건지 궁금하다고, 그리고 빠른 처리를 부탁한다고 문의를 넣었습니다. 그리고 저녁이 되어 방금 메일을 열어보니, 그토록 받고 싶었던 애드센스 최종 승인 메일이 와있었습니다. 속는 셈치고 시도해본 방법 (스냅북을 이용한 방법) 으로 일주일만에 애드센스 최종 승인을 받게 되다니... 솔직히 뭔가 기쁨보다는 허무함이 더 큰 것 같습니다. 그동안 애드센스를 승인 받으려고 혼자서 삽질 했던 시간들에 비하면 그 시간이 너무 짧기 때문인지도 모르겠습니다... 지금 돌아보면 스냅북으로 시도하기 이전에 ..

일상 2017.11.14

파비콘 만들기, 로고 만들기 추천 사이트

1. 파비콘 만들기 추천 사이트 (http://tools.dynamicdrive.com/favicon/) 이 사이트에서 파비콘을 만드는 방법은 간단합니다. (아래 사진 참고) 1 ) 파일 선택을 클릭하여 파비콘으로 생성할 이미지를 선택합니다. 2 ) 아래의 Create Icon 버튼을 눌러 파비콘을 생성합니다. - 사이트에 기재되어 있듯이, 업로드 이미지의 최대 용량은 150KB 입니다. - Optional 부분에서 사이즈 옵션을 선택하지 않으면, 기본 16x16 사이즈로 생성됩니다. - Create Icon 버튼을 누르면, 파비콘이 적용시 미리보기와 함께 다운로드 버튼이 활성화 됩니다. 3 ) Download FavIcon 버튼을 눌러 파비콘을 다운로드 합니다. 2. 로고 만들기 추천 사이트 (http..

[PHP] PHP Mailer로 메일 전송 (네이버 아이디 사용)

기존 PHP Mailer 를 사용하는 경우, 네이버 메일 주소로는 메일 전송이 안되는 경우가 있습니다. 그럴 때 메일 전송이 가능한 PHP Mailer 소스를 공유합니다. ※ 다량 메일 전송, 대용량 첨부파일 메일 전송 등은 테스트 해보지 않았습니다. 이 소스를 사용하기 위해서는 PHP Mailer에 사용될 네이버 아이디가 하나 필요합니다. (제재를 받거나 이용 정지를 당한 아이디는 PHP Mailer로 메일이 발송되지 않습니다.) 1. 네이버 아이디 설정 1) 네이버 메일함 -> 환경 설정 2) POP3/IMAP 설정 3) IMAP/SMTP 설정 탭 4) IMAP/SMTP 사용 체크 -> 확인 여기까지 했으면, 일단 네이버 아이디는 PHP Mailer를 사용할 준비가 완료되었습니다. 2. PHP 소스 ..

[PHP] curl 페이지 크롤링 함수

기본적인 php curl 함수에 필요할만한 옵션을 몇가지 추가하여 함수로 만들어 보았습니다. 1234567891011121314151617181920212223242526272829303132333435363738394041424344 실제로 평소 어떤 페이지를 크롤링 및 파싱할 때 자주 사용하는 기능들을 모아서 만든 php curl 함수입니다. post 전송, 리퍼러 지정, 쿠키처리 정도까지만 넣었고, header 지정이나 uesragent 지정 등은 필요하다면 따로 넣어서 사용하면 될 듯 합니다. 일반적인 페이지 (+로그인이 필요한 페이지) 정도는 무리없이 파싱 작업이 가능할 것입니다.

익스플로러 버전별 (IE6 ~ IE11) 테스트 사이트 (크로스 브라우징)

해당 사이트는 아쉽게도 유료화 되었습니다... 크로스 브라우징 작업을 하다가 우연히 발견한 곳인데, 아주 획기적인 곳을 발견했습니다. 우선 사이트 주소는 https://turbo.net/browsers 입니다. 사이트에 접속해보면 이렇게 생겼는데, 여기 나열된 브라우저들이 전부 다 테스트가 가능한 브라우저들입니다. 여태까지 홈페이지 관련 작업을 하면서 익스플로러(이하 IE)를 테스트를 하기위해서 했던 뻘짓들을 나열해보자면... - IE 자체 개발자 도구- 크롬 IE 확장프로그램- IE Tester- 가상머신에 window + 테스트할 IE 버전 설치 등이 있습니다. 이 중에서 가상머신에 직접 윈도우를 띄워서 테스트 하는 것을 제외하고는 전부 엉터리였습니다. 다른 방법들은 제대로된 테스트를 할 수가 없었습..