루키의 보석함

웹과 모바일에서 입력창이 숫자일 때, 슬라이더 형태로 제공하는 방법을 정리해 보려고 한다. 부트스트랩을 이용한 오픈소스가 있어서 활용해봤다. 먼저 실행하는 결과를 살펴보려면 http://www.word.pe.kr/bootstrap/slider.html 에 접속하면 된다. 다음과 같은 화면이 나온다. 부트스트랩 슬라이더 소스 설명 소스에서는 bootstrap CSS와 JQuery를 기본으로 사용하고 있고, 별도의 bootstrap-slider css와 js 파일이 존재한다. 각각의 파일은 다음과 같다. 먼저 슬라이더로 입력할 부분과 결과를 출력할 부분의 HTML을 다음과 같이 구성한다. 최소값(data-slider-min), 최대값(data-slider-max)을 지정할 수 있고, 값의 이동 간격(data..

하이차트(high chart)의 가장 큰 장점은 자바스크립트 기반으로 웹과 모바일을 모두 지원한다는 점이다. 모바일 트래픽이 증가함에 따라 최근 하이차트(high chart)를 그래프 툴로 활용하는 경우를 종종 볼 수 있다. 웹에서 사용할 수 있는 무료 그래프 툴에 대하여 에서 여러가지 그래프 툴을 설명했었는데, 오늘은 하이차트의 활용에 대해 정리해보도록 한다. 하이차트(highchart) 설치 하이차트를 설치하는 것은 매우 간단하다. jQuery와 같은 자바스크립트를 추가하고 이어서 하이차트의 자바스크립트를 포하하면 된다. 주의할 점은 순서가 jQuery 다음에 하이차트라는 것이다. 가끔 highcharts.js 파일을 jquery.min.js보다 앞에 써서 오류가 발생하는 경우가 있다. 하이차트(hi..

최근 모바일 웹을 지원하는 반응형 웹을 만드는 경우가 많다. 미디어쿼리나 부트스트랩(Bootstrap)을 활용해서 쉽게 반응형 웹을 만들기도 하지만 경우에 따라서 직접 모바일 기기인지 체크해야 하는 때도 많다. 그렇다면 모바일 브라우저를 어떻게 구분해 낼까? 자바스크립트로 브라우저 크기 구분 먼저 브라우저의 크기로 구분해 내는 방법이 있다. 자바 스크립트의 document.body.clientWidth 값을 가져와서 사용하면 된다. 소스를 살펴보자 if (document.body.clientWidth < 800) { // 모바일 기기 관련 작업 } 실제 몇몇 기기의 document.body.clientWidth의 값을 체크해 보면 다음과 같다. 디바이스 인치 세로모드 가로모드 아이폰 6 4.7인치 375..

PHP4등 하위버전에서 JSON을 사용하는 방법에 대해서는 PHP4에서 JSON 설치하기 에서 살펴봤다. 이번에는 실제 DB의 내용을 가져와서 JSON 파일을 만드는 방법을 정리해 본다. JSON은 HTML에서 Ajax로 통신하거나 안드로이드, 아이폰과 같은 모바일과 통신하기 위해서 주로 사용한다. 많이 사용하는 형태인 DB의 데이터를 가져와서 JSON으로 출력하는 부분을 정리해 보자. 데이터와 JSON 출력형태 사용할 DB 데이터는 다음과 같다. 예제를 보여주기 위해 임시로 만든 테이블이다. 이 데이터를 가져와서 출력할 JSON 타입의 문자열은 다음과 같다. 데이터를 묶는 것을 보여주기 위해서 middle_exam과 final_exam을 하나로 합쳤다. [ {"name":"mini","age":18,"..

PHP에서 JSON 타입의 메시지를 만들려면 json_encode(), json_decode() 함수를 사용하면 된다. 그러나 이 메소드는 PHP 5.2부터 지원하기 때문에 PHP5.1 이하에서는 사용할 수 없는 문제가 있다. PHP4에서 이 함수를 호출하면 다음과 같은 오류 메시지가 나온다. call to undefined function: json_encode() 서버 호스팅과 같이 직접 서버를 보유하고 있다면 버전업으로 간단히 해결할 수 있겠지만 과거부터 웹 호스팅을 쓰고 있었다면, 더욱이 아쉬운 부분일 수밖에 없다. PHP4에서 JSON 설치 어차피 PHP에서도 내장함수로 만들어서 배포한 것이기 때문에 json_encode(), json_decode() 함수를 직접 구현하면 될 것이다. 하지만, ..

IE 9의 개발자 도구(F12) 이슈 웹 개발에서 브라우저 호환성은 중요한 이슈다. 특히, 인터넷 익스플로러(IE)는 웹 표준에 대한 이슈가 꾸준히 제기되고 있다. 최근 프로젝트를 진행하면서, IE9 브라우저 사용자가 특정 메뉴에 접속할 때, 화면이 나타나지 않는 경우가 있었다. HTML 소스를 다른 페이지의 HTML과 비교해도 차이는 없었다. 한가지 특이한 사항은, 디버깅하려고 개발자 도구에 접속면 페이지가 정상적으로 나온다는 점이었다. 분명 개발자 도구와 관련이 있는 것이라고 판단했다. 문제의 원인은 바로 console.log() 함수였다. IE9 브라우저에서 console.log()를 인식하지 못해, 자바스크립트 오류가 발생한 것이다. 예전에는, 자바스크립트 디버깅을 위해 alert() 함수를 주로..

인터넷 광고와 관련된 용어들이 CPM, CPC 등 약자로 되어 있죠.. 이번 기회에 전체적으로 정리해 보려고 한다. CTR (Click Through Rate) 인터넷 광고는 노출을 기반으로 클릭해서 해당 웹 페이지나 모바일 앱 다운로드로 이동하는 것이다. 그러므로 노출 대비 클릭이 얼마나 일어나는지를 측정할 필요가 있는데 이를 CTR이라고 한다. CTR = (광고 클릭수 / 광고 노출수) x 100 CPM (Cost per Thousand Impressions) 광고를 1,000회 노출할 때 들어가는 광고비용을 의미한다. 흔히 노출 광고라는 것이 이에 해당하며 주로 포탈 메인등에 집행되는 광고다. CPM = (광고 비용 / 광고 노출수) x 1000 CPC (Cost per Click) 광고 클릭당 광..

네이버 블로그에 원격으로 글을 올릴 필요가 있어 찾아보니 글쓰기 API를 지원하고 있었습니다. API를 사용하기 위해 먼저 설정을 해야 합니다. "관리" 메뉴로 들어가서 "플러그인 연동 관리"의 "글쓰기 API설정"을 선택합니다. "글쓰기 API설정"에서 API 연결 암호를 발급받기만 하면 설정은 완료됩니다. 이제 API연결 URL, 아이디, API연결 암호를 가지고 XMLRPC로 원격 글쓰기를 만들면 됩니다. 찾아보니 원격 글쓰기를 위한 PHP 프로그래밍 소스는 많이 나오는데 JSP나 Java를 이용한 소스가 별로 없어서 간략하게 정리해서 올려봅니다. XMLRPC를 위한 Jar 파일은 아파치 사이트에서 다운받아서 사용해도 되고, 여기를 눌러서 바로 다운로드 해도 됩니다. 먼저 "아이디", "이름", "..

예전에 MaxMind의 GeoIP를 이용하여 IP를 기반으로 국가별 분기를 하는 내용을 정리하였는데요. 2012/03/07 - [프로그래밍/Web] - 웹페이지 접속자에 따른 국문, 영문 페이지의 구분을 위한 국가를 확인 방법에 대한 정리 HTTP의 헤더 정보를 사용하여 보다 쉽게 국가별 분기를 하는 방법이 있더군요. 바로 HTTP_ACCEPT_LANGUAGE 정보를 확인하는 것입니다. 해당 정보를 보내주지 않는 브라우저가 있으면 문제가 될 수 있을 듯하여 살펴봤는데 대부분의 브라우저에서 잘 지원하는 것 같습니다. 각 프로그래밍 언어별 HTTP_ACCEPT_LANGUAGE 정보를 가져오는 것은 다음과 같습니다. PHP: $_SERVER['HTTP_ACCEPT_LANGUAGE'] ASP: Request.S..

웹 브라우저의 높이에 따라 본문의 내용을 늘리고 싶은 경우가 종종 있을 수 있습니다. 이런 경우, 먼저 브라우저의 높이를 가져올 수 있어야 하구요. 이어서 동적으로 특정 영역의 높이를 지정할 수 있어야 합니다. 브라우저 높이 가져오기브라우저의 높이를 가져오는 것은 다음과 같이 매우 간단합니다. alert(document.body.scrollHeight); 이 값을 기반으로 하단의 영역을 빼고 본문 영역의 높이를 지정하면 되겠죠. 참고로 브라우저의 높이와 관련된 자바스크립트 코드를 정리해 봅니다. 동적으로 높이 지정하기JQeury를 사용해서 다음과 같이 동적으로 높이를 지정할 수 있습니다. css 메소드에 height 값을 설정하는 형태로 했습니다. (바로 height 메소드를 사용할 수도 있습니다.) 이..