루키의 보석함

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

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

보통 웹 표준을 살펴보다 보면 대신에 을 사용하라는 이야기를 들어본 적이 있을 것입니다. 왜? 대신 을 사용해야 할까요? 실제 사용해보면 나 모두 동일하게 굵게 표시되기 때문에 큰 차이가 없어 보입니다. 그럼.. 먼저 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..

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

모바일 개발이나 각종 사이트를 처리할 때 HTML 페이지를 가져와서 분석하는 경우가 종종 있습니다. 보통 HTML 파싱할 때 정규식을 이용해서 했었는데요. 단점이 태그와 같은 것이 중첩되어 있을 경우, 첫번째 태그까지만 찾게 되는 것이었습니다. 아무래도 정규식 자체가 문자열 매칭이기 때문에 한계가 있는 것 같구요. 결국 DOM과 같은 구조를 사용하지 않으면 안될 것 같다는 생각이 들었습니다. 예전에 Javascript에서 쓸 수 있는 HTML Parser도 한번 소개한 적이 있기는 한데요. 오늘은 Java에서 활용할 수 있는 HTML Parser인 jsoup에 대해서 이야기 해보려고 합니다. jsoup: Java HTML Parserjsoup은 실제 사용하는 HTML을 처리할 수 있는 자바 라이브러리인데..

Proxy를 이용해서 HTML 소스를 가져와야 하는 경우가 있을 때 유용할 것 같습니다. 개발 세상만사님의 스프링노트에서 가져왔습니다. 나중을 위해 소스를 옮겨 봅니다. 중간에 "아이피", "포트"는 public proxy를 검색하셔서 지정해 주면 될 것 같네요. 단, Proxy는 확실히 속도가 느린 것 같습니다. 또한 Proxy 서버를 통할 경우, HTTP 프로토콜로 주고받은 데이터가 모두 Proxy 서버에 저장되므로 주의하셔야 합니다. package gathering; import java.io.BufferedReader; import java.io.InputStreamReader; import java.net.HttpURLConnection; import java.net.InetSocketAddre..

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

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

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

1. SiteMesh의 정의 SiteMesh(http://www.sitemesh.org/)는 웹 페이지의 레이아웃을 효율적으로 처리할 수 있도록 도와주는 프레임워크입니다. 쉽게 말해서 웹사이트의 동일한 상단, 하단, 메뉴 부분을 한곳에서 관리하고 각각의 페이지는 실제 내용만을 관리할 수 있도록 해줍니다. 즉, 상단/하단/메뉴와 같이 반복되는 부분이 각 페이지마다 들어가 있으면 추후 유지보수가 어렵기 때문에 SiteMesh와 같은 프레임워크를 사용하는 것이죠. 웹사이트를 제작하던 초기에는 iframe으로 나누어서 처리하기도 했었구요. SiteMesh 이전에는 include를 활용해서 이런 형태를 구현하기도 했었습니다. 그러나 iframe은 확장이 어렵고 지원하지 않는 브라우저도 많이 있었네요. 또한 inc..