XHTML & HTML 문서에서의 언어 지정

HTML, Notes, Web Standards 댓글이 없음 »

W3C의 Internationalization Core Working Group에서 Internationalization Best Practices: Specifying Language in XHTML & HTML Content라는 제목의 문서를 새로 갱신해서 올려놓았다.

이 문서는 HTML 문서 내용을 다루는 저자나 프로그램 개발자들에게 세계 각국 언어에 맞는 현지화를 위한 일종의 안내서로 사용될 수 있도록 관련 권고 사항들을 전해주고 있다.
문서 내용을 요약하면 먼저 HTML 문서에 사용 언어를 선언할 때 주의할 사항으로 character encoding과 글이 읽히는 방향(direction of text)을 언어 선언과 혼동해서 쓰지 말라고 경고하고 있다. Character encoding 값과 사용 언어는 일대일로 바로 적용될 수가 없는데, 그 이유로 어떤 하나의 인코딩 값이 여러 다양한 언어를 대표할 수도 있기 때문이다. 글이 읽히는 방향도 한 언어 안에서 문서 내의 문맥에 따라 서로 다른 방향으로 읽히고 해석되어야 할 필요가 생길 수도 있고, 대표 언어를 선언하는 것만으로는 이런 상황을 제대로 표현해 줄 수가 없게 된다.

위 문서에는 웹 브라우저나 화면 해독기와 같은 user agents가 문서에 쓰인 언어를 올바로 해석할 수 있게 하려고 (X)HTML 문서 안에 사용 언어를 선언해 주는 대표적 방법들을 다음과 같이 소개하고 있다.

첫 번째 방법으로는 XHTML 요소에 lang과 xml:lang 속성을 사용하는 방법으로, 문서 전체의 언어를 지정할 땐 html 태그에 정의해 준다. 물론 문서 안에 포함된 특정 요소에 다른 언어가 사용되었을 땐 해당 요소에 따로 적당한 언어 속성을 지정해 줄 수도 있다.

<!-- 보기 1: text/html mime type으로 전달되는 XHTML 1.0 문서 안에 언어 속성을 사용해서 선언해 준 예.-->
<html lang="ko" xml:lang="ko" xmlns= "http://www.w3.org/1999/xhtml">

여기서 주의할 것은, HTML일 경우 lang 속성만 사용되며, XML로 전달되는 XHTML의 경우에는 xml:lang 속성만 사용한다.

두 번째 방법은 아래처럼 meta 요소의 http-equiv를 Content-Language로 지정해 주는 방법이 있다.

<!-- 보기 2: meta 요소의 Content-Language 선언. -->
<meta http-equiv="Content-Language" content="ko" />

여기서 문서에 사용된 언어와 의도된 독자의 사용 언어가 여럿일 경우 각 언어를 모두 나열해 줄 수도 있지만, 문서의 언어 해석을 위한 용도로는 적절치 않거니와 아직 이곳에 지정된 정보의 이용 상황은 극히 낮은 수준이다.

마지막으로, 언어 해석 정보는 문서와 함께 전달되는 HTTP header에서도 얻을 수 있는데, 이것도 대부분의 웹 브라우저들은 문서의 올바른 언어 해석을 위해서 이 곳의 정보를 참고하지는 않고 있다.

결과적으로, 지금까지는 첫 번째로 소개된 html 언어 속성을 이용한 방법이 HTML 문서의 언어 해석을 위해 가장 일관성 있고 효과적인 방법이라 할 수 있다.

추가 참고 문서: W3C I18N FAQ: Why use the language attribute?

꼬리표:

하루 동안만 발가벗자!

CSS, Web Standards 댓글이 없음 »

웹 표준을 준수하고 순차적으로 잘 정렬되어 있는 의미론적 마크업의 사용 그리고 표현과 동작의 분리에서 오는 잇점을 알리기 위해 올해 두 번째로 열리는 CSS Naked Day를 맞이하여, 이곳 블로그만이라도 4월 5일 하루 동안 발가벗겨 놓을 예정이다.

CSS Naked Day 2007

CSS를 걷어낸 적나라한 <body>의 속살을 드러내 놓고서 하루 동안 따스한 봄 햇살을 맞이할 준비는 마쳤지만, 어딜 가든 겉모습보단 벗겨놓고 감상해야만 직성이 풀리는 버릇은 계속되겠지. :mrgreen:

꼬리표:

자주 쓰이는 정규식(Regular Expression) 유형

Notes, Web Development 3개의 댓글 »

아래는 어느 프로그래밍 언어에서든 아주 유용하게 쓰일 수 있는 정규 표현식 유형들(Reqular Expression Patterns)을 모아봤다.

// 전자우편 주소: 
/^[a-z0-9_+.-]+@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/
 
// URL: 
/^(file|gopher|news|nntp|telnet|https?|ftps?|sftp):\/\/([a-z0-9-]+\.)+[a-z0-9]{2,4}.*$/
 
// HTML 태그 - HTML tags: 
/\<(\/?[^\>]+)\>/
 
// 전화 번호 - 예, 123-123-2344 혹은 123-1234-1234: 
/(\d{3}).*(\d{3}).*(\d{4})/
 
// 날짜 - 예, 3/28/2007 혹은 3/28/07: 
/^\d{1,2}\/\d{1,2}\/\d{2,4}$/
 
// jpg, gif 또는 png 확장자를 가진 그림 파일명: 
/([^\s]+(?=\.(jpg|gif|png))\.\2)/
 
// 1부터 50 사이의 번호 - 1과 50 포함: 
/^[1-9]{1}$|^[1-4]{1}[0-9]{1}$|^50$/
 
// 16 진수로 된 색깔 번호: 
/#?([A-Fa-f0-9]){3}(([A-Fa-f0-9]){3})?/
 
// 적어도 소문자 하나, 대문자 하나, 숫자 하나가 포함되어 있는 문자열(8글자 이상 15글자 이하) - 올바른 암호 형식을 확인할 때 사용될 수 있음: 
/(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,15}/

정규식과 관련해서, 완성된 정규식 유형을 특정 예문을 놓고 제대로 된 것인지 바로 확인해 보고 싶을 때는 Mac OS X 용 어플리케이션으로 Reggy가 쓸만하고, 또 위젯 형태의 Regex Widget라는 놈과 Firefox Extension인 Regular Expressions Tester도 있다. 물론 자주 사용되는 정규식 유형의 경우 이미 다른 사람들이 쓰고 있는 것이 있을 테니 Regular Expression Library에 공개되어 있는 것 중에서 알맞은 것을 찾아볼 수도 있을 것이다.

다음은 쓸만한 온라인 정규식 테스트 도구:

꼬리표:

JavaScript Objects의 두 가지 유형 판별 방법

JavaScript, Notes 댓글이 없음 »

JavaScript에서 사용되는 변수들이 가리키는 객체의 유형은 항상 유동적으로 변할 수 있기 때문에 변수에 담겨있는 객체(Objects)의 유형을 검사(type checking)하는 일은 자주 있으며 그 방법에는 두 가지가 있다.

첫 번째 방법은 typeof 연산자를 사용하는 방법. 이것은 변수에 담겨있는 객체의 유형을 String 값으로 돌려준다.

// Check to see if our number is actually a string 
if ( typeof num  == "string" )
  // If it is, then parse a number out of it 
  num = parseInt( num );
 
// Check to see if our array is actually a string 
if ( typeof arr == "string" )
  // If that's the case, make an array, splitting on commas 
  arr = arr.split(",");

하지만, 이 방법은 Object와 Arrary 혹은 맞춤 Object를 구분하지 못하고 그냥 “object”로 인식하기 때문에 이것을 구별하려면 모든 JavaScript Object들이 가지고 있는 constructor 속성을 확인하면 된다.

var obj = { an: "object" };
var arr = [ an, arrary ];
var myObj = new MyObject();
 
if ( obj.constructor == Object ) alert('This is an object!');
if ( arr.constructor == Array ) alert('This is an array!');
if ( myObj.constructor == MyObject ) alert('My holy object!');
꼬리표:

올바른 웹 활자 표현을 위한 HTML entities

HTML, Notes, Quotes, Web Development 댓글이 없음 »

아래는 웹 문서에서 많이 쓰이는 대표적인 활자들과 그들의 올바른 HTML entities 표기이다.

  • “ 큰 시작 따옴표 &#8220;
  • ” 큰 마침 따옴표 &#8221;
  • ‘ 작은 시작 따옴표 &#8216;
  • ’ 작은 마침 따옴표 &#8217;
  • – 반각 대시 기호(en dash) &#8211;
  • — 전각 대시 기호(em dash) &#8212;
  • − 빼기 &#8722;
  • × 곱하기 &times;
  • … 말 줄임표 &#8230;

웹에서의 활자 표시는 종이 인쇄 역사 보다 훨씬 짧은 이유로 제대로 된 활자를 표현하는 데는 비교적 더 많은 제약을 받지만, 그것이 불가능한 것도 아니고 단지 아직 잘 알려지지 않았을 뿐이다.
(여기서는 WordPress의 콩나물 따옴표 문제로 설치했던 Unfancy Quote Plugin 때문에 따옴표들이 밋밋하게 표시된다.)

참고 글:

꼬리표: