어쩐지 뜸금없이 짠하고 나타난 Safari 4 Beta 1의 출현으로 무슨 새로운 기능들이 추가되었는지 관심을 모으고 있는 가운데, 우선 처음 설치하고 창을 열면 반기는 환영 영상 페이지가 인상적이다.
뜬금없는 궁금증에 페이지 소스를 살펴보니, 의외로 깔끔한 HTML 5의 Docktype이 눈에 들어온다. 찬찬히 살펴보면, 짧은 소개 영상 전체가 하나의 동영상이 아닌 CSS 3와 HTML 5 표준으로 이루어진, 그야말로 Safari 4가 새로 지원하기 시작한 신 웹 기술들이 서로 조화롭게 어울리며 뽐내고 있는 모습이다. 
여기에 사용된 모든 웹 기술들은 이번에 함께 문을 연 Safari DevCenter에서 자세하게 소개되어 있는데, 그 중 아래는 WebKit이 지원하는 CSS Reflections를 따라해 본 모습.
이제 막 꽃을 피우기 시작한 새로운 웹 기술들을 재빠르게 흡수해서 적용해주는 모습이 참 기특하긴 한데, 이런 추세가 다른 진영에도 전파되서 실제 웹 환경에 적용할 수 있는 시기가 빨리 찾아왔으면 하는 바램이다. 그건 그렇고, 왜 Squirrelfish라는 기존 JavaScript 엔진의 이름을 'Nitro'로 바꾼 이유는 몰까?
HTML 5의 최신 동향을 전해주는 WHATWG Blog의 "The Road to HTML 5" 연재글 중 최근에 올라온 글을 보면, HTML 문서의 character encoding 관련 새로운 <meta charset> attribute을 소개하고 있다.
현재 HTML 문서의 character encoding을 지정해 주는 META 선언 방법은 다음과 같은데,
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
여기에, 이놈보다 한 단계 더 위의 우선권을 갖게 되는 놈으로 다음과 같은 용법이 새로 추가되었단다.
<meta charset="UTF-8">
굳이 또 하나의 character encoding 관련 META 선언 용법을 추가한 이유는,
The rationale for the <meta charset=""> attribute combination is that UAs already implement it, because people tend to leave things unquoted, like:
<META HTTP-EQUIV=Content-Type CONTENT=text/html; charset=ISO-8859-1>
Andrew Sidwell씨의 설명
(이미 대부분의 브라우저들에서 <meta charset>이 이미 적용되어 사용 가능한 것을 실험해 볼 수 있다.)
이렇게라도, 또 하나의 포장된(?) 길을 열어두어서 보안상의 나쁜 불상사가 일어나지 않도록 미연에 방지하자는 건데, 아무래도 가장 속편한 방법은 서버에다 다음 한 줄의 깔끔히 마무리.
AddDefaultCharset utf-8
추가 참고 문서 – HTML 5 differences from HTML 4
많은 논란을 일으켰던 어제의 IE8 version targeting 사건으로 상당수 웹 개발자들에게 혼란과 걱정을 불러일으켰었으나, 하루가 지난 지금 뜻하지 않은 반가운 소식이 들리고 있다.
우연하게도, 바로 어제 W3C에 첫 Working Draft로 등재된 HTML5가 마침 구원의 손길을 보내온 것이다. 요는 HTML5 DOCTYPE을 쓰면, IE8을 포함한 모든 웹 브라우저들에서 어떤 쓸때없는 코드를 추가하지 않아도 가장 최신의 표준 랜더링 엔진을 사용하도록 할 수 있다는 것이다.
결국 다음 한 줄의 Doctype 선언이면, 예전처럼 브라우저 버전에 관계없이 웹 표준(CSS, HTML5, DOM, JavaScript)을 따르면서 미래를 대비하는 웹 사이트를 개발할 수 있게 된다는 것이다:
<!DOCTYPE HTML>
평상시 사용하는 Doctype 보다 무척 간단해 보이지만, 이것은 일부러 이렇게 간단하게 쓰일 수 있도록 의도된 바이다.
더 놀라운 것은, 현재의 모든 브라우저들(IE, FF, Safari, Opera)은 위의 Doctype을 보면 비록 HTML5을 아직 모두 다 구현하지는 않더라도 standards mode로 문서를 해석한다는 사실! 그래서, 약간의 무리는 따르겠지만, 지금 당장 문서에 적용할 수도 있단다.
골치 꽤 썩힐 뻔했던 version targeting으로부터 해방될 수 있으니 다행인 것은 사실이지만, 여전히 웹 표준을 따르며 제작된 현재의 웹 사이트들은 어떠한 수정 조치를 취하지 않는 한, IE8에서는 표준 모드로 해석되지 않는다는 것은 그래도 아쉬움으로 남을 수밖에 없다.
아무튼, 앞으로 HTML5가 가져올 흥미진진한 변화를 기대하며, 책갈피해 두었던 HTML5의 변화된 면모를 자세히 훑어볼 때이다.
웹 개발 과정에 있어서 웹 페이지 속 UI 동작을 구현하는데 필요한 기본적인 기능들을 모아놓은 JavaScript Library들이 제공되면서 개발자들의 손을 한 시름 덜어주게 되었고, 결국 남은 여력을 프로젝트에 더 집중하게 되면서 작업의 효율성을 증가시켜 주었듯이, 마찬가지로 웹 페이지의 기본 layout을 잡을 때 반복적으로 수행되던 CSS 작업에서도 빠른 작업 수행 속도를 붙여줄 수 있는 framework 형태의 여러 조력자들이 등장하고 있다.
개인적으로 JavaScript Library로는 jQuery를 그리고 CSS framework로는 blueprintcss를 주로 사용하게 되면서, 예전에 공개했던 HTML 문서 생성을 위한 TextMate용 snippet에도 작은 변화가 있었다.
여기에 그 바뀐 내용을 공개하면, 우선 아래는 HTML 4.01 Strict DocType을 위해 "page4" tab trigger로 지정된 HTML snippet이다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ko" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>${1:Title}</title>
${2:<link rel="stylesheet" href="${3:css/blueprint/}screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="$3print.css" type="text/css" media="print" />
}<style type="text/css" media="screen">
</style>
${4:<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
}<script type="text/javascript">
$0
</script>
</head>
<body id="${5:page}">
<div class="container">
<div class="column span-${6:24}">
<h1>${7:Header}</h1>
</div>
<div class="column span-${8:20}">
${9:Main content}
</div>
<div class="column span-${10:4} last">
${11:Right sidebar}
</div>
${12:<div class="column span-24">
${13:Footer}
</div>}
</div>
</body>
</html>
기본적으로 지정되어 있는 HTML 문서의 구조는, 오른쪽에 작은 sidebar가 위치한 보편적인 2 column 구조로 위 아래에 Header와 Footer가 위치하고 있다.
다음은 같은 구조를 가진 XHTML 1.0 Strict DocType 문서를 위한 HTML snippet. tab trigger로 "page"가 지정되어 있다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ${1:${2:xml:lang="ko"}${3: lang="ko"}} dir="ltr">
<head>
<meta http-equiv="Content-Type" content="${4:application/xhtml+xml}; charset=utf-8" />
<title>${5:Title}</title>
${6:<link rel="stylesheet" href="${7:css/blueprint/}screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="$7print.css" type="text/css" media="print" />
}<style type="text/css" media="screen">
</style>
${8:<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
}<script type="text/javascript">
$0
</script>
</head>
<body id="${9:page}">
<div class="container">
<div class="column span-${10:24}">
<h1>${11:Header}</h1>
</div>
<div class="column span-${12:20}">
${13:Main content}
</div>
<div class="column span-${14:4} last">
${15:Right sidebar}
</div>
${16:<div class="column span-24">
${17:Footer}
</div>}
</div>
</body>
</html>
간단한 것이지만, 손놀림을 덜 수 있는 또 하나의 꼼수다.
날로 웹 어플리케이션의 UI가 복잡해지고 JavaScript를 이용해서 사용자와 웹 어플리케이션 간의 상호작용에 따른 특정 객체에 대한 접근과 조작이 점점 더 유행을 타게 되면서, 웹 브라우저의 창 속에 존재하는 어떤 한 객체의 정확한 크기와 위치 좌표 값을 얻는 일은 무척이나 중요해졌다. 하지만, 객체의 위치를 재는 방법과 그 속성은 헷갈릴 만큼이나 다양하고, 불행히도 웹 브라우저들 마다 같은 속성도 서로 다른 크기를 돌려준다. 그래서 여기에 DOM에 존재하는 한 객체의 크기와 자신의 위치를 나타내는 여러 속성 값들을 정리하고, 그림으로 나타내 보았다.
글 마저 읽기 »