ILMOL.COM

최근 마이크로소프트쪽에서 제안한 버전 지정 Version Targeting 때문에 표준 커뮤니티가 후끈 거리고 있습니다. 하지만 IE 이기 때문에 라는 색안경이 큰 역할을 하고 있는듯 한데요. 이 움직임의 시발점이된 Aaron Gustafson 의 “Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8” 이라는 글입니다. A List Apart에 소개되었죠. 이제 어느정도 자리를 잡혀가는 한국의 표준 커뮤니티에도 제대로된 토론과 이해가 있었으면 하는 바램으로 번역해서 올립니다.

Translated with the permission of A List Apart Magazine and the author[s].
이하의 글은 A List Apart Magazine과 저자의 허락아래 번역되었습니다.

“Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8″

성장은 언제나 진통이 따른다. 브라우저도 개발자들이 특정 브라우저나 툴에 맞추게 되면 유저들이 진통을 격게된다. 새로운 브라우저 버전들이 공개되고 몇개의 버그들이나 스팩의 약간의 변화에 사이트들은 깨지게 되고 상사나 유저들이 실망하게 되는 것이다.

몇시간을 들여 왜 사이트가 깨졌는지 설명할수 있겠지만 아예 처음부터 깨지지 않는다면 더 낫지 않겠는가?

약간의 배경

CSS의 상당한 업글을 보여주었던 IE7 의 공개에 힘입어 IE팀은 완전히 새로운 렌더링을 탑제한 IE8(CSS2.1 을 최대한 따른) 개발을 시작했다. 그리고 Acid2 렌더링 테스트를 완벽하게 통과하는 기염을 토해내었다. 이것은 IE가 곧 generated content 와 data URL 을 지원한다는 것 뿐만이 아니라 hasLayout 이 완전히 사라진다는 것을 의미한다. Acid2 를 통과한 사파리나 iCab, Konqueror 그리고 오페라와 렌더링에 있어서 동격을 이룬다고 할수 있다. (Firefox3는 Acid2를 통과했지만 아직 출시되지 않았다.)

이번 새 엔진을 개발하는 동안 IE팀은 IE7 을 공개하면서 받은 여러 비판을 잊지 않았다. 몇몇 표준 구루들과 Microsoft의 몇몇 팬들까지도 IE7 이 버그나 CSS 지원에 있어서 충분하지 못했다고 생각했었고 상당수의 개발자들은 IE7 에서 깨지는 사이트들을 바라보며 불신에 속삭였다. 이에 Roger Johanssen은 자신의 블로그에 IE가 깨지는 3가지의 이유를 나열했지만 IE팀은 4번째 이유까지 발견했다. CSS 레이아웃을 가능케 하는 중요 부분인 Doctype 이 호환성을 지키기 위해서 너무나 부족함을 말이다.
(계속 읽기…)

프린트 스타일을 지정하는건 그리 어렵지 않습니다 (너무 쉽다고 생각했는지 이야기 한적이 없군요 ㅠㅠ). 아시다시피 타겟으로 media=”print” 를 지정해 주면 어렵지 않게 인쇄 시에 출력될 프레젠테이션에 스타일을 바꿀수 있습니다. print.css 경로를 제대로 잡아주시는것 아주 중요합니다.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

<!-- 혹은 -->
<style type="text/css" media="print">
   @import "print.css";
</style>

<!-- 혹은 -->
@media print {
   /*직접코드 입력 */
}

display:none;

프린트 스타일시트 제작시에는 Law of Elimination, 즉 불필요한 정보 제거 작업부터 시작 하시는 것이 좋습니다. 불필요한 요소들을 먼저 살펴보시고 {display:none;} 에다가 하나씩 더해갑니다. 보편적으로 메뉴부분, 사이드바 부분, 인풋 박스, 광고 등이 해당되겠습니다. 일모리네를 예로 들자면 사이드바, 메뉴, 코멘트부분 알림 해더 등등을 지워버렸습니다.

#sidebar, #menu, #header_special, 
.permlink, .ttag, .ad, 
#commentinputs, #commentwrap h2, 
.comment {display:none;}

배경과 폰트 지정

대충 지우신 후에 기본적인 배경과 폰트지정 으로 넘어갑니다. 폰트 사이즈는 프린트를 위한 pt (point) 단위로 잡으시고 9에서 12 사이로 잡아주시면 되겠습니다. 저는 9pt 로 잡았습니다. 그리고 배경은 transparent 이 default 이지만 혹시나 어딘가에 껴 들어가는것을 미리 방지하는 차원에서 transparent으로 잡아주면 좋겠죠. body의 배경을 흰색으로 잡아주면 마무리 되겠습니다. 또한 브라우저에게 해더 사이즈를 맡겨 놓으면 상당히 크고 낭비가 심하니 직접 h1, h2, h3 사이즈를 잡아주는 것도 좋은 방법입니다. 아시다시피 해더들은 기본적으로 굵게 bold 출력됩니다.

body {font: 9pt/1.5 sans-serif;background: white; color: black;}
/* 참고로 9pt/1.5 는 9pt 폰트사이즈에 line-height 
   줄간격을 1.5배로 하라는 것이 되겠습니다. */

h1 {font-size: 18pt;}
h2 {font-size: 15pt;}
h3 {font-size: 11pt;}

#content {background: transprent;}

글을 글답게 세밀하게

위의 부분만 하셔도 어느정도 문서 분위기가 나겠지만 (ie6 포함) 약간만 더 손을 본다면 더할 나위 없는 프린트 지정이 될수 있습니다. 먼저 링크 부분을 손보겠습니다. 기본색인 파란색도 좋지만 흑백 프린트시에는 별 효과가 없으니 밑줄을 주어 링크를 표기할수 있습니다. 간단히 a {color: black; text-decoration: underline;} 을 주면 되겠습니다. 하지만 밑줄이 혼란스럽다면 밑줄 대신 링크뒤에 주소를 삽입하는 방법을 택하셔도 됩니다. 오래전에 Eric Meyer 가 나누었던 방법입니다.

#content a:link:after, #content a:visited:after {
   content: " (" attr(href) ") ";
   font-size: 90%;
   }

브라우저가 지원만 한다면 (사파리가 아주 잘보이는 군요) #content 안에 있는 링크 뒤에 주소를 출력 하도록 하게 합니다. 하지만 #content 안의 글 제목에도 링크가 붙게되니 글 자체의 블록엘리먼트를 지정해 주어서 글 안의 링크에만 출력되도럭 하는 것이 좋은 방법이겠습니다. 일모리네는 .writing 부분이겠네요. 이러한 방법으로 링크를 지정해 주면 인쇄물이지만 웹주소를 찾아갈수 있는 장점이 있겠습니다.

링크에 스타일을 주었으니 문단에도 스타일을 지정해 보겠습니다. 문단 시작시에 들어짜기, 움푹 들어간 부분의 indentation 을 주어 문단 시작을 표현할수 있습니다. text-indent: 값; 의 형식을 사용하면 되겠네요. 또한 인쇄는 페이지라는 테두리가 있기에 문단이 페이지의 마지막 부분일때에 한줄만 출력되고 다음 페이지로 넘어가는 경우가 있을수 있습니다. 이 때에 orphans를 지정해 주면 orphans 에 지정된 값 데로 문단의 최소 출력이 지정됩니다.

p {text-indent: 13pt; orphans: 3;}

마지막으로 전체적인 여백의 문제나 간격등을 조절해 주면 되겠습니다. content에 margin 값을 준다거나 문단간의 간격 조절등이 되겠네요.

일모리네 print.css 입니다.

body {font: 9pt/1.5 sans-serif;background: white; color: black;}

.left {float:left;}
.picL{float:left;}
.right {float:right;}
.border1 {border: 1px solid #000;}

a {color: black; text-decoration:none;}

h1 {font-size: 18pt;}
h2 {font-size: 15pt;}
h3 {font-size: 11pt;}
p {text-indent: 15pt; orphans: 3;}

#sidebar, #menu, #header_special, .permlink, .ttag, .ad, 
#commentinputs, #commentwrap h2, .comment {display:none;}

#content {width: auto;}
.posttitle {float:left;}
.postdate {float:right;}
.writing {clear:both;}
.writing a {text-decoration: underline;}
h1 a:link:after, h1 a:visited:after, 
.writing a:link:after, .writing a:visited:after {
   content: " (" attr(href) ") ";
   font-size: 90%;
   }
#commentwrap p {text-indent:0;}

즐거운 한주를 보내고 계신가요!? 얼뚱, 쌩뚱. 광복절이라고 태극기 달아봤습니다. 참 어색합니다. 364일 놀다가 하루를… 그래도 하루만이래도 좋은 날로 기념해야겠네요.

P.S. 조용히 진행되고 있는 HTML5 의 인쇄버전을 PDF 로 출력했습니다.

7월 19일, CSS 2.1이 Candidate Recommendation 으로 승급 되었습니다. But, 별 느낌 없습니다. W3C 무기력증에 걸린 일모립니다. 비실비실… 2.1로 찔러도 느낌이 없습니다. 하.하.하.

권고안 (Recommendation)이 되기까지 Proposed Recommendation 이 남아있습니다.

W3C is pleased to announce the advancement of “Cascading Style Sheets (CSS) 2.1″ to Candidate Recommendation. Implementation feedback is welcome through 20 December. CSS is one of the Web’s most widely implemented languages. By separating the presentation of style from the content of documents, CSS simplifies Web authoring and site maintenance. CSS 2.1 is derived from and is intended to replace CSS Level 2. A snapshot of usage, the specification brings the language in line with implementations, fixes errata and adds a few highly requested features including the inline-block value for the display property, the color orange and the values pre-wrap and pre-line for the white-space property. Visit the CSS home page. - W3C

요약. CSS2.1이 CR이 되었으니 기쁘다 - W3C

XStandard 2.0 이나 건드려 봐야겠네요.

POSH. Plain Old Semantic HTML.

저도 POSH 를 추구합니다. I LOVE POSH.

CSS off 콘테스트는 웹사이트에서 당일날 .psd 포토샵파일을 받아 24시간안에 웹표준을 준수하여 마크업 의미를 최대한 살린 1등 html/css 제작자에게 적은 액수지만 $30(기부할경우 $50) 를 상금으로 주는 행사입니다. 앞으로 계획은 한달에 한번 이라고 하네요. html, css (js 가능) 그리고 이미지 파일과 그외(설명파일?)를 zip으로 압축하여 24시간이 지나기 전에 cssoff@gmail.com 이메일로 보내시면 됩니다.

이번 2007년 6월1일이 첫 콘테스트 날입니다. CST 로 정오 12PM 이라고 했으니 한국 시간으로 6월2일 새벽 2AM 이 되겠군요.

시간이 허락하신다면 모두 참가하여 좋은 결과 있으시면 좋겠습니다.

저 참가합니다. :)

CSS 마스터 전략(CSS Mastery)의 저자 Andy Budd 의 블로그에 올라온 CSS2.2 라는 글이 여러 디자이너들과 ‘퍼블리셔’ 들 사이에 불을 지피고 있군요.

Andy Budd는 CSS 의 빠른 성장을 소개하며 CSS3 또한 그러하리라 생각되었었다고 소개 하며 왜 지체되었는가의 글을 시작합니다.

First proposed by Hakon Lie in Oct 1994, CSS1 became one of the first W3C recommendations in Dec 1996. Nipping at its heals, CSS2 became an official recommendation in May 1998, just 18 months later. By June 1999 the first 3 draft modules of CSS3 had been published, and in their ground breaking book published that same year, Bert Bos and Hakon Lie postulated that CSS3 would arrive sometime in late 1999.
Over 7 years later, and we’re still waiting. This begs the question, what went wrong?

요약: Hakon Lie 에 의해 1994년에 제안되어 2년후인 1996년에 W3C의 첫 권고안들중 하나가 된 CSS1 은 다시 2년후에 CSS2 권고안으로 나오게 되었고 18개월 후에는 CSS3의 첫 3개의 드래프트 모듈이 완성되어 Bert Bos 와 Hakon Lie 는 1999년 말 즈음 CSS3 권고안이 나올꺼라 예상했습니다.
7년이상 지난 지금 아직도 기다리고 있습니다. 무엇이 잘못된 것일까요?

이러한 궁금증으로 그는 CSS3 개발의 문제와 이유등을 이해하려 노력했고 어느정도의 답을 얻은듯 여러 문제점을 제기하며 설명하고 있습니다.
(계속 읽기…)