추가 적립 안내

『웹디자인 2.0 고급 CSS: 감각적인 웹디자인 예술 미학』은 원하는 디자인을 만들기 위해 어떤 코드를 적절히 사용해야 하는지를 보여주는 CSS 코딩 책으로, 지루한 마크업과 CSS 코드를 반복하기보다 이미지를 사용해 한눈에 이해할 수 있도록 잘 설명하고 있다.

이 책에서 디자이너 앤디 클락은 '고급 CSS'를 활용해 접근성과 사용성이 높으면서도 아름다운 사이트를 만드는 웹디자인 2.0 개념에 대해 설명한다. 다양한 사례를 통해 마크업과 CSS를 사용하면서도 창의적이고 독창적인 디자인을 만들 수 있음을 보여준다.

★ 이런 점이 좋습니다!
▷ 시각적인 효과를 높인 수많은 예제와 화보 사진들을 통해 다양한 코딩 기술을 손쉽게 익힐 수 있습니다.
▷ 최신 웹브라우저와 최신 CSS3 스펙 사용환경에 대한 기술적 이점을 한발 앞서 체험해 볼 수 있습니다.

『웹디자인 2.0 고급 CSS』는 단지 멋진 최근 CSS 기법을 사용하는 기술적인 부분을 논하는 책이 아니다. 여러분이 날마다 쓰고 있는 CSS를 최대한 활용해서 멋진 디자이너나 아티스트가 되는 여정을 알려준다. 『웹디자인 2.0 고급 CSS』는 낡은 기법에서 벗어나 새로운 기술을 활용하는 방법을 강조한다. 다양한 방법을 시도함으로써 기존과는 다른 디자인 결과물을 만들어 낼 뿐만 아니라 디자인 작업 자체를 빠르고 효율적으로 진행할 수 있는 방법을 찾는 것을 목표로 삼는다. 그러기 위해 여러분은 디자인과 기술적인 면 모두에서 지속적으로 새로운 내용을 습득해 나가야 한다.

<책 소개>

웹이 발전하면서 새로운 표준이 점차 생겨나고 있으며 최신 브라우저는 웹을 새롭게 만들 수 있는 다양한 기능을 제공하고 있습니다. 웹사이트를 만드는 방법도 그에 따라 나날이 바뀌고 있습니다. 하지만 웹 디자이너 중 프로그래밍을 할 수 있는 사람은 많지 않습니다. 그렇기 때문에 멋진 디자인을 만들 때 의미있는 마크업과 CSS를 사용해야 한다는 사실은 제약이 될 수 있습니다. 뿐만 아니라 클라이언트에게 멋진 디자인을 선보이면서도 효율적인 업무 프로세스를 지켜야 하고 게다가 짧은 기간 안에 이 모든 것을 해내야 한다면 스트레스가 이만저만이 아닐 것입니다. 이러한 환경을 이미 경험해 잘 이해하고 있는 디자이너 앤디 클락은 ‘고급 CSS’를 활용해 접근성과 사용성이 높으면서도 아름다운 사이트를 만드는 웹디자인 2.0 개념에 대해 설명합니다.

이 책에서는 다양한 사례를 통해 마크업과 CSS를 사용하면서도 창의적이고 독창적인 디자인을 만들 수 있음을 보여줍니다. 새로운 업무 방법론을 소개하고 디자이너뿐만 아니라 프로젝트 팀 모두가 활용할 수 있는 프로토타입 제작방법을 설명합니다. 또한 그리드 기반 디자인을 웹에 적용하는 방법과 마크업 구조를 만드는 방법 등도 알려줍니다. 그밖에도 CSS3 등 앞으로 각광받을 기법들과 이를 최신 브라우저에서 직접 확인해보는 기술적인 내용뿐만 아니라, 프로젝트 팀 구성원과 더욱 효율적으로 업무를 수행하기 위한 개념적인 내용 등도 소개합니다.

■ 시각적으로 손쉽게 코딩 기술을 익힐 수 있습니다.
■ 유수 웹사이트, 사진작품, 컨셉 등 수많은 예제와 화보들을 통해 코드를 만드는 다양한 방법을 배울 수 있습니다.
■ 최신 웹브라우저와 최신 CSS3 스펙 사용 환경에 대한 기술적 이점을 한발 앞서 체험해 볼 수 있습니다.

1장 웹에 대한 재발견
고급 CSS 소개 5
어떤 툴을 사용해야 할까? 5
고급 CSS를 사용해야 하는 이유 6
앞으로의 웹은 어떤 모습일까? 10
접근성은 지원해야 하는 옵션이 아니라 디자인 그 자체다 12
새로운 개념을 탑재한 고급 CSS에 다가가기 16
고급 CSS의 기본 개념 23
사이트가 모든 브라우저에서 똑같이 보여야 하는 것은 아닙니다 25
쓸 수 있는 모든 CSS 선택자를 사용합니다 25
가능하면 새로나온 CSS3를 사용해서 한발 앞서 갑니다 30
CSS로 표현하기 어려운 부분은 자바스크립트와 DOM을 사용합니다 30
가능하면 핵과 필터를 사용하지 않습니다 31
의미있는 이름을 사용하고 마이크로포맷을 사용합니다 33
아이디어를 공유하고 다른 사람들과 협력합니다 41
왜 이제서야 고급 CSS를 사용할 수 있는가? 47
예상하지 못한 CSS의 사용 49
브라우저 지원 등급화 51
발견하고 진행하고 영감받아서 앞으로 나아가기 53
컨텐츠 중심의 디자인 55
컨텐츠 중심의 접근 57
흔히 볼 수 있는 최적화되지 않은 CSS 레이아웃 59
스타일과 상관없이 최적화하기 60
시맨틱 = 의미 65
CSS 옷 벗는 날 65
의미를 마크업으로 변환하기:마크업 골든벨 66
컨텐츠의 의미 파악하기 76
계속 의미있게 작업하기 76
세상 모든 것을 마크업으로 79
전 세계는 리스트로 만들 수 있다 79
눈에 보이는 대로 리스트 사용하기 82
샌프란시스코에 가면 hCard를 보내세요 86
세상을 더 넓게 보는 훈련 88
시작점은 컨텐츠 88
이제 웹에 적용해볼 단계 97

2장 웹을 만드는 새로운 방법
완벽한 방법론을 찾아가는 과정 101
더 좋은 방법 찾기 101
컨텐츠 기반의 프로세스 103
컨텐츠 수집 107
화면구성도 작성 109
과거의 화면 구성도가 실패할 수밖에 없는 이유 111
화면 구성도는 반드시 필요한가? 112
과거의 화면 구성도와 동적인 표현 113
grey box 방법을 활용한 개선된 접근법 117
자세히 표현하기 위해 "심볼" 사용하기 119
시안 작업 121
빠르게 디자인 작업 진행하기 121
시안에 마크업 가이드 추가하기 122
인터랙티브 프로토타입 사용하기 125
실제 동작하는 인터랙티브 프로토타입 125
재사용 가능한 코드 만들기 127
화면구조와 프로토타입을 잘 만드는 방법 127
위지윅: 보는 것만큼 얻지 못할 수도 있다 128
인터랙티브 프로토타입 실제 만들어 보기 131
개발환경(브라우저) 선택하기 131
브라우저 익스텐션 사용하기 131