사파리 블로그에 이미 소개 되었는지라 많은 분들이 아실지도 모르지만 CSS Animation 이라 불리우는 역동적인 CSS 부분들이 이번 3.1에 첨가되었고 그 중에서도 Transition (전환) 에 관한 것들이 구현 가능케 되었습니다. [이하의 모든 예제들은 사파리 3.1이 설치되어 있어야 확인하실수 있습니다.]

transition-property - 어떠한 전환 속성을 작동시킬 것인지 지정 예: opacity
transition-duration - 얼마동안 이 속성이 지속될것인지 지정ow long the transition should last.
transition-timing-function - 어떠한 종류의 타이밍을 갖을것인지 지정. 예: linear vs. ease-in vs. a custom cubic bezier function
transition - 물론 한번에 지정가능한 속성도 제공하는군요.

위의 div 에 마우스를 가져다 대시면 천천히 div 가 사라지는 효과를 확인하실수 있습니다. 이는 div 에다
div {opacity: 1; -webkit-transition: opacity 1s ease-in; }
값을 정해준 후 hover 시에 opcity 가 0으로 되도록 지정된 결과 입니다.
div:hover {opacity: 0;}

이 외에도 여러가지 효과를 줄수 있는데 간단한 transition 속성으로 많은 이득을 볼수 있습니다.

실무적으로야 아직 쓰이지는 못하겠지만 여러가지 생각해 볼수 있는 부분인거 같네요. 이번에 Torrey Rice가 이 CSS Animation 기능을 활용해서 SVG 와 함께 멋진 동작 예제를 구현해 놓았습니다. 설명을 곁들여서 보시면 이해가 더 쉬우실 겁니다.

아시다시피 CSS3의 계획이 계속 지연되면서 몇몇 브라우저들 사이에서 multi background image나 text shadow 등등이 자체적으로 지원되고 있는 실정입니다만 이러한 불완전함을 핑계로 인터넷익스플로러 팀이 자체 CSS 개발을 이루겠다는 야심을 보인 것입니다. 일단은 CSS3-IE 로 부르고 있고 이 스타일시트가 초안으로 들어갈때 즈음에 IE9 베타가 출시될 것으로 보입니다.

많은 개발자들과 디자이너들의 한숨이 여기저기서 튀어 나오고 있는데요.

마이크로소프트의 인터넷익스플로러 팀이 CSS3-IE를 개발하려 한다는 것은 일모리의 조작된 만우절 논리일 뿐이다. - 빌게인츠

CSS3-IE 개발을 과연 누가 믿겠느냔 말이다. 그저 4월1일의 장난일 뿐이다. - 젤든맨

이러한 논란들로 CSS3-IE 의 개발을 무시하고 있습니다. 저 또한 강력히 동의하고 있는 부분이구요. 여러분들도 동의 하시리라 생각됩니다.

너무나도 낚이신분들이 많을꺼 같아 두려움의 한숨만 나올 뿐입니다…

죄송합니다.

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 개발의 문제와 이유등을 이해하려 노력했고 어느정도의 답을 얻은듯 여러 문제점을 제기하며 설명하고 있습니다.

일단 많은 부분이 호환성이나 버그 등등의 기술적인 부분이며 또한 정치적인 부분도 없잖아 있다고 소개하고 있습니다. 여러 회사들이 자신의 일정과 계획에 맞추려는 부분이나 여러 반복되는 옛 이슈들도 있으며 지역화 부분에서도 상당한 어려움을 격고 있다고 합니다. 이러한 여러 부분들에서 지체되다 보니 시간적인 환경의 변화도 생겨나고 어려움이 이만저만 아닌듯 싶군요.

W3C has bitten off more than it can chew, and this is having a negative effect on the web.
W3C는 역량 이상을 추구하며 웹에 좋지않은 영향을 주고 있습니다

미래의 완벽함을 추구하다 보니 현재를 잊은듯 하다면서 웹의 기술이 매순간 발전하고 있는 지금 ‘둥근 모서리’ 구현조차 언어로 표현할수 없으니 하루하루 변하는 웹에서 실제적인 필요를 충족해 주는 것이 좋지 않을까 라는 제안을 합니다.

I’ve been thinking about this for a while, and wonder if we need an interim step. If CSS3 is as big and complicated as the development timeline suggests, maybe we need something simpler? Something that gives us designers and developers the tools we need today, and not the tools we need in five or ten years. Maybe we should take all of the immediately useful parts of CSS3 such as multiple background images, border radius and multi-column layout. Maybe we should take all the CSS3 properties, value and selectors currently supported by the likes Safari, Opera and Firefox. Maybe we should take all of this information and build a simpler, interim specification we can start using now. Maybe, just maybe, it’s time for CSS2.2?

요약: 혹시나 우리에겐 작은 스탭이 필요한건지도 모르겠습니다. CSS3 가 만약 상당한 시간이 걸린다면 우리에겐 좀더 간략한 것이 필요한게 아닐까요? 지금 유용하게 사용될수 있는 다중배경이미지나 둥근테두리, multi-column 등의 현재의 개발자와 디자이너들에게 필요한 것들을 쓰는건 어떨까요. 아니면 현재 브라우저에서 지원되고 있는 여러 CSS3 속성들을 사용하게 하는것은 어떨지. 이 모든 정보를 고려하여 지금 쓸수 있는 더 간편한 소단계의 specification 을 내놓는건 어떨까요? CSS2.2 정도?

크게 공감을 느끼는 부분은 정말 그 큰 물고기를 잡으려다 너무 지체되어 후엔 쓸모없는 CSS 가 되지 않을까 하는 우려 입니다. DOCUMENTATION, SEO 등을 앞세워 텍스트 지향적인 부분으로 아직까지 단순한 언어를 붙잡고 있지만 저멀리 앞에 가고 있는 FLASH 를 바라볼때에 정말 언젠가는 결단을 내려야 할 순간이 곧 오지 않을까 라는 생각이 듭니다. 더욱 다양해지는 필요와 사용, 그리고 무궁무진한 가능성을 제공하는 하드웨어들, OS, 프로그램들이 즐비하는 가운데 너무 긴 지체는 ‘웹에 아주 좋지않은 영향’ 이라는 말이 맞다고 생각합니다. XHTML2 만 봐도 그렇습니다. 곧 소개하려 하지만 너무나 많은 지체와 큰 스탭에 HTML5 라는 스팩이 오히려 큰 지지를 받고 있는게 현실입니다.

언제나처럼 의견 부탁드립니다.

CSS3 이야기를 잠깐 하자면 아직도 권고안 마련에 한창입니다. 속도가 느린만큼 한창이라는 말이 어울릴지 모르지만 여러 모듈이 꾸준히 각각의 페이스에 맞춰서 개발중에 있습니다. 아직까지는 확정된 recommendation 이 나오지 않은 상태이며 과연 제대로 가고 있기는 한건지 걱정이 앞서네요.

text-overflow

소개해드릴 text-overflow 는 그 단어 뜻대로 text 가 overflow, 즉 넘칠때의 취하는 엑션을 담당하게 됩니다. overflow 속성이 값을 가지고 있을때, 예를들어 overflow: hidden; 등일때 text-overflow 가 적용이 가능케 됩니다. 블락엘리먼트에 모두 적용 가능합니다.

overflow 는 단순히 글자가 엘리먼트의 크기에 영향을 주지 않도록 예방하는 정도였다면 text overflow는 보이는 텍스트 이상의 글이 들어있음을 알리는 기능입니다. 엘리먼트 크기 이상의 글이 있다면 뒤에 “…” 으로 표기되는 식이죠.

text-overflow-mode

text 가 엘리먼트 보다 많을때 이하의 값을 정해줄수 있습니다.

clip, ellipsis, ellipsis-word, inherit

clip 은 단순히 엘리먼트 테두리에서 글자가 잘리는 것이고
ellipsis 는 테두리에 닿을 정도가 되면 ‘text-overflow-ellipsis’ 속성에서 정해준 string 이 표기가 됩니다. 기본값은 “…” 이구요.
ellipsis-word 는 위의 ellipsis와 비슷하지만 테두리에 닿을 정도가 되면 아무곳에서나 자르는것이 아니라 마지막 단어에서 자르게 됩니다. 예제에서 좀더 명확하게 설명하겠습니다.

text-overflow-ellipsis

text-overflow-mode 의 값이 ellipsis 일때 들어갈 string 을 정해줍니다. url 을 지정해 줄수도 있으므로 이미지를 삽입할수도 있겠죠. 대신 string 이 들어갈때는 엘리먼트의 폰트크기와 같습니다.

<ellipsis-end> uri, <ellipsis-after> uri, inherit
세가지 값을 갖습니다. 말씀드린데로 uri 는 이미지의 경로를 나타냅니다.
<ellipsis-end> 는 각각의 line 이 잘릴때 들어가는 string 을 지정합니다.
<ellipsis-after> 는 text 가 잘릴때 들어가는 string 을 지정하며 ellipsis-end 와 ellipsis-after 가 같은곳에 표기되게 될 경우 ellipsis-after만 표기됩니다.

text-overflow

단축된 속성입니다. 순서는 text-overflow-mode 다음 text-overflow-ellipsis 순서대로 오게됩니다.

예제

현재 이 부분을 지원하는 브라우저는 오페라와 webkit 입니다. 오페라에서 오페라 전용인 -o-text-overflow 로 지원을 하구요. Webkit 은 부분적으로 지원합니다.

“오늘도 즐거운 하루를 보내시기 바랍니다”
라는 문구를 작은 엘리먼트안에 넣으면서 보겠습니다.

<div id="example1">오늘도 즐거운 하루를 보내시기 바랍니다</div>
<div id="example2">오늘도 즐거운 하루를 보내시기 바랍니다</div>
<div id="example3">오늘도 즐거운 하루를 보내시기 바랍니다</div>

html 부분입니다. css 를 지정하면

#example1 {text-overflow-mode: clip; width: 200px; overflow:hidden;white-space : nowrap; }
#example2 {text-overflow-mode: ellipsis; width: 200px; overflow:hidden;white-space : nowrap; }
#example3 {text-overflow-mode: ellipsis-word; width: 200px; overflow:hidden;white-space : nowrap; }

이미지로 만든것과 브라우저가 실행하는지 확인할수 있도록 직접 넣었습니다. 대부분의 브라우저는 단순히 overflow:hidden; 부분만 적용됩니다.

하지만 밑의 이미지처럼 보여야 하겠죠.

Multi Column 다단계 피라미드가 아닌 다단락기능

MULTI COLUMN 이야기 해 보겠습니다. CSS3 권고안으로써 인쇄물에서 쉽게 볼수 있는 단락기능입니다. 글이 나뉘는 것이죠. 단, 현재 불여우에서만 지원이 되고 있습니다. 사용은 다음과 같습니다.

-moz-column-count: 3;
-moz-column-width:20em; 
-moz-column-gap: 2em;

css 구문인데 쉽습니다. 3개의 column, 너비는 최소한20em 이 되어야하고 그리고 그 간격은 2em로 하라 라는것이죠. 어렵지 않아서 더 길게 설명하지 않아도 될꺼 같습니다.

문제 시간

두번째로 가려다가 오늘은 포스팅을 짧게 줄이기 위해 모든 설명을 여기서 마치고 방문자 분께 문제내기로 한번 나가보겠습니다. 바쁘다는 핑계로 너무 거저먹기 위주로 나가나요 ㅡㅜ

제가 가끔 시험삼아 돌리는 페이지가 있습니다. 이것저것 실험해보는 페이지 인데 보시다시피 불여우로 볼때와, 오페라로 볼때, ie 로 볼때 다 다르게 보입니다. 네 코드는 같습니다만, 지원하는 부분들이 틀립니다. 북마크 해두셨다가 가끔 들리시면 이상한 실험이 이루어 지고 있을지도 모르겠습니다

자 그럼 질문 나갑니다. 이 페이지를 익스플로러6, 불여우1.5, 오페라9 를 놓고 봤을때에, (포스팅부분, 즉 본문만 비교)

1. IE6와 불여우1.5에서의 차이점은 몇가지 일까요?

2. 불여우와 그럼 오페라에서 볼때의 차이점은 무엇이 있을까요?

@@

• html 파일과 css 파일을 다운받으실수 있습니다.
• 그리고 Prince 로 돌려서 제작된 PDF 파일입니다. 이걸 그대로 프린트하면 되겠죠.

Prince 라는 프로그램은 인터넷 콘텐트(XML)를 문서화(PDF파일) 하는것입니다. Acid2 테스트도 통과했죠. 브라우저들이 스크린에서는 강하지만 아직까지는 인쇄에 약한 모습입니다. 그래서 Prince 를 선택했다고 하는군요. 제가 보기에도 안성맞춤입니다.

이제 시작일단 인쇄와 스크린에서 보는것의 차이들이 몇가지 있습니다. 책으로 생각하시고 보신다면 이해가 쉬우실 겁니다. 각각의 페이지에 쪽수가 들어가며 헤더와 푸터도 있고 목차도 있으며 인덱스도 들어가겠죠. 또한 링크로 연결되던 페이지들을 쪽수로 설명이 되어져야 하겠네요. 예를들어 ‘102쪽 그림10-2 를 참고’ 처럼 말이죠. 이런것들을 염두해 두고 A List Apart 글과 함께 설명해 보겠습니다.

CSS2부터

일단 CSS2 부분에서 부터 시작합니다. 처도 처음 알게된 부분인데요. paged 라는 media를 CSS2가 지원을 한다는군요. 해서 @page 값을 정하게 되면 일정하게 자르게 되는거겠죠.

@page {
 size: 7in 9.25in;
 margin: 27mm 16mm 27mm 16mm;
}

한국식으로는 A4 용지를 기준삼아 했을시에

@page {
 size: 21cm 29.7cm;
 margin: 2cm;
}

이렇게 됩니다.

그 후에 단원이나 부록같은것이 끝났을시에 다음 새 페이지가 시작할때까지 공백을 넣어야 하겠죠. page-break 이라는 값 입니다. 해서

div.chapter, div.appendix {
 page-break-after:always;
}

가 들어가야하겠구요.

첫 커버페이지 후에 공백페이지의 삽입이 필요하니

div.titlepage {
 page: blank;
}

를 넣어줍니다.

CSS3

^^그리고 이제부터 헤더 푸터 등을 삽입하는 CSS3 를 사용하겠습니다. 제 블로그에서도 몇번밖에는 언급하지 않았던 CSS3 라서 많이 생소하실듯 합니다. 그래서 기초가 중요한것이겠죠. CSS2 의 기본이 안되어있다면 정신 없으실수도 있습니다.자, 일단 인쇄시에 페이지가 2개가 한꺼번에 보여집니다. 왼쪽, 오른쪽. 그래서 왼쪽 페이지에는 Cascading Style Sheets 문구를 왼쪽 위에 삽입을 합니다.

@page: left {
 @top-left {
  content:  "Cascading Style Sheets";
 }
}

네 @page: left 안에 @top-left 가 들어있습니다. 즉 왼쪽 페이지(@page:left) 의 왼쪽위 (@top-left) 에 Cascading style sheets 라는 문구를 넣어라가 content 부분이겠네요. 응용해서 오른쪽 페이지 중간위에 Korea 를 넣는다면

@page: right {
 @top-center {
  content: "Korea";
 }
}

가 되겠습니다.

그리고는 완전 공백 페이지에는 Cascading Style Sheets 라는 문구가 들어가면 안되니

@page blank : left {
 @top-left {
  content: normal;
 }
}

이라고 정해줍니다. 이렇게 정함으로해서 PDF 파일을 보시면 아시겠지만 2번째와 4번째 페이지에는 아무것도 인쇄되지 않았습니다.

STRING 문자열~

일단 죄송스럽습니다. html 공부하시면서 이거는 안하셔도 될지 알았지만 어쩔수 없군요 ^^ 정신을 바짝 차리시고 보셔야 할듯 싶습니다. 일단 사용도를 말씀드리자면 각 페이지의 오른쪽 윗 부분에 각 단원의 타이틀, 제목이 들어있습니다. 네 그부분을 언제나 일정하게 스타일을 주려면 문자열을 불러야 합니다. 그래서,

h1 {
 string-set: header content();
}

일단 header 라는 문자열에 단원 제목을 지정합니다. 단원이 바뀔때마다 새로운 문자가 header에 저장이 되겠네요. 그후에 이제 오른쪽에 나타나는 페이지의 오른쪽 윗부분에 그 단원의 타이틀이 표기가 되게 합니다. header 는 단원의 문자값이고 first 는 header 에 저장된 첫번째 문자열 입니다. 다시 말하면 제일 첫번째 단원이겠죠.

@page :right {
 @top-right {
  content: string(header, first);
 }
}

Page Number 쪽수

여기까지 이해가 되셨다면 나머지도 편히 이해가 되실꺼라 생각이 됩니다. 각 페이지의 number 는 이렇게 넣으면 되겠네요

@page :left {
 @bottom-left {
  content: counter(page);
 }
}

헌데 PDF 파일을 보시면 아시겠지만 처음 몇장은 목자도 들어가고 중요한 페이지들이라 로마숫자로 되어있습니다. 그래서 그 중요한 부분을 “front-matter” 로 써서 이렇게 나타냅니다

@page front-matter :left {
 @bottom-left {
  content: counter(page, lower-roman);
 }
}

lower-roman 부분은 list-style-type 의 값들과 같으니 골라서 사용할수 있겠네요.

Reference 참조 방식의 변화

제가 언제나 언급합니다만 링크는 인터넷의 꽃입니다. 하지만 링크가 웹상에서는 자유로이 연결되어 있지만 인쇄에는 “몇페이지를 참고하세요” 라는 말밖에 넣지 못합니다. 그렇다면, 그것을 표현하기 위해서는 링크가 가리키고 있는 부분이 어느 페이지에 있는지 알아야 합니다. 그걸 일일히 다 정해줄수 없기때문에 프로그램이 알아서 표현해줄수 있도록 해 주어야 합니다.페이지를 참조하세요
라고 링크가 되어 있을때에

a.pageref::before {
 content: target-counter(attr(href), page)
}

라고 정해주는거죠. 풀어보자면 ::before 나 ::after 는 꽤 많은 분들이 이해하고 계실것입니다. pageref 라는 클라스 *전에* 어떤어떤걸 넣어라 라는 표현입니다. 그 ‘어떤어떤’ 것은 content: 다음에 나와있죠. 링크가 가리키는 페이지를(target-counter) 출력하게 하는 것입니다. 다시 말하면 target-counter라는 함수가 href 속성이 가리키고 있는 “page” 를 가지고 오는 것이죠. 약간의 프로그래밍이 나옵니다 우후후후 ㅡㅡ;;;

목차부분의 출력

목차부분은 위의 부분처럼은 어렵지 않겠죠. 각 단원의 타이틀과 함께 그 단원이 시작되는 페이지를 가리키면 되니까요. 여기서 새로운것이 있다면 제목과 페이지수 사이에들어가는 무늬 입니다.일단

<ul class=”toc”>
<li><a xhref=”http://ilmol.com/wp/#intro” mce_href=”http://ilmol.com/wp/#intro”>Introduction/a></li>
<li><a xhref=”http://ilmol.com/wp/#html” mce_href=”http://ilmol.com/wp/#html”><abbr title=”HyperText Markup Language”>HTML</abbr></a></li>
</ul>
라고 단원들을 정해준 후에 무늬와 함께 페이지를 넣어줍니다.

ul.toc a::after {
 content: leader('.') target-counter(attr(href), page);
}

ul 클라스의 toc 에 첨가된 링크에는 … 과 함께 링크가 가리키는 페이지 숫자를 넣어라 라는 부분입니다. leader 는 타포그라피에서 문자적인 엔트리를 페이지 숫자와 연관지어주는것을 말합니다. 이렇게 말이죠
Introduction……………..1
HTML……………………..3

정리

대충 마무리를 잡았습니다. CSS3 가 너무 당황스럽게 복잡해 졌다고 느끼셨나요 ^^;; 보시다시피 html 을 인쇄하는것은 꽤 높은 가능성이 있습니다. Cross-browsing 뿐만이 아닌 Cross-publish 의 가능성을 보여주는 부분이었다고 생각이 됩니다. 아직 완벽이라고는 부를수 없지만 앞으로 발전되어갈수록 완벽에 가까운 일을 해낼수 있을것입니다. 인쇄 뿐만이 아닌 PDA, TV 등등 말이죠.
CSS 로 이제 많은 디자인을 쉽게 표현할수 있게 되어가고 있습니다. CSS3 를 적용하며 꽤나 유연성이 높은것을 느끼셨다고 생각이 됩니다. 당연한 연결이겠지만 CSS 가 유연해 지려면 HTML 이 얼마나 구조적으로 짜여져야 하는지도 보셨겠지요. 앞으로 웹표준의 필요성의 토론이 아닌 어떻게 대쳐하고 미래를 꾸며갈지가 더 중요하겠다는 생각이 요즘 들고 있습니다. 이제 겨우 CSS2 XHTML 이 퍼져가고 있는 상황에 CSS3 와 XHTML 2.0 들은 어떤 변화를 가지고 올지 궁금도 하네요. 아직 한창 이른 주제이긴 합니다만, 뭐가 다가올지 알고 있다면 준비하는게 경쟁력 아닙니까 ^^;;;;

위에서 언급은 했지만 그래도 다시 표기합니다.
참조글: A List Apart - Printing a Book with CSS: Boom!
W3C - CSS3 Paged Media Module

CSS 3는 처음부터 모듈을 기반으로 설계가 되었으며 아예 모듈별로 별도의 표준화가 진행 중이다. (모두 CSS 3지만 일부는 Recommendation, 일부는 Draft 등 상태가 다르다.) 물론 이외에도 다양한 문제점을 해결하고 기능 추가가 이루어 졌다. 앞으로 CSS 3 미리보기 시리즈는 이러한 추가기능들을 하나하나 살펴볼 것이다. - 달삼

[CSS 3 미리보기] 1. Introduction
[CSS 3 미리보기] 2. Backgrounds and Borders Module

물론 어느 브라우저가 얼마만큼의 css3 권고안을 받아들여 제작해주며 지원해 주느냐가 문제겠지만서도 css3 의 소식은 들뜨게만 합니다.

새 사이트 작업중 하던중에 후니님께서 MSN 하셔서 알려주셨습니다. 감사합니다.
http://www.csscripting.com/wiki/index.php?title=CSS3_Multi_Column

보통 점잖은척을 합니다만,, 이번만큼은 참을수가 없군요. 다같이 그냥 소리칩시다

>>ㅑ~~~~~~