프론트엔드 개발자도 꼭 읽어야 할 책! 웹디자인의 진정한 아름다움은 논리적인 소스 코드에서 시작됩니다. 이 책은 2012년 4월에 출간된 《웹디자이너를 위한 CSS3》의 개정판입니다. 초판이 나온 이후, CSS3의 많은 속성들이 논의되어 왔고, 개선된 덕분에 더 많은 브라우저에서 지원받게 되었습니다. 하지만 아직도 많은 디자이너와 프론트엔드 개발자들은 CSS3의 도입을 망설이거나, 고객을 어떻게 설득해야 할지를 놓고 고민하고 있는 것도 현실입니다. CSS3는 콘텐츠 생성을 위한 고급 선택자에서부터 웹폰트까지, 그리고 그레이디언트, 새도, 둥근 모서리에서부터 유려한 애니메이션에 이르기까지 창의적인 가능성이 넘쳐나는 세계입니다. 저자 댄 시더홈보다 이 세계를 더 잘 안내해 줄 사람은 없을 것입니다. 이 개정판에서는 새로운 속성과 다양한 기술들 그리고 마이크로 레이아웃에 관해 말하고 있습니다. 독자들은 이 책을 통하여 새로운 기능을 지원하지 않는 브라우저에 가능한 것이 무엇이지, 그리고 어떻게 구축하고 적용하는지를 배울 수 있습니다. 웹을 둘러싼 업계는 빠른 속도로 변화하고 있습니다. 브라우저의 지원에 따라 과거, 현재, 그리고 미래가 공존하는 곳이 바로 웹사이트라고 말할 수 있을 것입니다. 이 책은 여러분이 반드시 알아야 할 아주 기본적이면서도 실질적으로 일상적인 디자인 문제를 좀 더 효율적으로 해결할 수 있는 내용으로 구성되어 있습니다. 공존하는 시간의 간격을 여러분의 프로젝트에 당장에라도 적용할 수 있게 도와줄 것입니다. 겉으로 보기에는 CSS3의 갈 길이 멀고 오랜 시간이 걸릴 것 같지만, 하위 호환을 지원하는 데 필요한 시간일 뿐 현재 어떤 것을 적용하고 어떤 것을 사용해야 할지 망설일 필요가 없습니다. 여러분과 여러분의 고객, 그리고 웹사이트 사용자에게 좀 더 유익한 방향으로 매일매일 일상의 작업에 CSS3를 추가하는 것부터 시작합시다. 그리고 여러분의 이러한 노력은 고객이나 사용자들이 우연히 발견했을 때 더욱 놀라고 기뻐하게 만들 것입니다.

추천사 제프리 젤드먼 Jeffrey Zeldman 프롤로그 댄 시더홈Dan Cederholm 1장 지금 CSS3를 사용하려면 2장 CSS 트랜지션에 대한 이해 3장 CSS3를 이용해서 호버 크래프트하기 4장 메시지 트랜스폼하기 5장 다중 배경 적용하기 6장 폼 강화하기 7장 마이크로 레이아웃 에필로그 도움이 되는 자료들 참조 찾아보기

1장. ‘지금 CSS3를 사용하려면’ 中에서 (p16) 저는 여러 나라 웹디자이너로부터 이런 말을 들었습니다. "저도 CSS3를 빨리 사용해보고 싶네요. 그런데... 언제쯤 모든 브라우저에서 지원이 될까요?" 하지만 CSS3의 상당 부분이 이미 주요 브라우저에서 충분히 지원 되고 있기 때문에, 누구든지 CSS3를 지금 당장 사용할 수 있습니다. 여러분의 생각을 바꾸거나 웹사이트 제작 방식을 극단적으로 바꿀 필요도 없습니다. 그렇다면 CSS3를 프로젝트에 적용하려면 어떻게 해야 할까요? 저는 우리가 CSS3를 적용할 상황을 신중하게 잘 선택해서 '사용자 경험 단계'에 초점을 두고 사용하면 된다고 생각합니다. 2장. ‘CSS 트랜지션에 대한 이해’ 中에서 (p36) 저는 CSS3 트랜지션을 버터라고 생각합니다. 호버hovering, 클릭clicking, 포커싱focusing같은 인터렉션이 발생했을 때 스타일 시트에 있는 값들이 부드럽게 바뀌기 때문입니다. 트랜지션이 실제 버터와 다른 점은 트랜지션을 아무리 많이 사용해도 살이 찌지 않는다는 점입니다. 디자인에서 특정 이벤트를 풍성하게 하기 위해 사용하는 스타일 시트의 간단한 규칙일 뿐입니다. 3장. ‘지금 CSS3를 이용해서 호버 크래프트하기’ 中에서 (p70) 예전에는 플래시나 자바스크립트가 있어야만 만들 수 있었던 것을 이 간단한 연습을 통해 얼마나 효율적으로 만들 수 있는지 보여 주었다고 생각합니다. 우리가 사용한 CSS 규칙은 간단하고 쉬우며 아직 CSS3를 지원하지 않는 브라우저에도 별다른 문제를 일으키지 않습니다. 또한, CSS3 명세의 transition 속성을 규칙 의 가장 마지막에 오게 함으로써 미래를 대비했습니다. 고유한 브라우저 개발사의 접두어를 사용하는 과정에서 규칙이 중복되는 것은 불가피한 일입니다. 오히려 이러한 노력은 매우 귀중합니다. '지금 바로' CSS를 이용하여 수많은 사용자의 경험을 향상시키세요. 4장. ‘메시지 트랜스폼하기’ 中에서 (p108) 우리가 다루고 있는 콘텐츠의 진정한 의미에 관해 좀 더 고민할 시간을 가짐으로써 트랜지션, 트랜스폼과 함께 지금 바로 사용할 수 있는 CSS3 속성을 바르게 골라 적용할 수 있습니다. 이러한 경험 강화는 참된 웹 장인의 표식으로, 모든 사람이 신경 쓰지 않던 디테일에 주목하고 그다지 중대하지 않은 시각적 이벤트를 고려하고 독려할 뿐만 아니라, 평범함 그 이상의 메시지를 전달합니다. 지금 이런 것들을 지원하는 브라우저와 미래에 지원하게 될 브라우저의 짧은 코드와 생각들은 그만한 가치가 있습니다. 5장. ‘다중 배경 적용하기’ 中에서 (p122~p123) 이 책에서 우리는 다양한 예제들을 이용한 테마를 만들어보았습니다. 그리고 다중 배경 이미지도 사용해 보았습니다. 사파리와 크롬, 파이어폭스, 오페라 그리고 IE처럼 CSS3 속성을 지원하는 브라우저와 함께 (더 나은) 과정을 만들어가고 있습니다. 오래된 버전 브라우저가 지원하지 않는다고 해서 겁내거나 지원될 때까지 기다릴 필요는 없습니다. 대신 시차 이동 배경처럼 중대하지 않은 시각적 이벤트를 골라 CSS3 속성들을 적용해 사용자 경험을 강화하는 것입니다. 6장. ‘폼 강화하기’ 中에서 (p128) 이 장에서는 아직 다루지 않았던 CSS3의 세 가지 부분을 알아볼 것입니다. 1. 강력하고 새로운 선택자Selector 2. CSS 그레이디언트Gradient 3. CSS 애니메이션Animation 폼과 CSS3가 만나 얼마나 새롭고 창의적인 방법으로 사용되는지 다시 한번 예제 사이트를 살펴 봅시다. 7장. ‘마이크로 레이아웃’ 中에서 (p159) 이제부터 우리는 페이지 구조보다 마이크로 레이아웃들을 집중적으로 살펴보려 합니다. 다시 말하면, 전체 페이지를 구성하는 칼럼들과 그리드들이 아닌 개별적인 요소들의 배치에 집중하겠다는 뜻입니다. 몇 가지 예시를 살펴봄으로써, 여러분은 다음에 소개될 CSS3 모듈에 대해 빠르게 이해하게 될 겁니다.