루키의 보석함

웹 표준으로 개발하면서 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를 활용한 예제는 모든 언어에서 이용 가능합니다. 왜냐하면 자바스크립트 자체가 대부분의 언어에서 지원하..

보통 웹 표준을 살펴보다 보면 대신에 을 사용하라는 이야기를 들어본 적이 있을 것입니다. 왜? 대신 을 사용해야 할까요? 실제 사용해보면 나 모두 동일하게 굵게 표시되기 때문에 큰 차이가 없어 보입니다. 그럼.. 먼저 W3C에서 과 태그를 설명하는 부분을 살펴 보시죠. EM and STRONG are used to indicate emphasis. The other phrase elements have particular significance in technical documents. These examples illustrate some of the phrase elements: Please refer to the following reference number in future corresponde..

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

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

웹 표준으로 넘어가면서 테이블 태그는 구닥다리이고 더 이상 사용하지 않는 것이 좋다는 이야기를 많이합니다. 실제로 테이블로 굳이 사용하지 않아도 되는 것까지 테이블 태그를 쓰는 경우가 많았기 때문이라고 생각합니다. 하지만 테이블 구조를 가지고 있는 경우에는 태그를 쓰는 것보다 태그를 그대로 사용하는 것이 훨씬 바람직합니다. 즉, 달력, 차트, 스케줄, 통계와 같은 형식은 테이블을 쓰는 것이 좋겠지요. 그러나 테이블 태그를 사용할 때는 좀 더 명확하게 하는 것이 필요합니다. 오늘은 태그에 대해서 한번 정리해 보려고 합니다. 태그의 올바른 사용 예제로 요즘 한참 인기몰이중인 프로야구의 팀 순위를 가지고 테이블을 만들어 보도록 하죠. 프로야구 팀 순위 순위 팀 승-패-무 승률 1 SK 27-21-1 0.563..

HTML에서 문서 제목 부분은 어떻게 쓸까? HTML 문서도 일반 문서처럼 제목, 소제목 들을 사용하는 경우가 많이 있습니다. 이때 여러분은 어떤 태그를 많이 사용하는지요? 아마도 대부분은 다음과 같은 형태를 많이 사용할 것 같습니다. 미니의 프로그래밍 이야기 여기에 태그는 사용하지 않는게 좋다고 하니 CSS의 style을 적용해서 폰트 크기를 키우기도 하겠죠.. 미니의 프로그래밍 이야기 원하는 크기대로 나오고 괜찮은 것 같다고 생각합니다. 그러나 이렇게 작성하면 HTML 태그의 기본 속성인 의미 전달이 안됩니다. 즉, 위 부분만 보고서 문서의 제목이라고 판단하기는 쉽지 않기 때문이죠.. (주로 누가 문서만 보고 판단을 할까요? 한번 생각해 보세요 ^^) 그래서 태그를 한번 사용해 봅니다. CSS의 cl..

리스트 태그는 언제 사용할까?제 블로그에 있는 분류 목록을 화면에 출력한다고 생각해 보죠. 가장 간단한 방법은 다음과 같이 태그를 사용하는 것입니다. Beginner XML Developer 프로젝트관리론 컴퓨터공학 프로그래밍 리뷰 미니이야기 원하는대로 리스트 형태로 출력되기는 합니다. 그러나 이런 코딩에서 문제점은 무엇일까요? 이 리스트에 스타일을 변경시킨다면 즉, 색상을 바꾸거나 글꼴이나 크기를 변경할 경우, 현재 상태에서는 각각의 라인에 태그를 적용하는 방법이나 각각 태그를 넣고 CSS의 class로 스타일을 적용하는 방법 뿐으로 보입니다. 이런 경우에 바로 리스트 태그를 사용해야 합니다. 위와 같은 경우는 순서가 중요하지 않기 때문에 태그로 감싼 태그를 사용하면 되겠죠. 그럼 리스트 태그에 대해서..

시작하면서현재 IT 프로그래밍을 보면 정말 배워야 할 것이 너무 많은 것 같습니다. Java 분야만 해도 JSP, Java, Struts, Spring, Hibernate, SiteMesh, iBatis, Google App Engine, Hadoop, NoSQL 등등.. 정말 나열해 보니 끝도 없네요. 아마 요즘 시대에 프로그래밍을 시작했다면 막막했을지도 모르겠습니다. 학교에서 강의를 하면서 항상 기본부터 시작하라고 이야기를 많이 합니다. 그래서 저도 최근 이슈들을 하나씩 정리하려구 하고요. 그 첫번째로 웹 표준부터 시작하려고 합니다. 90년대 후반 처음 웹 프로그래밍을 시작할 때, HTML 태그를 배웠던 기억이 납니다. 태그로 글꼴의 크기나 색상을 이쁘게 하고 으로 구조를 잡기도 하고, 태그 정도 쓰..

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