평범한 게 제일 어렵다

제목 - 그누보드 게시판 반응형 스킨 (부트스트랩 기반) 간략 소개 - 디자인 따위는 생략하고 심플함을 내세운 그누보드 게시판 반응형 스킨 주요 정보 - 그누보드 기본 게시판 스킨을 뼈대로 작업하였음- 일부 디자인 (input, 버튼 등) 과 기능을 위해 부트스트랩 (최신버전) 사용 (부트스트랩을 필수로 사용해야 적용 가능한 스킨입니다. 부트스트랩이 필요없는 버전은 따로 제작할 예정)- 일부 디자인을 위해 Font Awesome (v4.6.3) 사용 (최근에 출시된 Font Awesome 5 버전은 테스트 해보지 않았음)- 크롬, 파이어폭스, 오페라, ie8+ 작동 테스트 완료- PC 브라우저에서 화면 크기를 모바일 수준으로 줄인 화면과, 실제 모바일 기기 브라우저의 화면이 다를 수 있음. 화면 크기별 ..

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

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

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을 입력하면, 해당 사이트의 모바일 친화성을 테스트 해줍니다. (네이버 모바일 웹 테스트 결과) (본 블로그 모바일 버전 테스트 결과) 모바일에 친화적인 사이트의 경우 위와 같은 결과 화면이 뜹니다. 이것 외에도 몇개..

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

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

PHP로 파일 다운로드를 구현하는 소스입니다. 12345678910111213141516171819202122232425262728293031323334353637

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

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