컴퓨터, 독서, 학습, 그리고 사람

웹 표준으로 개발하면서 CSS를 적용하다 보면 항상 IE가 문제가 됩니다. 구글 크롬, 파이어폭스, 애플 사파리 모두 제대로 보이는데 IE만 이상하게 보이는 경우가 종종 있습니다. IE 8 버전 이후로 웹 표준을 많이 따르기 때문에 좋아졌다고는 하지만 아직도 안 맞는 부분들이 있네요. IE 브라우저의 CSS 구분 이런 경우, CSS Hack이라고 하는 특정 브라우저만 적용할 수 있는 편법들이 나오기도 하지요. 이외에도 일반적으로 사용하는 방법이 브라우저를 파악해서 다른 CSS 파일을 링크하도록 구성하는 겁니다. 다음 소스를 한번 보시죠.. 이렇게 하면 IE에서는 common_ie.css 파일을 사용하게 되구요. 다른 브라우저에서는 common.css 파일을 사용하게 됩니다. 이게 가능한 이유는 IE 브라..

자주 사용하는 웹프로그래밍 페이지 이동 방법에 대해서 정리해 보려고 합니다. JSP 위주로 정리하겠지만 Javascript 방식이나 Meta 태그는 다른 언어에서도 똑같이 적용 가능하므로 잘 봐두시면 좋을 것 같네요. 먼저 언제 이런 페이지 이동을 사용할까요? 예를 들어, http://www.word.pe.kr/에 접속한 사용자를 http://www.word.pe.kr/home/index.html 로 이동시킨다든지~ 로그인한 사용자를 특정 위치로 이동시킬 때 이런 페이지 이동이 필요하게 됩니다. 자~ 그럼 페이지 이동에 대해서 살펴보도록 하죠. Javascript를 활용한 페이지 이동 Javascript를 활용한 예제는 모든 언어에서 이용 가능합니다. 왜냐하면 자바스크립트 자체가 대부분의 언어에서 지원하..

모바일 앱 개발을 하다 보면, 아이폰 개발자와 안드로이드 개발자가 각각 필요한 경우가 많습니다. 물론 두 가지를 혼자서 하는 경우도 있겠지만 대부분의 경우에는 전문적으로 나누어져 있지요. 그러다 보니 개발이나 운영에 있어서 비용이 두 배로 들어가는 경향이 있습니다. 그래서 모바일 앱 초창기부터 하나의 소스로 모든 앱을 개발할 수 있다는 플랫폼들이 나왔었던 것 같습니다. 그중에서 폰갭(phonegap)이라고하는 오픈 소스로 이루어진 하이브리드 앱 개발 도구에 대해서 간략하게 소개하려고 합니다. 모바일 웹앱과 하이브리드 앱 현재 모바일 웹 페이지들을 보면 마치 앱처럼 동작하도록 구성하기도 합니다. 아이폰용 Web App 만들기에서 소개해 드린대로 파이낸셜 타임즈 처럼 HTML5로 앱처럼 구성하는 경우가 있습..

웹 사이트를 개발하다보면 통계나 각종 차트에 대해서 그래프를 출력해야 하는 경우가 있습니다. Flash나 Ajax를 이용해서 그래프를 출력할 수 있는 툴 들이 있어서 소개하도록 하겠습니다. 제가 직접 사용해 본 그래프 툴을 소개할 예정인데요. Fotographer INNO 님의 웹 디자인에 유용한 차트 & 그래프를 보니 정말 다양한 툴이 있는 것 같습니다. 좀 더 다양한 그래프를 보고 싶으신 분은 위 링크를 한번 방문해 보시기 바랍니다. Highcharts - Ajax로 모바일까지 지원하는 그래프 툴Highcharts는 Ajax로 되어 있는 그래프 툴로서 상용이 아닌 경우, 무료로 사용할 수 있구요. 상용 버전도 1개발자에 약 40만원 정도로 그리 비싸지 않습니다. 일단 Ajax로 구성되어 있어서 모바일..

가끔 색상에 대한 RGB 코드값이나 특정 RGB값이 무슨 색상인지 확인하고 싶을 때가 있습니다. 이를 제공하는 HTML Color Picker와 Chart가 있어서 제 홈페이지로 옮겨봤는데요. 아래를 참고하거나 Color 코드표를 클릭해서사용할 수 있습니다. 필요하신 분들은 유용하게 활용하시기 바랍니다.

요즘 글로벌 홈페이지들을 살펴보면 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 만을 사용할 뿐 해당 개념에 대해서는 파악하기가 어려운 면이 있는 것 같네요. 그래서 한번 내용을 정리해 보도록 하겠습니다. 실제 지구를 덮고 있는 지형의 모양을 지표면이라고 하는데요. 지표면은 당연히 울퉁불퉁한 형태로 구성되어 있습니다. 그래서 평균 해수면을 토대로 다시 지구를 그려 본 것을 지오이드라고 합니다. 이것도 지표면보다는 조금 낫지만 역시 복잡한 모양으로 이루어집니다. 그래서 지구의 모양에 잘 맞게 수학적인 타원체로 그려서 사용하게 됩니다. 하지만 이런 타원체가 나라마다 조금씩 다르게 구성되어 있습니다...