루키의 보석함

요즘 글로벌 홈페이지들을 살펴보면 Korean / English와 같이 언어별로 구분되어 선택할 수 있도록 되어 있습니다. 오늘은 이와 같이 접속자에 따른 홈페이지의 언어별 분류를 어떻게 하는지 정리해 보도록 하겠습니다. 가장 확실한 방법은 역시 쿠키를 활용하는 것입니다. 사용자가 선택한 언어를 쿠키에 저장해 두고 홈페이지가 열릴 때마다 보여주는 방법이죠.. 한번 설정한 언어 정보를 기반으로 계속 보여주기 때문에 지속적으로 방문하는 사용자를 위해 일반적으로 많이 사용되는 방법입니다. 그러나 사용자가 선택하기전에 어떤 언어를 먼저 보여줘야 할지를 결정하는 부분이 이슈가 됩니다. 이때 사용하는 것이 접속자의 IP를 기반으로 국가를 파악하고 언어를 설정하는 방식을 사용합니다. 그렇다면 IP를 기반으로 국가 정..

HTML4와 CSS2에서는 다양한 미디어 타입에 따라 처리할 수 있는 스타일시트를 지원하고 있습니다. 스마트폰, 태블릿, 스마트TV 등 다양한 화면의 크기를 가진 기기들이 배포됨에 따라 관심을 받게 된 것 같습니다. 먼저 미디어 쿼리를 적용한 사이트(http://mediaqueri.es/)를 모아둔 곳을 한번 살펴보시죠. One-Source Multi-Use 측면이나 모바일 웹 개발이 증가하면서 미디어 쿼리를 적절하게 활용하는 것이 필요할 것 같습니다. 미디어쿼리에 대한 W3C의 문서는 현재 Candidate Recommendation 상태로 거의 현재 상태로 표준이 될 것 같네요. 미디어쿼리는 CSS에 설정을 통해서 화면 크기 등에 따라 다른 형태로 보여줄 수 있도록 구현하는 것입니다. 이를 위해 me..

포털 사이트를 비롯한 모바일 웹을 살펴보면 좌우로 스와이프 하는 기능들이 많이 포함되어 있습니다. 협소한 공간에 여러 컨텐츠를 배치하기 위한 방법으로 활용되고 있는데요. 이러한 스와이프를 구현하기 위해서는 꽤 많은 자바스크립트와 코드가 들어가야 합니다. 오늘 소개할 SwipeView는 이러한 기능을 처리해 주는 스크립트를 제공하는 거네요.. http://cubiq.org/swipeview cubig.org 사이트를 보면 이외에도 상당히 괜찮은 모바일 웹 기반의 소스들을 제공하고 있습니다. 먼저 스와이프가 적용된 동영상과 데모 페이지들을 살펴보시죠. 이미지 갤러리에 대한 데모 페이지는 다음과 같습니다. http://cubiq.org/dropbox/SwipeView/demo/gallery/ 이미지 이외의 컨..

90년대 후반부터 HTML을 시작한 분들은 CSS 보다는 태그와 태그를 활용해서 HTML을 작업하는데 익숙해 있기는 합니다. 그래서인지 CSS에 대해서 명확하게 이해하지 못하고 있는 부분들이 있는 것 같습니다. 특히 Margin과 Padding과 같은 부분에 대해서 가끔 헤깔려 하는 것 같아서 정리해 보려고 합니다. 위 그림을 보면 Margin, Border, Padding에 대해서 잘 나와 있습니다. Border는 경계선으로 실제 콘텐츠를 감싸고 있는 선으로 스타일, 색, 두께를 지정할 수 있습니다. 콘텐츠 부분과 다르게 보이도록 하기 위해서 페이지의 배경색과 다른 색을 사용하기도 합니다. Padding은 Border 안쪽에 위치하는 여백으로 콘텐츠에 대한 공간을 지정하는 것입니다. Padding 공간..

지도 좌표계를 보면 참 복잡한 것 같습니다. Bessel, TM, UTM, WGS84 등등 다양한 이야기들이 나옵니다. 스마트폰이 대중화되면서 GIS에도 관심은 많아졌지만 대부분 지도 API 만을 사용할 뿐 해당 개념에 대해서는 파악하기가 어려운 면이 있는 것 같네요. 그래서 한번 내용을 정리해 보도록 하겠습니다. 실제 지구를 덮고 있는 지형의 모양을 지표면이라고 하는데요. 지표면은 당연히 울퉁불퉁한 형태로 구성되어 있습니다. 그래서 평균 해수면을 토대로 다시 지구를 그려 본 것을 지오이드라고 합니다. 이것도 지표면보다는 조금 낫지만 역시 복잡한 모양으로 이루어집니다. 그래서 지구의 모양에 잘 맞게 수학적인 타원체로 그려서 사용하게 됩니다. 하지만 이런 타원체가 나라마다 조금씩 다르게 구성되어 있습니다...

스마트 폰 사용자들이 점차 늘어남에 따라 모바일 웹 사이트 제작도 많이 늘고 있는 것 같습니다. 기존 포털 뿐만 아니라 대부분의 웹 사이트들이 모바일 웹도 기존 웹과 함께 제작하고 있으며, 하이브리드 앱이라는 컨셉으로 기존의 App과 Web의 장점을 살려 혼합한 모델들도 나오고 있는 것 같습니다. 모바일 웹을 만드는데 어떤 점들을 주의해야 할까요? 여러가지 있겠지만 웹 표준을 담당하는 W3C의 자료를 토대로 정리해 보고자 합니다. 다음 사이트를 보면 W3C에서 권고하는 Best Practice에 대한 한글 설명이 있습니다. http://www.w3c.or.kr/Translation/mwbp_flip_cards/ 하나의 웹을 위한 설계: 다양한 장비를 고려하여 설계한 콘텐츠는 비용을 절감시키고, 유연성을 ..

php.ini 파일에 allow_url_fopen=on으로 설정되어 있으면, URL 주소로 파일 읽어올 때 다음과 같이 처리하면 됩니다. 하지만 allow_url_fopen=off로 설정되어 있는 경우, 일단 php.ini 파일을 수정하면 됩니다. 벗뜨~~ 웹 호스팅을 하는 경우 php.ini 파일을 직접 수정할 수 없는 경우가 있죠~ 이런 경우의 해결책을 찾아보니 다음과 같이 socket을 이용해 URL주소를 읽어오는 방법이 있었슴다.. 추가적으로 GET 방식 호출은 다음과 같이 할 수도 있습니다. 기타 다른 방법으로는 .htaccess 파일을 이용하는 방법도 있더라구요.. .htaccess 파일에 다음과 같은 내용을 추가하면 된다고 합니다. php_flag allow_url_fopen 1 하지만 위 ..

PHP와 MySQL을 사용하는 웹 호스팅에서 데이터베이스의 모든 테이블을 지우려고 할 경우, Drop Database 문을 활용하지 못하는 경우가 많습니다. 그렇다고 수많은 테이블을 하나씩 지우는 것도 방법이 아닐 듯 하네요.. 그래서 다음과 같은 PHP 프로그램을 통해서 처리할 수 있을 것 같습니다. 먼저 "show table"을 사용해서 전체 테이블 정보를 가져오고 이어서 "drop table" 명령으로 하나씩 지우면 되겠죠. 다음 소스를 참고하세요~

전화번호를 다루는 프로그래밍을 하다보면 포맷이 다른 경우가 많습니다. 그래서 중간에 )나 -가 들어가 있는 경우는 그대로 두고, 숫자만 있는 경우 포맷을 변경해서 -를 추가하는 javascript를 구성해 봤습니다. 즉, 다음과 같은 형태로 처리 된다고 보시면 됩니다. 021112222 -> 02-111-2222 03111112222 -> 031-1111-2222 0101112222 -> 010-111-2222 이와 같은 작업을 하기 위해서 두가지 방법이 있습니다. 전체 자리수를 확인하고 if ~ else를 통해서 경우의 수를 모두 처리하는 방법이겠죠. 그런데 좀 세련되어 보이지 않습니다. 그래서 정규식(Regular Expression)을 사용해 보기로 하겠습니다. 구성한 예제는 다음과 같습니다. ja..

간만에 모바일 웹으로 구글 맵을 다룰 필요가 있어 Google Map Javascript API v3을 사용해봤습니다. 구글 사이트에 정리가 잘 되어 있기는 하지만 간략하게 내용을 정리해 보려고 합니다. 먼저 Google Map JavaScript API v3에 대한 프리젠테이션 자료입니다. 1시간으로 비교적 길지만 시간날 때 한번쯤 들어보면 괜찮을 것 같네요. 모바일 환경등을 지원하기 위해 기존 Map의 속도를 향상시키기 위한 내용들이 앞부분에 나와 있네요.. Google Map JavaScript API v3으로 데스크탑과 모바일 환경을 지원하고 있구요. 기존의 JavaScript API는 더 이상 지원하지 않기 때문에 버전 3으로 마이그레이션 하라고 권고하고 있습니다. 실제 튜토리얼을 살펴보면 굉장..