추가 적립 안내

『스타일로 말해요!』는 디자인이 웹을 위한 결과물로 어떻게 적용될 수 있는지를 간단한 예제를 이용해 설명한다. 웹페이지의 구성 요소와 웹페이지 작업을 위해 필요한 도구를 알아보고, CSS의 문법, 의미, 어휘를 배운다.

CSS 할 줄 아세요?

CSS는 웹이 시각적으로 보여주는 부분을 담당한다. 여러분이 디자이너라면, CSS는 여러분의 아이디어를 온라인상에 펼칠 수 있게 하기 위해서 꼭 알아둘 필요가 있는 언어이다. CSS 코드를 설명하고 있는 책들은 무수히 많지만, 그런 추상적인 코드에서는 생각을 자유롭게 펼치기 힘들다. 눈에 보이는 색상, 형태, 배치를 가지고 생각해야 한다. 코드로 말하는 것이 아니라 스타일로 말해야 한다.

『스타일로 말해요!』는 여러분의 디자인이 웹을 위한 결과물로 어떻게 적용될 수 있는지를 간단한 예제를 이용하여 설명함으로써, 코드와 스타일 사이의 벽을 허물어 줄 것이다.

CSS는 디자이너가 아닌 개발자를 위한 것이다?

[거짓] : 많은 디자이너들이 CSS는 디자이너의 업무가 아니라, 단지 ‘코더’를 위한 것이라고 생각합니다. 이러한 이야기들을 상당히 많은 디자이너들로부터 들었습니다. “나는 프로그램 언어를 배우고 싶지 않다.” 이렇게 말을 하는 디자이너들에게는 3가지 기본적인 논리가 있습니다.

첫 번째 논리 : 개발자들이 이해하면, 난 이해할 필요가 없다.
저자는 편집 디자이너로 디자인을 시작했고, 인쇄 과정을 처음부터 끝까지 이해해야 했습니다. CMYK, 종이의 두께 등에 대해 알아야 하고, 출력 파일을 만드는 법도 알아야 했습니다. 이런 것들을 이해해야 하는 것은 저자의 디자인이 직접 선택한 적절한 매체에서 최고의 결과를 얻어야 하기 때문이었습니다. 적어도 여러분 자신이 코드를 작업할 계획이 전혀 없더라도, CSS가 어떻게 동작하는지 이해한다면, 한 단계 더 발전된 웹 디자이너가 될 수 있을 것입니다.

두 번째 논리 : CSS는 배우기 어렵다.
CSS는 실제로 디자이너의 마인드를 가지고 개발됩니다. 어렵지 않은 일반적인 용어가 사용되어 쉽게 이해하고 기억될 수 있습니다.

세 번째 논리 : 난 프로그래머가 아니라 디자이너라고요!!
CSS는 프로그램 언어가 아니라 스타일 시트 언어입니다. 무엇이 다르냐고요? 스타일 시트 언어는 문서 안에 있는 서로 다른 객체들이 어떻게 표현되는지 로직 기반인 function보다 인간이 이해하기 쉬운 간단한 스타일 규칙을 이용하여 컴퓨터에게 쉽게 이야기해줍니다. CSS는 콘텐츠가 어떻게 동작하는지 설명하는 게 아니라, 어떻게 보여야 하는지를 설명합니다.

<추천의글>

"제이슨이 웹디자이너들에게 CSS를 가르치는 방식은 정말 최고다! 그는 디자이너의 언어로 말한다."
- Allison Bucchere, AOL MediaGlow Living Network 부회장 겸 디렉터

Part 1 웹의 첫걸음

1장 웹페이지는 무엇일까요?
HTML, 자바스크립트, 그리고 CSS
- DOM이란 무엇일까?
- HTML과 CSS
- 자바스크립트와 CSS
- 플래시와 CSS

2장 웹 디자이너의 도구 상자
웹 브라우저
- 인터넷 익스플로러 (IE)
- 파이어폭스 (FF)
- 사파리 (Sa)
- 오페라 (Op)
- T크로스오버를 이용해 맥(Mac)에서 인터넷 익스플로러 6 테스트 하기
파이어폭스의 부가기능
- Firebug
- Colorzilla
- Palette Grabber
- MeasureIt
- Pixel Perfect
코드 에디터
- Coda
- TopStyle
- CSSEdit
- Dreamweaver
온라인에서 사용할 수 있는 도구들
- ColorJack
- Adobe Kuler
- Typetester
- SUMO Paint

3장 CSS에 대한 오해들
첫 번째 오해 : CSS는 디자이너가 아닌 개발자를 위한 것이다?
두 번째 오해 : CSS는 디자이너가 원하는 대로 다룰 수 없다?
세 번째 오해 : CSS는 많은 브라우저에서 일관성 없이 보인다?

Part 2 CSS 문법 알아보기

4장 구문: 의미 만들기
스타일 규칙
- 스타일 규칙 선언 부분
- 기본 스타일 규칙
- 더 많은 스타일 선언하기
- 규칙 조합하기
선택자의 종류
- HTML 선택자
- 클래스 선택자
- id 선택자
문맥 안에서의 스타일
- 콘텐츠의 위치에 따른 스타일 지정하기
- 자식 요소를 위한 스타일
- 형제 요소를 위한 스타일
특별한 경우를 위한 스타일
- 링크 상태
- 링크 액션을 위한 스타일
- 유동적인 액션을 위한 스타일
- 문단의 일부분을 위한 스타일

5장 시맨틱: 스타일의 의미 부여하기
스타일 규칙이 지정되는 곳
- HTML 태그에 지정하는 인라인 스타일
- 웹페이지 안에 삽입된 스타일
- 외부 스타일
CSS에 설명 추가하기
상속
- 상속 덮어쓰기
순서
구체성
- CSS 규칙의 가중치 결정하기
중요도
미디어
단계적으로 적용하기

6장 어휘 : 말이 통하다
값
- 키워드
- 변수
폰트
텍스트
배경
- 이미지 반복
- 이미지 위치
박스
- 디스플레이
- 불투명도
- 플롯
- 너비와 높이
- 테두리선
- 패딩
- 마진
- IE 고치기
위치 지정
- 위치지정 타입
- 평면 위치 설정하기
- 공간 위치 설정하기
테이블
리스트
커서
디자인 향상
- 그림자
- 둥근 모서리
- 외곽선

Part 3 원어민처럼 말하기

7장 CSS로 디자인하기
작업 과정 : 개요
기획하기
- 스케치하기
- 페이지 흐름도
- 와이어프레임
- 무드 보드
- 시각적 구성요소들
구축하기
- 크롬 자르기
- 스타일 가이드
- 프로토타입
배치하기
- 알파
- 베타
- 런칭
작업 과정 반복하기

8장 레이아웃
구조
- Head와 Body
- CSS를 위한 HTML 프레임워크
- CSS 추가하기
기본 스타일
- 브라우저 기본 스타일 설정하기
- 나만의 기본 스타일 설정하기
그리드
- 행
- 컬럼
- 섹션

9장 타이포그래피
폰트의 선택
- 핵심 웹 폰트
- 웹 안전 폰트
- 다운로드할 수 있는 폰트
유동적인 타이포그래피
- 서체 선택하기
텍스트 꾸미기
- 헤더
- 문단과 인용 블록
- 리스트

10장 내비게이션
CSS 스프라이트 (CSS Sprites)
링크
메뉴
버튼

11장 크롬
투명 이미지 사용하기
- IE6에서 투명 PNG 이미지 사용하기
그리드 정의하기
- 컬럼
- 행
로고와 폼
- 로고
- 폼
섹션 정의하기
- 광고를 위한 대체 버전
- 마지막 꾸미기

12장 마지막 이야기
CSS 벨리데이션
- 웹표준을 위한 디자인?
CSS 프레임워크
- 나만의 CSS 프레임워크 만들기
다른 매치를 위한 CSS
- 모바일 장치
- 프린트
CSS 최적화의 방법
- 일반적인 사항
- 디자인
- 코드화 작업
- 최적화하기

부록

A: voxLibris 코드
index.html
main.css
default.css
layout.css
layout.css
navigation.css
chrome.css

B: CSS 값
길이
- 픽셀인가? em인가?
폰트
URL
색상
- 색상 불투명도

C: 인터넷 익스플로러 문제 해결하기
쿼크 이해하기
해결법 1: Doctype 전환하기
해결법 2: 조건부 스타일
해결법 3: 언더스코어 핵
IE6에서 발생하는 공통적인 문제들

영어를 잘 하려면 풍부한 어휘의 습득이 필수이듯이, 웹디자인에도 어휘와 문법이 있다.

여러분은 이 책을 통해 멋진 웹디자인을 하기 위한 기본 어휘와 문법을 배우게 될 것이다.

책이 다루고 있는 내용은 웹표준에 기반을 둔 CSS의 기본적인 사용법과 작업 프로세스에 대한 내용들이다. 하지만, 그 뻔한 이야기를 저자가 풀어가는 방식은 남다르다.

일반적인 CSS에 대한 이론적인 사실의 나열이 아니라, 웹을 디자인하는 디자이너의 입장에서 쉽게 풀어 쓰고 있다. 이 점이 굉장히 맘에 들었다. ‘마땅히 지켜야 하는 것이기 때문에 알아야 한다.’라는 생각과 주장보다는 스스로 알아야만 하고 필요한 것으로 받아들이게 만드는 것이 더 훌륭한 방법이라고 생각한다.

이 책은 강요하지 않고, 스스로 깨닫고 받아들일 수 있는 내용들을 제시하고 있다.
국내의 웹 개발 직군을 보면 대부분 세부적으로 업무가 나누어져 있다. 크게 기획, 디자인, UI개발, 개발의 직군으로 분류할 수 있을 텐데, 이 구분의 장점은 아무래도 각 업무의 전문성을 높이기 위함이 아닐까 한다.

하지만, 반대로 생각해보면 자신이 맡고 있는 업무 이외에는 해박한 지식이 없어도 프로젝트를 진행하는 데는 크게 지장이 없다는 말이 되기도 한다.

이러한 상황에서 열린 시각과 열린 마인드가 없다면 전문성이라는 명목으로 오직 자신의 업무만을 고집하게 되는 경우가 생길 수 있다. 어쩌면 이것이 가장 골치 아픈 경우라고 할 수 있을텐데, 이런 상황이 지속된다면 프로젝트가 어떻게 될지는 불 보듯 뻔할 것이다. 하지만 자신의 업무가 아니라도 분야에 대한 지식을 알고 있으면, 자신의 업무에 더 많은 도움을 얻을 수 있고 훨씬 좋은 결과물도 만들 수 있을 것이다.

이 책의 번역을 하게 된 계기도 어쩌면 이 책의 저자와 같은 고민과 생각을 하고 있었기 때문이라고 할 수 있겠다.

책의 내용 중에 상당히 공감되는 부분이 있었는데, 다음의 내용이다.

“필자는 편집 디자이너로 디자인을 시작했고, 인쇄 과정을 처음부터 끝까지 이해해야 했습니다. CMYK, 종이의 두께 등에 대해 알아야 하고, 출력 파일을 만드는 법도 알아야 했습니다. 이런 것들을 이해해야 하는 것은 필자의 디자인이 직접 선택한 적절한 매체에서 최고의 결과를 얻어야 하기 때문이었습니다. 적어도 여러분 자신이 코드를 작업할 계획이 전혀 없더라도, CSS가 어떻게 동작하는지 이해한다면, 한 단계 더 발전된 웹 디자이너가 될 수 있을 것입니다.”
아직 편집디자인의 관점에서 웹디자인을 바라보는 시각들이 많은 경향이 있다. 어떤 디자인이든 디자인이 적용되는 매체의 특성을 먼저 파악해야 한다. 그리고 그 매체의 특성에 맞는 디자인이 정말 훌륭한 디자인이라고 생각한다.

‘웹디자인’에서 ‘디자인’의 의미가 단순한 ‘그래픽 작업’에서 끝나는 것이 아니라, ‘설계 및 제작’이라는 의미까지 포함되어 있다라는 것을 감안해본다면 자연스럽게 받아들 일 수 있는 말이 아닐까 싶다.

이 책은 CSS를 비롯한 다양한 브라우저 이슈, 효율적인 코드 작성, IE6를 대처하는 방법 등 이론이 완벽하더라도 실무에서 마주칠 수 있는 이슈들을 저자의 경험을 바탕으로 디자이너의 관점에서 쉽게 설명해주고 있다. 따라서, 실무에서 요긴하게 많은 도움을 얻을 수 있을 것이라고 생각된다.

아무쪼록, 이 책을 통하여 영화 ‘매트릭스’의 주인공 ‘네오’가 그동안 느끼지 못하고 있던 진정한 ‘real world’를 ‘모피어스’의 도움으로 만나게 되듯, 여러분들도 이 책을 통하여 ‘real web’을 볼 수 있는 안목을 가질 수 있기를 희망한다.
- 본문 중에서