웹디자이너를 위한 CSS3

TABLE OF CONTENTS

출간에 앞서

저자 인사말

서문

1장 지금 CSS3를 사용하려면
스펙을 읽지 마라
모두를 위한 CSS3
당장 사용할 수 있는 주요 CSS3 속성들
브라우저 개발자 접두어

2장 CSS 트랜지션에 대한 이해
주객전도
CSS 트랜지션이란?
간단한 예제
타이밍 함수(수학 시간에 잘했으면 좋았을 것)
트랜지션 지연
트랜지션 축약형 표기법
브라우저 지원
순서대로 완벽한 트랜지션 구축하기
트랜지션 상태
다중 속성을 가지는 트랜지션
가능한 한 모든 속성을 사용한 트랜지션
트랜지션을 적용할 수 있는 CSS 속성은?
왜 자바스크립트를 사용하지 않나?
현명하게, 영리하게

3장 CSS3를 이용해 호버 크래프트하기
사례 연구
놀랍고도 재미있는 일
모든 브라우저에서 동일한 경험이 필요할까?
달 탐사하기
불투명도를 사용한 단순하고 유연한 호버링
도전! 호버 크래프팅

4장 메시지 트랜스폼하기
scale 트랜스폼
경험 트랜스폼하기
회전, 비틀기, 이동
스토리에 힘들 실어줄 수 있는 트랜스폼
달을 변화시키기
한 가지 더: 현명하게, 영리하게

5장 다중 배경 적용하기
시차 스크롤링
오래된 방법: 추가되는 마크업
새로운 방법: CSS3를 이용한 다중 배경
지금 바로 다중 배경 사용하기

6장 폼 강화하기
간단한 가입 폼 마크업
FIELDSET과 LABEL에 스타일 추가하기
텍스트 입력 상자에 스타일 적용하기
CSS3 그레이디언트 사용하기
순수 CSS3 버튼
다른 브라우저들은 어떨까?
Focus 상태를 위한 box-shadow
CSS 애니메이션을 추가해 폼 인터랙션을 강화하기
인터랙션에 초점을 맞추자

7장 결론
이해하지 못하는 고객과 상사는 어떻게 할까?
앞을 미리 내다보기
더 많은 읽을거리와 자료들

인덱스

A BOOK APART 소개

저자 소개

나는 여러 나라 웹디자이너로부터 이런 말을 들었습니다. "CSS3를 빨리 사용하고 싶어요. 그것이 완성되었을 때."

하지만 CSS3는 지금이라도 당장 사용할 수 있습니다. 다행히 CSS3를 사용하기 위해 사고방식이나 웹사이트 제작 방법을 바꿀 것까지는 없습니다. 프로젝트에서 CSS3를 사용하려면 어떻게 해야 할까요? CSS3를 적용하려는 상황을 조심스럽게 선택해야 하므로 무엇보다 '경험 계층experience layer?에 초점을 맞추는 것이 좋습니다.

필자는 CSS 트랜지션을 버터라고 생각합니다. 호버hovering, 클릭clicking, 포커싱focusing 같은 인터랙션interactions이 발생했을 때 스타일시트에 있는 값들이 부드럽게 바뀌기 때문입니다. 트랜지션이 실제 버터와 다른 점은 트랜지션을 아무리 많이 사용해도 살이 찌지 않는다는 점입니다. 디자인에서 특정 이벤트를 풍성하게 하기 위해 사용하는 스타일시트의 간단한 규칙일 뿐입니다.

CSS3를 사용한 호버 크래프팅은 빠르고 효과적인 방법으로 경험 계층을 풍부하게 만드는 간단한 스타일을 추가함으로써 이 속성을 지원하거나 지원하게 될 브라우저 사용자를 더욱 놀라게 하거나 즐겁게 합니다. 지금까지 여러분이 만들어놓은 경험을 브라우저가 완벽하게 지원하지 못한다 하더라도 아무런 문제가 없습니다. 그들은 자신이 무엇을 놓치고 있는지 모르기 때문입니다.