Rev. 2.73

윈도 비스타의 기본 서체인 "맑은 고딕"은 가독성이 높은 것으로 평가받고 있다. 윈도XP 사용자들 사이에서는 이 폰트를 손수 다운로드하여 설치하기도 하며, 웹 페이지의 기본 폰트로 지정하는 등 맑은 고딕 폰트의 인기는 식을 줄 모른다. 하지만 이 폰트는 윈도 XP를 사용하는 경우 ClearType모드를 활성화 하기 전에는 글씨가 흐릿하게 보여 오히려 가독성이 떨어진다. 그렇다고 방문객에게 일일이 ClearType모드를 활성화 하라고 알릴 수도 없는 노릇이다. 그래서 헤더에 아래와 같은 자바스크립트를 삽입하여 사용중인 운영체제를 분석하고 윈도XP 전용 스타일시트를 로드하는 꼼수를 생각하게 되었다.

// include file for stylesheets
var includeCSS = function(href) {
  document.write(
    '<link href="' + href + '" type="text/css" rel="stylesheet" media="screen" />'
  );
};

// detect Window XP
if (!!navigator.userAgent.match(/Windows\sNT\s5/)) {
  includeCSS('/stylesheets/winxp.css');
}
else
// detect Mobile Safari
if (!!navigator.userAgent.match(/Apple.*Mobile.*Safari/)) {
  includeCSS('/stylesheets/mobilesafari.css');
}

아래는 스타일시트의 내용이다.

.blackout {
  font-family: Tahoma, Gulim, Verdana, Sans-serif; padding: 2px 20px 1px 30px;
}
.article {
  font: 10pt/1.84 Tahoma, Gulim, Verdana, Sans-serif;
}

이 방법을 응용하면 위 문제처럼 환경별로 스타일시트를 로드함으로써 서로 다른 플랫폼의 특징에 최적화된 스타일링이 가능하다. 추가로 아이팟과 아이폰의 브라우저인 모바일 사파리용 스타일시트도 불러오도록 해 보았다.

Comments

attachment

Sebastian Brink씨는 Prototype 프레임웍과 다수의 자바스크립트 라이브러리들을 사용하여 쿨해 보이는 웹 갤러리 애플리케이션인 qGallery를 만들었다. 애플의 .Mac 웹 갤러리와 유사하게 디자인 된 qGallery는 앨범뷰, 그리드뷰, 캐러셀뷰 그리고 디테일뷰 총 4가지 이미지 조회방법을 제공하여 다량의 이미지를 체계적으로 관리할 수 있게한다. xml로 작성된 데이터를 Ajax로 처리하여 사진들을 디스플레이 하고 있다.

Comments