스타일로 말해요!CSS를 아는 웹디자이너 되기

iv

들어가며 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix

Part 1 웹의 첫걸음 웹페이지는 무엇일까요? . . . . . . . . . . . . . . . . 1 HtML, 자바스크립트, 그리고 CSS . . . . . . . . . . . . . . . . 2

DOM이란 무엇일까? . . . . . . . . . . . . . . . . . . . . . . . . . 4

HtML과 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

자바스크립트와 CSS . . . . . . . . . . . . . . . . . . . . . . . . 10

플래시와 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

웹 디자이너의 도구 상자 . . . . . . . . . . . . . . 17 웹 브라우저 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

인터넷 익스플로러 (IE) . . . . . . . . . . . . . . . . . . . . . . . 20

파이어폭스 (FF) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

사파리 (Sa) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

오페라 (Op) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

크로스오버를 이용해 맥(Mac)에서 인터넷 익스플로러 6 . .

테스트 하기 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

파이어폭스의 부가기능 . . . . . . . . . . . . . . . . . . . . . . . . . 24

Firebug . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Colorzilla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Palette Grabber . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

MeasureIt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

Pixel Perfect . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

코드 에디터 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

Coda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

topStyle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

CSSEdit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

온라인에서 사용할 수 있는 도구들 . . . . . . . . . . . . . . . . 30

ColorJack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

adobe Kuler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

typetester . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

SUMO Paint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

목 차

1

2

v

CSS에 대한 오해들 . . . . . . . . . . . . . . . . . . .35 첫 번째 오해 : CSS는 디자이너가 아닌 개발자를

위한 것이다? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

두 번째 오해 : CSS는 디자이너가 원하는 대로

다룰 수 없다? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

세 번째 오해 : CSS는 많은 브라우저에서 일관성

없이 보인다? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

Part 2 CSS 문법 알아보기

구문: 의미 만들기 . . . . . . . . . . . . . . . . . . . . . 49 스타일 규칙 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

스타일 규칙 선언 부분 . . . . . . . . . . . . . . . . . . . . . . . 52

기본 스타일 규칙 . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

더 많은 스타일 선언하기 . . . . . . . . . . . . . . . . . . . . . . 56

규칙 조합하기 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

선택자의 종류 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

HtML 선택자 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

클래스 선택자 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

id 선택자 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

문맥 안에서의 스타일 . . . . . . . . . . . . . . . . . . . . . . . . . . 70

콘텐츠의 위치에 따른 스타일 지정하기 . . . . . . . . . . . 72

자식 요소를 위한 스타일 . . . . . . . . . . . . . . . . . . . . . . 76

형제 요소를 위한 스타일 . . . . . . . . . . . . . . . . . . . . . . 78

특별한 경우를 위한 스타일 . . . . . . . . . . . . . . . . . . . . . . 80

링크 상태 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80

링크 액션을 위한 스타일 . . . . . . . . . . . . . . . . . . . . . . 82

유동적인 액션을 위한 스타일 . . . . . . . . . . . . . . . . . . 84

문단의 일부분을 위한 스타일 . . . . . . . . . . . . . . . . . . 86

시맨틱: 스타일의 의미 부여하기 . . . . . 89 스타일 규칙이 지정되는 곳 . . . . . . . . . . . . . . . . . . . . . . 90

HtML 태그에 지정하는 인라인 스타일 . . . . . . . . . . . . 92

웹페이지 안에 삽입된 스타일 . . . . . . . . . . . . . . . . . . 94

3

5

4

vi

외부 스타일 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

CSS에 설명 추가하기 . . . . . . . . . . . . . . . . . . . . . . . . . 104

상속 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

상속 덮어쓰기 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108

순서 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

구체성 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112

CSS 규칙의 가중치 결정하기 . . . . . . . . . . . . . . . . . 114

중요도 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

미디어 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118

단계적으로 적용하기 . . . . . . . . . . . . . . . . . . . . . . . . . 120

어휘 : 말이 통하다 . . . . . . . . . . . . . . . . . . 123 값 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124

키워드 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124

변수 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

폰트 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126

텍스트 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130

배경 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134

이미지 반복 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

이미지 위치 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138

박스 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140

디스플레이 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142

불투명도 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144

플롯 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146

너비와 높이 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148

테두리선 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152

패딩 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154

마진 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156

IE 고치기 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158

위치 지정 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160

위치지정 타입 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160

평면 위치 설정하기 . . . . . . . . . . . . . . . . . . . . . . . . . 162

공간 위치 설정하기 . . . . . . . . . . . . . . . . . . . . . . . . . 164

테이블 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166

리스트 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168

커서 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170

디자인 향상 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172

그림자 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172

둥근 모서리 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174

외곽선 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174

6

vii

Part 3 원어민처럼 말하기 CSS로 디자인하기 . . . . . . . . . . . . . . . . . . 179 작업 과정 : 개요 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180

기획하기 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182

스케치하기 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182

페이지 흐름도 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184

와이어프레임 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186

무드 보드 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188

시각적 구성요소들 . . . . . . . . . . . . . . . . . . . . . . . . . 190

구축하기 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192

크롬 자르기 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192

스타일 가이드 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194

프로토타입 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196

배치하기 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204

알파 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204

베타 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204

런칭 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204

작업 과정 반복하기 . . . . . . . . . . . . . . . . . . . . . . . . . . . 206

레이아웃 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209 구조 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210

Head와 Body . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210

CSS를 위한 HtML 프레임워크 . . . . . . . . . . . . . . . . 212

CSS 추가하기 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214

기본 스타일 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216

브라우저 기본 스타일 설정하기 . . . . . . . . . . . . . . . . 216

나만의 기본 스타일 설정하기 . . . . . . . . . . . . . . . . . 216

그리드 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218

행 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218

컬럼 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220

섹션 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222

타이포그래피 . . . . . . . . . . . . . . . . . . . . . . . . . 225 폰트의 선택 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226

핵심 웹 폰트 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226

웹 안전 폰트 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228

다운로드할 수 있는 폰트 . . . . . . . . . . . . . . . . . . . . . 230

7

8

9

viii

유동적인 타이포그래피 . . . . . . . . . . . . . . . . . . . . . . . . 232

서체 선택하기 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234

텍스트 꾸미기 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238

헤더 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238

문단과 인용 블록 . . . . . . . . . . . . . . . . . . . . . . . . . . 240

리스트 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240

내비게이션 . . . . . . . . . . . . . . . . . . . . . . . . . . . 243 CSS 스프라이트 (CSS Sprites) . . . . . . . . . . . . . . . . . 244

링크 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246

메뉴 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248

버튼 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252

크롬 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257 투명 이미지 사용하기 . . . . . . . . . . . . . . . . . . . . . . . . . 258

IE6에서 투명 PNG 이미지 사용하기 . . . . . . . . . . . . 260

그리드 정의하기 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262

컬럼 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262

행 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264

로고와 폼 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266

로고 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266

폼 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266

섹션 정의하기 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268

광고를 위한 대체 버전 . . . . . . . . . . . . . . . . . . . . . . 268

마지막 꾸미기 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270

마지막 이야기 . . . . . . . . . . . . . . . . . . . . . . . . 273 CSS 벨리데이션 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274

웹표준을 위한 디자인? . . . . . . . . . . . . . . . . . . . . . . 275

CSS 프레임워크 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278

나만의 CSS 프레임워크 만들기 . . . . . . . . . . . . . . . . 279

다른 매치를 위한 CSS . . . . . . . . . . . . . . . . . . . . . . . . 280

모바일 장치 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280

프린트 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281

CSS 최적화의 방법 . . . . . . . . . . . . . . . . . . . . . . . . . . . 282

일반적인 사항 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282

디자인 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284

코드화 작업 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285

최적화하기 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286

10

11

12

ix

부록

a: voxLibris 코드 . . . . . . . . . . . . . . . . . .291 index .html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292

main .css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295

default .css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296

layout .css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297

layout .css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297

navigation .css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298

chrome .css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300

B: CSS 값 . . . . . . . . . . . . . . . . . . . . . . . . . . .303 길이 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304

픽셀인가? em인가? . . . . . . . . . . . . . . . . . . . . . . . . 304

폰트 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306

UrL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309

색상 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310

색상 불투명도 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310

C: 인터넷 익스플로러 문제 해결하기 17 쿼크 이해하기 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318

해결법 1: Doctype 전환하기 . . . . . . . . . . . . . . . . . . . 319

해결법 2: 조건부 스타일 . . . . . . . . . . . . . . . . . . . . . . 320

해결법 3: 언더스코어 핵 . . . . . . . . . . . . . . . . . . . . . . 321

IE6에서 발생하는 공통적인 문제들 . . . . . . . . . . . . . . 322

찾아보기 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .324

A

B

C

x

옮긴이글

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

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

책이 다루고 있는 내용은 웹표준에 기반을 둔 CSS의 기본적인 사용법과 작업 프로세스에 대

한 내용들이다. 하지만, 그 뻔한 이야기를 저자가 풀어가는 방식은 남다르다.

일반적인 CSS에 대한 이론적인 사실의 나열이 아니라, 웹을 디자인하는 디자이너의 입장에서

쉽게 풀어 쓰고 있다. 이 점이 굉장히 맘에 들었다. ‘마땅히 지켜야 하는 것이기 때문에 알아야

한다.’라는 생각과 주장보다는 스스로 알아야만 하고 필요한 것으로 받아들이게 만드는 것이 더

훌륭한 방법이라고 생각한다.

이 책은 강요하지 않고, 스스로 깨닫고 받아들일 수 있는 내용들을 제시하고 있다.

국내의 웹 개발 직군을 보면 대부분 세부적으로 업무가 나누어져 있다. 크게 기획, 디자인, UI

개발, 개발의 직군으로 분류할 수 있을 텐데, 이 구분의 장점은 아무래도 각 업무의 전문성을 높

이기 위함이 아닐까 한다.

하지만, 반대로 생각해보면 자신이 맡고 있는 업무 이외에는 해박한 지식이 없어도 프로젝트

를 진행하는 데는 크게 지장이 없다는 말이 되기도 한다.

이러한 상황에서 열린 시각과 열린 마인드가 없다면 전문성이라는 명목으로 오직 자신의 업

무만을 고집하게 되는 경우가 생길 수 있다. 어쩌면 이것이 가장 골치 아픈 경우라고 할 수 있을

텐데, 이런 상황이 지속된다면 프로젝트가 어떻게 될지는 불 보듯 뻔할 것이다. 하지만 자신의

업무가 아니라도 분야에 대한 지식을 알고 있으면, 자신의 업무에 더 많은 도움을 얻을 수 있고

훨씬 좋은 결과물도 만들 수 있을 것이다.

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

이라고 할 수 있겠다.

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

xi

“필자는 편집 디자이너로 디자인을 시작했고, 인쇄 과정을 처음부터 끝까지 이해해야 했습니

다. CMYK, 종이의 두께 등에 대해 알아야 하고, 출력 파일을 만드는 법도 알아야 했습니다. 이

런 것들을 이해해야 하는 것은 필자의 디자인이 직접 선택한 적절한 매체에서 최고의 결과를 얻

어야 하기 때문이었습니다. 적어도 여러분 자신이 코드를 작업할 계획이 전혀 없더라도, CSS가

어떻게 동작하는지 이해한다면, 한 단계 더 발전된 웹 디자이너가 될 수 있을 것입니다.”

아직 편집디자인의 관점에서 웹디자인을 바라보는 시각들이 많은 경향이 있다. 어떤 디자인

이든 디자인이 적용되는 매체의 특성을 먼저 파악해야 한다. 그리고 그 매체의 특성에 맞는 디자

인이 정말 훌륭한 디자인이라고 생각한다.

‘웹디자인’에서 ‘디자인’의 의미가 단순한 ‘그래픽 작업’에서 끝나는 것이 아니라, ‘설계 및 제작’

이라는 의미까지 포함되어 있다라는 것을 감안해본다면 자연스럽게 받아들 일 수 있는 말이 아

닐까 싶다.

이 책은 CSS를 비롯한 다양한 브라우저 이슈, 효율적인 코드 작성, IE6를 대처하는 방법 등

이론이 완벽하더라도 실무에서 마주칠 수 있는 이슈들을 저자의 경험을 바탕으로 디자이너의

관점에서 쉽게 설명해주고 있다. 따라서, 실무에서 요긴하게 많은 도움을 얻을 수 있을 것이라고

생각된다.

아무쪼록, 이 책을 통하여 영화 ‘매트릭스’의 주인공 ‘네오’가 그동안 느끼지 못하고 있던 진정

한 ‘real world’를 ‘모피어스’의 도움으로 만나게 되듯, 여러분들도 이 책을 통하여 ‘real web’을 볼

수 있는 안목을 가질 수 있기를 희망한다.

이 책이 번역되어 나올 수 있도록 많은 노력을 해주신 위키북스의 박찬규 대표님, 김윤래 팀

장님, 꼼꼼한 내용 검토를 해주신 이준님, 부제 선정에 결정적인(!) 도움을 준 후배 준희, 그리고

SK커뮤니케이션즈 UI개발팀 동료들에게도 감사의 마음을 전한다. 마지막으로, 책의 마무리 작

업을 위해 주말과 밤시간에 집중할 수 있도록 배려해 준 아내 ‘랑’과 곧 세상의 빛을 보게 될 ‘꼬

물’이에게도 애뜻한 고마움을 전한다.

- 남덕현

들어가며

디자인이란 당신이 능숙하게 제어할 수 있는 도구를 이용하여 명확하게 의사소통하는 것이다.

― 밀톤 글래서

들어가며

디자인은 다양한 아이디어들을 시각적으로 의사소통하기 위한 방법 중 하나

입니다. 하지만, 말하기나 쓰기와는 조금 다르게 시각적인 의사소통은 마음속에

서 느껴지는 것들이 대부분 순간적으로 떠오르는 경우가 많습니다. 어떤 사물을

몇 초 동안 보고 있는 사이에, 우리는 그 사물이 가지고 있는 시각적인 메시지를

이해하게 될 것입니다. 추상화 같은 그림의 경우에는 그 그림에 대한 부가적인 해

석이 필요하듯이, 무언가를 보고 있을 때 우리는 그것의 의미를 자연스럽게 해석

하게 됩니다.

비록 웹 디자인은 시각적인 매체이지만, CSS라고 알려진 스타일 언어 코드를

이용하여 만들어졌습니다. 여러분이 어도비 포토샵이나 드림위버와 같은 프로그

램 사용법을 안다고 해도, 이 프로그램들이 마음에 아주 쏙 드는 결과물을 번쩍

하고 만들어주지는 못합니다. 여러분의 디자인에 대한 최상의 결과물을 얻기 위

해서는, 먼저 스타일을 이용하여 대화하는 방법을 배울 필요가 있습니다.

xvi

어떤 도형을 머리 속에 떠올려 보세요. 원, 사각형, 삼각형, 팔각형, 아메바 모양의

덩어리 등, 여러분이 원하는 어떤 도형이든 상관없습니다. 단, 하나의 덩어리로 이

어진 도형이어야 합니다. 마음속으로 그 도형을 떠올리거나, 종이 조각으로 만들

어 보거나, 아니면 컴퓨터를 이용하여 만들어 보세요.

자 이제 그 도형에 대해 이야기하지 말고, 어떻게 그 도형을 설명할 수 있을지 생

각해 보세요. 단, 다른 도형의 이름을 말하면 안 되고, 오직 ‘선’으로만 설명해야

합니다.

여러분이 간단한 사각형을 그렸다고 해봅시다. 아마도 여러분은 그 사각형을 다

음과 같이 설명할 것입니다.

똑같은 길이를 가진 4개의 선 중, 두 개는 수평으로, 두 개는 수직으로 서로

닿게 그린다.

맞습니다. 여러분이 설명한 대로 그림을 그리면 아래와 같은 사각형이 될 것입

니다.

하지만, 다음의 경우처럼 동일한 방향으로 그렸다고 해도 완전히 다른 그림을 완

성하게 될 수도 있을 것입니다.

눈으로 보이는 것을 말로 설명하기

xvii

지금까지 몇 년 동안 CSS를 가르치면서, 매번 학생들과 함께 이 문제를 같이 풀

어보고 있는데, 그들이 설명하고자 했던 도형과 다르게 그리면, 학생들은 의외의

결과라는 듯한 표정을 짓습니다. 하지만, 그것은 학생들의 생각이 잘못된 것이 아

니라, 인간의 의사소통 과정에서 맞닥뜨릴 수 있는 수많은 가정(assumption)들

이 문제인 것입니다.

우리는 위에서 설명한 내용 그대로 따르지 않았습니다. 또한, 우리는 학생들이

준 결과가 실제로 그들이 생각하는 있는 것으로 받아들입니다. 우리는 4개의 모

든 선의 끝이 서로 맞닿아야 한다는 작은 사실을 놓쳤던 것입니다.

컴퓨터가 점점 더 인간을 이해하기 시작하면서, 우리는 어떤 것을 설명할 때 보다

정확하게 내용을 전달해 주어야 합니다. 특히 시각적인 디자인이라면 더욱 그렇

겠지요. 컴퓨터가 세부적인 것들까지 채워주지는 못할 테니까요.

그래서, 컴퓨터가 오류 없이 정확하기 이해하는 것처럼, 여러분의 디자인을 빠르

고 정확하게 적용해 줄 수 있는 언어를 사용할 줄 아는 능력이 필요합니다. 그것

이 바로 CSS이고, 뛰어난 웹 디자이너가 되기 위해서 반드시 여러분의 것으로 만

들어야 하는 언어이기도 합니다.

xviii

왜 CSS일까요?

캐스케이딩 스타일 시트(CSS)는 여러분의 디자인이 웹에서 어떻게 보여지면 좋

을지 컴퓨터에게 설명할 때 사용하는 언어입니다. CSS를 이용하면 너비, 높이,

색, 마진, 패딩, 테두리선, 배경, 폰트 스타일을 포함한 세부적인 내용들을 조절할

수 있습니다. 따라서 이 언어를 이해하면 온라인상에 있는 멋진 디자인들을 분별

할 수 있는 자신만의 안목을 가지게 될 것입니다.

디자이너들에게 지속적으로 듣는 푸념 중의 하나가, 개발자들은 절대 자신들

이 작업한 디자인과 똑같이 개발해주지 않는다는 것입니다. 디자이너 입장에서

CSS를 배우면 다음 두 가지 장점이 있습니다.

01 온라인상에서 디자인이 어떻게 보이는지 관리할 수 있습니다. 색상이 잘못

적용되었다든지, 오른쪽 선이 보이지 않을 때 무엇이 잘못되었고, 어떻게 수

정하면 되는지 알 수 있습니다.

02 보다 멋진 웹 디자인을 만들어 낼 수 있는 능력이 생깁니다. CSS가 어떤 방

식으로 동작하는지 이해한다는 것은 현실적으로 가능한 것들 중 최고의 결

과를 얻을 수 있는 방법을 알고 있는 것과 마찬가지입니다.

더욱 반가운 소식은 CSS를 말하는 것은 영어로 말하는 것이나 ‘인간’의 다른 언

어로 말하는 것과 별반 다르지 않다는 것입니다. 말하는 방법을 위한 몇 가지 구

문과, 어떤 의미가 있는지, 그리고 말하기에 필요한 몇 가지 어휘를 조금 익혀주

면 됩니다.

xix

아래 간단한 디자인을 생각해봅시다.

이 디자인을 설명하기 위해서, 다음과 같이 말할 것입니다.

테두리선은 빨간 직선이며 5픽셀의 두께를 가지고 있고, 배경색은 핑크색이다.

콘텐츠 영역을 둘러싼 25픽셀의 패딩이 있고 폰트는 Arial이며, 8픽셀이다.

텍스트는 한 행씩 띄어 보여준다.

위의 설명을 CSS로 표현하는 것도, 크게 다르지 않습니다.

border: 5px solid red;

background-color: pink;

padding: 25px;

font: 8px/2 arial;

사용된 대부분의 용어가 위의 설명에서 나온 것들입니다. 문맥 표현의 구조는 전

혀 다르다고 해도, 위의 설명과 같은 방식으로 바꾸는 것이 굉장히 어려운 것은

아닙니다.

이 책의 목적은 대화를 나누는 것처럼, 여러분의 웹 디자인을 CSS로 쉽게 설명할

수 있도록 알려주는 것입니다.

One thing was certain, that the WHITE

kitten had had nothing to do with it:—it

was the black kitten’s fault entirely. For

the white kitten had been having its face

washed by the old cat for the last quarter

of an hour (and bearing it pretty well, con-

sidering); so you see that it COULDN’T

have had any hand in the mischief.

xx

이 책을 읽으면서

이 책은 시각디자인, 인터랙션 디자인, 사용자 경험(UX), 정보 설계

(IA) 업무를 담당하는 폭넓은 범위의 디자이너를 위해 쓰여졌습니

다. 꼭 디자이너가 아니라도, CSS에 대해 알고 싶어하는 모든 분들

을 위한 책입니다.

<스타일로 말해요!>는 3개의 파트와 3개의 부록으로 구성되어 있

습니다.

> 파트 1. 웹의 첫걸음

웹페이지를 구성하는 핵심 요소들을 알아보고, 웹페이지를

만들 때 필요한 몇 가지 툴을 소개합니다. 그리고, 디자이너와

CSS에 대해 잘못 알고 있는 몇 가지 커다란 오해들을 짚어 봅

니다.

> 파트 2. CSS 문법 알아보기

디자이너가 필수로 알아야 할 ‘중요 어휘’와 스타일 시트를 만들

기 위한 요점을 파악하여, 실제 웹페이지에 적용해 보겠습니다.

> 파트 3. 원어민처럼 말하기

간단한 웹페이지 디자인을 가지고 실무에서 반드시 사용하게

될 내용들을 집중 탐구해 보겠습니다.

> 부록

총 3개의 파트에서 사용된 모든 소스 코드와 함께 CSS에서 사

용하는 폰트, 색상 값, 그리고 인터넷 익스플로러(IE) 버그를 잡

기 위한 ‘해결법’을 담고 있습니다.

xxi

코드 읽기

가능하면 예제 코드를 최대한 간단하게 만들어서 소스코드와 결과가 한 페이지

에서 보이도록 했습니다. 다시 말하면, 소스 코드의 일부만 보여지는 페이지도 있

다는 의미입니다.

소스 코드는 다음의 색상으로 보여집니다.

코드 안에 있는 콘텐츠

HTML 코드

CSS 코드

자바 스크립트 코드

코드의 길이가 좀 길어지면, 각 줄에 숫자를 넣었습니다.

01 <style type="text/css" media="all">02 h1 { color: red; }03 </style>

텍스트 안에 있는 코드 참고표는 (01-03) 이런 모습이고, 코드는 항상 같은 페이

지나 페이지의 오른쪽에 위치합니다.

브라우저 약어와 버전

이름 약어 버전

인터넷 익스플로러(Internet Explorer) IE 6, 7, 8

파이어폭스(Firefox) FF 3, 4

사파리(Safari) Sa 3, 4

오페라(Opera) Op 8, 9, 10

크롬(Chrome) Ch 1, 2

웹페이지를 구성하고 있는 세 가지 핵심 요소와 웹페이지를 만드는 데 필요한 도구들을 알아

보고, 웹페이지에 대한 오해들을 샅샅이 파헤쳐 봅니다.

PART 1

1 웹페이지는 무엇일까요?

1 7 웹 디자이너의 도구 상자

3 5 CSS에 대한 오해들

웹의 첫걸음

Chapter 1웹페이지는 무엇일까요?

어떤 웹페이지이든 상관없이 아무 웹페이지나 한번 살펴보세요.

가만히 살펴보면 HTML, CSS, 자바스크립트 이렇게 세 가지 종류의 코드 조

합으로 이루어진 것을 알게 될 것입니다. 여러분의 컴퓨터(클라이언트)와 페이지

에 대한 정보를 가지고 있는 컴퓨터(서버) 사이에서 어떤 일이 일어나든지 간에,

브라우저는 이 세 가지 기술을 조합하여 화면상에 콘텐츠(텍스트, 이미지, 비디

오, 애니메이션)들을 보여줍니다.

대부분의 디자이너들은 그렇게 생각하기 어렵겠지만, 웹페이지는 코드에 더

가깝습니다. 코드를 전혀 볼 수 없는 포토샵이나 일러스트레이터와는 다르게, 웹

페이지에는 우리가 추가하고 싶은 시각적인 요소들을 코드로 마음대로 넣을 수

도 있고 뺄 수도 있습니다.

2

웹의 첫걸음

웹페이지는 무엇일까요?

ASP, PHP, MySQL, 파이썬, 자바 등 웹페이지 개발에 사용되는 서버 측 언어

와는 상관없이, 브라우저가 화면에 보여주는 내용은 이들 세 가지 웹 기술을

이용하여 보여줍니다.

HTML은 구조를 만들어 줍니다. 그래서 웹페이지에 있는 각 요소를 브라우

저에게 전달해 줍니다. 콘텐츠를 구성하고 있는 각각의 HTML ‘태그’는 그것

이 헤드라인인지, 문단인지, 이미지인지, 표인지 구분하는 역할을 합니다. 엄밀

히 말하면, HTML은 브라우저에게 요소가 어떻게 보여져야 하는지는 알려주

지 않습니다. 해당 요소가 무엇인지를 정의합니다.

CSS는 표현을 만들어 줍니다. 브라우저에게 화면에서 어떻게 보여야 하는

지를 알려줍니다. CSS는 색상, 폰트, 사이즈, 레이아웃 등 페이지에서 시각적

으로 보여지는 부분에 대한 거의 모든 것을 컨트롤합니다.

자바스크립트는 기능을 만들어 줍니다. 그래서 웹페이지가 로딩된 후, 사용

자와 상호작용할 수 있도록 해줍니다. 자바스크립트는 간단한 드롭다운(drop-

down) 메뉴에서부터 복잡한 기능을 가지고 있는 웹에서 가능한 거의 모든 기

능을 만들 수 있도록 해줍니다.

HTML, 자바스크립트, 그리고 CSS

Speaking in Styles

speaking- in-sty les.com

책에 있는 내용보다 더 많은 내용을 접할 수 있습니다.

웹 디자인에 대한 새로운 소식이나 아이디어를 얻어보세요.

3

DOCUMENT

HTML CSS표현구조

기능

JavaScript

4

웹의 첫걸음

웹페이지는 무엇일까요?

DOM이란 무엇일까요?

하나의 웹 문서는 HTML로 만들어진 서로 다른 객체들의 조합이고, 문서객체모

델(Document Object Model, DOM)이라 불리는 것으로 표현됩니다. DOM이라는

말이 조금 이상하게 들릴지 모르지만, 어떤 것의 구조를 간단하게 보여주는 모델

로서, 문서의 일부를 객체로 표현하여 구조를 보여줍니다. 그래서 지도를 구성하

는 많은 조각들처럼 여러분이 마크업한 웹페이지의 모든 요소가 DOM의 모델입

니다. DOM은 웹페이지 자체를 의미하는 것은 아니지만, 마치 지도처럼 페이지

가 어떻게 구성되는지 표현해 줌으로써 웹페이지의 구조를 생각해 볼 수 있게 해

줍니다.

웹 기술의 핵심을 이루고 있는 이 세 가지 기술들은 각자의 역할을 하고 있습

니다.

HTML은 객체를 정의합니다. 각각의 HTML 태그를 이용하여, 페이지에 고유

한 객체를 생성하고, CSS가 스타일을 입히고, 자바스크립트가 동작을 제어합니

다. 예를 들면 헤더는 객체이고, 문단도 객체이며, 이미지

도 객체입니다.

CSS는 객체에 스타일을 입힙니다. 개별적인 HTML

태그에 스타일을 입히거나, 각 객체에 ID라고 하는 고유

한 이름을 지정하여, 그룹으로 묶어 스타일을 지정할 수

도 있습니다.

자바스크립트는 객체에 동작을 부여합니다. HTML

태그로 만들어진 객체에 변화를 줄 수 있습니다. 예를 들

어 객체를 보이게 하거나, 숨기거나, 색상을 변화시킬 수

있습니다.

플래시는 어떤가요?

웹 콘텐츠를 랜더링하기 위해 자주 사용되는 기술 중

의 하나가 어도비에서 만든 플래시입니다. 플래시를

사용하여 만들어진 .fla 파일은 브라우저의 플러그인

을 통해 랜더링됩니다. 하지만, 보이지 않는 화면 뒷

단에서 플래시 파일은 HTML을 이용하여 페이지에

삽입되고 CSS로 스타일을 지정할 수 있습니다. 이

책에서 플래시에 대해 알아보고, CSS를 이용하여 멋

지게 스타일을 지정하는 방법을 알아보겠습니다. 하

지만 먼저 나머지 핵심 기술들을 먼저 익혀야겠지요.

HTML, 자바스크립트, 그리고 CSS continued

5

DOMDocument Object Model

HTML CSS

JavaScript

객체 정의 객체에 스타일 추가

객체에 동작 부여

6

웹의 첫걸음

웹페이지는 무엇일까요?

하이퍼 텍스트 마크업 언어(Hypertext Markup Language, HTML)는 서로 다른 여

러 태그를 입력해서 웹페이지의 구조를 만들어 브라우저에게 무엇이 각각의 콘

텐츠 영역인지 알려줍니다. 그러면 CSS는 브라우저에게 각각의 콘텐츠 영역이 어

떻게 보여져야 하는지 알려줍니다.

페이지 안에 있는 서로 다른 요소는 기능에 따라 간단하게 태그로 표시됩니다.

문단을 나타내면 <p>…</p>, 표를 나타내면 <table>…..</table>로, 목록을 나타

내면 <li>….</li>, 페이지의 헤드라인을 나타내면 <h1>…</h1> 로 말입니다. 대

부분의 HTML 코드는 태그의 시작임을 알리는 ‘여는 태그’와 끝을 알리는 ‘닫는

태그’로 구성됩니다. 일반적인 헤드라인 태그는 다음과 같은 모습입니다.

<h1>Welcome</h1>

눈치챘는지 모르겠지만, 헤드라인은 페이지 안에서 다른 요소들과 쉽게 구별

될 수 있도록 위쪽과 아래쪽에 여백 영역을 포함하고 있습니다. 이러한 태그를

블록 요소(block element)라고 부릅니다. 이렇게 하나의 요소가 페이지에 정의되

어 있으면, CSS도 함께 따라다니면서, 사용된 폰트

패밀리, 텍스트에 지정된 색상, 마진, 테두리선, 패딩,

크기 등 헤드라인이 어떻게 보여야 하는지를 이야기

해주게 됩니다. 텍스트 색상을 빨간색으로 하고 싶다

면 다음과 같은 코드를 추가하면 됩니다.

h1 { color:red }

심지어 헤드라인이 위쪽과 아래쪽에 영역을 차지하

는 것을 막기 위해서 인라인 요소(inline element)로

도 변경할 수 있습니다.

HTML과 CSS

브라우저 상속 스타일들

CSS가 페이지에 스타일을 입히는 용도로 사용되지만,

HTML 태그들도 자신만의 고유한 스타일을 가지고 있습니

다. 예를 들면, 첫 번째 헤드라인(h1) 태그는 위아래로 여백

을 가지고 있을 뿐만 아니라, 텍스트가 두껍고, 크게 보여

집니다. 헤드라인 태그는 원래부터 두껍게 보여져야 한다

는 법칙 같은 건 없습니다. 단지, 브라우저 자체에서 해당

태그의 기본적인 스타일을 상속받을 수 있도록 되어 있는

것입니다. 대부분의 HTML 태그는 연관된 태그들끼리 상속

되거나 태그 자체의 기본 스타일을 가지고 있습니다. 하지

만, CSS는 여러분이 원하는 스타일대로 작업하여 이런 브

라우저 상속 스타일들을 바꾸어 줄 수 있도록 해줍니다.

7

HTML<h1> Welcome</h1>

CSS

h1 { color : red; }

8

웹의 첫걸음

웹페이지는 무엇일까요?

CSS의 시작

1990년대 초반에 팀 버너스 리(Tim Berners-Lee)라는 사람이 하이퍼 텍스트 마크업 언어

(HTML)를 개발했습니다. 그는 텍스트에 밑줄을 긋거나, 두껍게 하거나, 이탤릭체로 보이게

하는 기본적인 스타일을 이용한 자신의 연구 논문을 서로 연결하여 웹 문서의 형태로 만들어

인터넷에 보이게 했습니다. 처음에 그가 원했던 것은 텍스트들이 보이고, 연관된 내용들은 서

로 연결이 되도록 하는 것이었지만, 곧바로 차트나 그래프, 사진 같은 것들도 보여 줄 필요가

있다고 생각하게 되었습니다. 그래서 페이지 안에 이미지를 보여줄 수 있는 기능이 추가된 최

초의 그래픽 기반 브라우저가 나왔습니다. 바로 모자익입니다.

원래 HTML 문서 안에서 사용되는 태그들은 문서의 구조를 설정할 뿐만 아니라 텍스트를 두

껍게 하거나(<b>…</b>) 이탤릭체로 설정(<i>…</i>)하는 등의 스타일도 추가했었습니다. 이

말은 표현을 하기 위한 스타일이 구조를 위한 HTML에 종속되어 디자인의 효율적인 변경이

어려웠다는 것을 의미합니다.

문서에 스타일을 지정하는 더 많은 태그들이 생겨났지만, 곧 스타일과 구조를 함께 가지고 있

는 것이 별로 쓸모없다는 것을 깨닫게 됩니다. 호콘 비움 리(Håkon Wium Lie)와 버트 보스

(Bert Bos)는 스타일 시트라 불리는 기존에 있던 기술을 이용하여 디자이너들이 HTML 태그

와 스타일을 조정할 수 있도록 해 주었습니다. 이렇게 해서 CSS가 태어나게 되었습니다.

9

A l l o f U s

al lofus.com

디자인 컨설턴트 업체인 AllofUs는 약간의 CSS와 HTML

을 이용하여 심플하지만 고급스런 디자인 포트폴리오를 구

축했습니다.

10

웹의 첫걸음

웹페이지는 무엇일까요?

자바스크립트는 웹페이지에 생명력을 불어 넣어, 어느 시점에 어떤 액션을 실행

해야 하는지 브라우저에게 말해줍니다. 페이지가 처음 로딩되어 보여지는 모습

을 CSS가 설정하면, 자바스크립트로 그것을 변경할 수 있습니다.

스크립트는 주로 메뉴를 보여주거나, 폼 데이터들이 올바르게 들어갔는지를

체크하는 것과 같은 사용자의 상호작용으로 인해 발생되는 페이지 요소의 제어

에 사용됩니다. 하지만, 자바스크립트가 할 수 있는 능력이 해를 거듭할수록 늘

어나서 이제는 고급스러운 웹 기반 애플리케이션도 만들 수 있습니다.

자바스크립트는 CSS 값을 변경하여 HTML 태그로 만들어진 화면상에 있

는 요소를 제어하기 위해 DOM을 이용합니다. 예를 들면, 첫 번째 헤드라인

(<h1>…</h1>)의 색상을 빨간색으로 바꾸기 위해서 아래와 같이 설정해 줄 수 있

습니다.

h1 { color:rgb(255,0,0); }

많은 사이트들이 사용자가 보고 있는 동안 직접 사이트의 색상 계열을 선택할

수 있도록 하고 있습니다. 자바스크립트를 이용하면 색상 속성을 자유자재로 변

경할 수 있습니다.

object.style.color=rgb(153,51,41);

위의 코드에서 변수 object는 우리가 스타일을 변경하고자 하는 객체를 의미

합니다. 이 객체는<h1> 태그의 DOM 경로로부터 얻어낸 것입니다. 객체를 찾기

위한 전체 자바스크립트 코드는 다음과 같습니다.

object=document.getElementsByTagName(‘h1’);

이 코드는 자바스크립트가 문서에 있는 h1 태그들을 찾아서 그들의 스타일을

변경할 수 있도록 해줍니다. 페이지상에서 객체를 찾아서 변경할 수 있는 여러

가지 방법들이 있지만, 이 책은 자바스크립트 책이 아니라 CSS 책이기 때문에,

자바스크립트는 이 정도로 마무리하겠습니다

자바스크립트와 CSS

11

CSS

h1 { color: rgb(255,0,0); }

JavaScript

object.style.color=rgb(153,51,41)

12

웹의 첫걸음

웹페이지는 무엇일까요?

자바스크립트 코드를 알자!

일반적으로, 디자이너들이 자바스크립트 코드를 보거나 직접 만들어야 하는 경우는 상당

히 드뭅니다. 하지만, 혹시 사용자 경험이 고려된 작업을 계획하고 있다면, 자바스크립트

에서 파생되어 나온 유명한 프레임워크의 이름을 알고 있듯, 자바스크립트로 어떤 작업이

가능한지에 대한 최소한의 지식만 알아도 상당히 유용할 것이라 생각됩니다.

다이나믹 HTML이나 DHTML은 페이지가 로딩되고 난 뒤에 HTML과 CSS를 제어할 수

있는 자바스크립트를 말합니다. 여기에는 스타일을 변경하거나, 메뉴와 팝업 같은 움직이

는 요소, 슬라이드나 점점 사라지는 것과 같은 특별한 효과들이 포함됩니다.

Ajax(Asynchronous JavaScript and XML)는 자바스크립트를 이용해 전체 페이지가 다시

로딩되지 않고도 페이지와 서버 간의 정보를 주고 받을 수 있도록 하는 데 사용됩니다. 이

는 데이터를 한꺼번에 로딩하지 않고도 사용자가 많은 양의 데이터를 주고 받을 수 있도

록 해줍니다.

JSON(JavaScript Object Notation)은 자바스크립트에게 쉽고 빠르게 데이터를 전달해줄

수 있는데, XML 형식의 데이터보다 이해하고 사용하기 쉽습니다.

Mootools, jQuery 그리고 Dojo 툴킷은 움직이는 메뉴, 캘린더, 사라지는 효과, 애니메이

션과 같은 동작이나 효과를 만드는 데 시간이 걸리는 기능들을 모아 제공해주는 자바스

크립트 라이브러리 입니다. 비록 서로 겹치는 기능들도 있긴 하지만, 이러한 라이브러리는

모두 저마다의 장점과 단점을 가지고 있고, 웹 개발 커뮤니티를 중심으로 많은 사용자들

이 있습니다. 이러한 라이브러리의 또 다른 장점 중의 하나는 자바스크립트와 관련된 여

러 크로스 브라우징1 문제들을 제거했다는 것입니다. 여러분의 웹사이트를 만들고자 한다

면, 이러한 라이브러리의 사용을 적극 권장해 드립니다.

1　 (역주) 크로스 브라우징 - 특정 브라우저에만 최적화되어 출력되지 않고, 다양한 브라우저를 지

원하여 웹사이트의 정보 제공에 차별이 없도록 하는 것을 말한다. 하지만 모든 웹브라우저에서

100% 똑같은 모습으로 보이도록 만드는 것은 크로스 브라우징에 대한 오해이다.

13

K r i s t a ’ s C r e a t i o n s a t L e t t e r -P h o t o

letter -photo.com

Krista’s Creations 사이트는 자바스크립트와

CSS를 이용해 만든 간단한 드래그앤드롭 인터페

이스를 사용할 수 있으며, 사진을 이용해 만든 문

자를 배열하여 멋진 글을 쓸 수 있습니다.

14

웹의 첫걸음

웹페이지는 무엇일까요?

아직 많은 논의가 진행되고 있지는 않지만, 플래시 파일에도 CSS를 적용하여 스

타일을 정의할 수 있습니다. 예를 들면 별도의 CSS 파일을 만들어 액션 스크립

트 안에서 로딩되도록 설정하여, 주로 텍스트의 스타일 제어에 사용할 수도 있습

니다.

HTML에 적용된 CSS와 마찬가지로 플래시에 CSS를 이용하면 시간을 절약

할 수 있습니다. 실제로 일어났던 상황인데, 사이트 론칭 이틀 전에 클라이언트

가 일방적으로 녹색의 하이퍼링크 색상을 원하지 않는다며 바꾸어 달라고 하는

경우에 CSS를 이용하면 상당히 유용합니다. CSS를 이용하여 코드 한 줄만 수정

하면 전체 사이트에 새로운 색상을 적용할 수 있습니다.

CSS와 플래시의 조합으로 작업하는 것은 정말 멋진 작업이 되겠지만, XML

형태의 데이터에 스타일을 적용해 주어야 합니다. XML은 독자적인 나만의 태그

를 만들어 주고, CSS는 이렇게 만든 태그들에 자연스럽게 스타일을 적용할 수 있

도록 해줍니다.

플래시와 CSS

C a u s e c a s t

causecast .com

소셜 네트워킹 사이트인 Causecast는 비디오 영역과 비디오

를 제어할 수 있는 인터페이스에 플래시를 사용하였습니다.

하지만 사이트의 나머지 부분은 HTML, CSS 그리고 자바스

크립트를 사용했습니다.

15

Chapter 2웹 디자이너의 도구 상자

모든 아티스트들은 스스로 잘 알고 의지할 수 있는 자신만의 비법이 담긴 도구

상자를 가지고 있습니다. 조각가는 최고의 조각 칼을 선택하고, 화가는 최고의

붓을 선택합니다. 멋진 글씨를 쓰는 사람은 최고로 좋은 펜을 선택합니다. 이와

마찬가지로 웹 디자이너들에게도 그들의 멋진 디자인뿐만 아니라 그 디자인을

보여주는 매체인 웹 브라우저에서도 마음대로 조작할 수 있는 최고의 도구들이

필요합니다. 여러분이 선택한 도구는 여러분을 더 훌륭한 디자이너로 만들어주

지는 못하지만, 그것을 잘 활용하면 더 멋진 디자인을 만들 수 있도록 도와줄 수

있습니다.

18

웹의 첫걸음

웹 디자이너의 도구 상자

웹 서핑을 할 때 어떤 웹 브라우저를 사용하나요? 어떤 사람들은 특별히 더 좋아

하는 브라우저가 있습니다. 또 어떤 사람들은 그들이 하는 일에 맞는 브라우저를

선택합니다. 나머지 대부분의 사람들은 단순하게 컴퓨터에 설치되어 있는 기본

브라우저를 사용하며 어떤 옵션들이 존재하는지 전혀 알지 못합니다. 여러분이

개인적으로 더 좋아하는 것과 상관없이, 여러분이 작업한 디자인은 대부분의 현

재 사용되고 있는 브라우저에서 보이도록 작업할 필요가 있습니다. 그러기 위해

서는 새로운 버전의 브라우저가 출시되면, 이전 버전의 브라우저들은 마법 같이

사라져줘야 하는데 그러지 못하기 때문에, 여러분은 이런 과거의 유산으로 남겨

진 브라우저들도 테스트해야 합니다.

마이크로소프트의 인터넷 익스플로러는 웹 브라우저 시장에서 약 70%의 시

장 점유율을 가지고 있는 논쟁의 여지없이 가장 많이 사용되고 있는 브라우저입

니다. 비록 지역과 사용자에 따라 약간의 차이는 있을 수 있겠지만요. 예를 들면

디자이너들은 일반 사용자들에 비해 맥(Mac)의 사용 비중이 높은데, 맥은 최신

버전의 인터넷 익스플로러를 지원하고 있지 않습니다. 따라서, 맥을 사용하는 디

자이너들은 사파리나 파이어폭스 같은 브라우저들을 더 많이 사용하는 경향이

있습니다.

현재 사용되고 있는 모든 최신 브라우저들은 CSS를 지원합니다. 하지만, 모든

브라우저에서 똑같이 지원되는 것은 아닙니다. 이 책을 통해 브라우저들이 가지

고 있지 못한 기능이나, 이전에 논의되었던 특정 기능에서 발생되고 있는 결함에

대한 이야기를 해볼까 합니다.

가장 먼저 현재 많이 사용되고 있는 4개의 브라우저에 대해서 간단하게 알아

보겠습니다.

웹 브라우저

Panic Software

panic.com

Panic Software는 정말 괜

찮은 웹 도구들을 소개해 줍

니다.

19

브라우저마다 다르게 보

인다

하나의 웹페이지가 4개(IE6,

FF3, Sa4, Op9)의 웹 브라우

저에서 다르게 보입니다. 특

히 IE6에서 많이 이상하게 보

이는데, IE6의 이러한 잘못된

점들이 많이 개선이 되어 후

속 버전인 IE7에서는 많은 문

제점들이 보완되었습니다.

20

웹의 첫걸음

웹 디자이너의 도구 상자

인터넷 익스플로러 (Internet Explorer, IE)

꽤 오랜 시간 동안 인터넷 익스플로러는 최고 90%에 달하는 높은 점유율로 웹

브라우저 시장을 독식하고 있었습니다. 불행하게도 IE6은 출시되었을 때, 몇 가

지 결함을 가지고 있었는데, 그것은 중요한 몇 가지 특징들이 제외된 것과, CSS의

어떤 속성들을 잘못 해석하도록 만들어졌다는 것입니다. 비록 IE7은 CSS 표준

을 적용하려고 오랜 시간 동안 노력했지만, 여전히 몇 가지 이슈는 해결되지 못했

고, 여전히 IE6도 건재합니다. 하지만, 그나마 반가운 소식은 IE6의 시장점유율

이 점점 떨어져 이제는 전 세계적으로 점유율이 15~20% 정도이며, IE8은 현재

사용되고 있는 CSS(v2.1)까지 완벽하게 지원한다는 사실입니다.(2009년 현재)

파이어폭스 (Firefox, FF)여러분이 웹페이지를 만들어가면서 테스트하는 브라우저는 파이어폭스를 기본

으로 하라고 권장하고 싶습니다. 앞으로 다가올 CSS 표준(v3.0)을 포함해서, 현

재 CSS 표준(v2.1)을 거의 완벽히 지원하고 있고, 두 번째로 많이 사용(22%의 시

장점유율, 2009년 현재)되고 있는 브라우저이고, CSS 작업을 도와줄 수 있는 부

가기능도 설치할 수 있도록 해줍니다. 만약 여러분의 디자인이 파이어폭스에서

제대로 보인다면, 사파리나, 오페라에서도 거의 똑같이 보일 것이고, IE7과 IE8

에서는 대부분 똑같이 보일 것이지만, IE6에서는 추가적인 작업이 필요할 것입

니다.

웹 브라우저 continued

21

사파리 (Safari, Sa)모든 맥(Mac)의 기본 브라우저가 사파리인 이유로, 많은 디자이너들이 사파리에

서 작업할 것입니다. 사파리4 버전은 CSS 표준을 거의 완벽하게 지원합니다. 이

는 현재 표준으로 사용되고 있는 버전(v2.1) 뿐만 아니라, 아직 개발단계에 있는

버전(v3.0)도 부분적으로 지원하고 있습니다. 이 말은 현재 나와 있는 다른 브라

우저들에서는 아직 지원하고 있지 않은 기능들을 사용해 볼 수 있다는 의미이기

때문에, 한편으로는 장점이기도 하지만 불리한 측면도 있을 수 있습니다.

오페라 (Opera, Op)그냥 쉽게 지나쳐버리는 브라우저 중의 하나가 오페라인데, 오페라 브라우저는

여러분이 생각하고 있는 것보다 훨씬 더 인지도 있는 브라우저입니다. 많은 유럽

의 국가들이 모바일 장치에 사용하고 있고, Sony는 플레이 스테이션에 오페라 브

라우저를 장착했습니다. 오페라9 버전은 CSS 표준을 사파리4와 거의 같은 수준

으로 지원하지만, 다른 브라우저에 비해 특별히 뛰어난 기능을 가지고 있지는 않

습니다. 최신 버전의 오페라 브라우저가 아직 없다면, 한번 다운로드해 보세요.

무료로 다운로드할 수 있습니다.

22

웹의 첫걸음

웹 디자이너의 도구 상자

다른 브라우저들도 있습니다!

웹서핑을 하는 사람들의 99.3%가 앞서 이야기한 4개의 브라

우저 중 하나를 사용하고 있겠지만, 나머지 사용자들은 다른

브라우저들을 사용하기도 합니다. 하지만 걱정하지 마십시오.

이들 나머지 대부분의 브라우저들은 인터넷 익스플로러, 파이

어폭스, 사파리, 오페라와 동일한 레이아웃을 보여주는 엔진

을 기반으로 하고 있기 때문에, 같은 방식으로 페이지를 랜더

링해 줍니다. 다음 페이지에 있는 표에서 다양한 브라우저들

에서 사용되고 있는 엔진을 살펴보겠습니다.

크로스오버를 이용해 맥(Mac)에서 인터넷 익스플로러 6 테스트하기

맥을 사용하면서 가장 하기 어려운 작업 중의 하나가 여러분이 작업한 디자인을

IE6에서 어떻게 테스트를 해볼 것인가 하는 것입니다. IE6은 윈도우즈 운영체제

에서만 작동하기 때문이지요. 이 문제를 해결하기 위한 가장 좋은 방법은 여러분

의 컴퓨터에 따로 윈도우즈 운영체제를 설치하지 않고 바로 다양한 윈도우즈 응

용 프로그램들을 실행할 수 있게 해주는 크로스오버(Crossover)라 불리는 프로

그램을 이용하는 것입니다. 현재 IE7과 IE8은 지원하지 않고 있지만1, 이 두 브라

우저는 IE6보다 페이지 랜더링이 훨씬 개선되었습니다.

1　(옮긴이) 2010년 5월 현재, IE7 지원

웹 브라우저 continued

23

레이아웃 엔진 :

브라우저 뚜껑 아래에 장착된 엔진

브라우저가 자동차를 움직이게 해주는 엔진이라고 생각해 보세요. 여러분은 자

동차에 있는 엔진을 꺼내서 또 다른 엔진(심지어 다른 모델)을 장착할 수 있을 것

입니다. 브라우저도 마찬가지로 웹페이지가 브라우저에서 어떻게 보여야 하는지

를 결정해주는 랜더링 엔진이라고도 불리는 레이아웃 엔진이 장착되어 있습니

다. 비록 레이아웃 엔진이 다르더라도, 많은 브라우저들이 서로 다른 인터페이스

를 가지고 있는 동일한 엔진을 사용합니다.

예를 들면, 파이어폭스에는 오픈소스 랜더링 엔진인 게코(Geko)가 장착되어

있고, 카미노(Camino), 네스케이프(Netsape), 플록(Flock)도 마찬가지입니다. 이

들 브라우저의 겉모습은 각자에 맞는 인터페이스를 가지고 있지만 동일한 랜더

링 엔진이 장착되어 있습니다. 동일한 랜더링 엔진이 장착된 모든 브라우저들은

같은 방식으로 웹페이지를 보여주게 됩니다. 어떤 버전의 랜더링 엔진이 장착되었

고, 어떤 식으로 튜닝되었는지에 따라 미세한 차이가 있을 수 있습니다. 마치 세

상에 단 하나만 존재하는 튜닝된 엔진을 장착한 자동차처럼 말입니다.

엔진이름 브라우저

게코(Gecko) 파이어폭스, 카미노, 네스케이프, 플록

트라이덴트(Trident) 인터넷 익스플로러, AOL 익스플로러, MSN 익스플로러, 리얼 플레이어

(RealPlayer)

KHTML과 웹킷 사파리, 구글 크롬,

프레스토(Presto) 오페라, 닌텐도 DS 브라우저, 인터넷 채널(Wii)

자바 Lobo, 오페라 미니

24

웹의 첫걸음

웹 디자이너의 도구 상자

파이어폭스는 맥, 윈도우즈, 유닉스/리눅스 등 모든 운영체제에서 사용할 수 있

고, 강력한 웹표준 준수율을 자랑하며, 두 번째로 많이 사용되는 브라우저일 뿐

만 아니라, 다양한 종류의 부가기능 프로그램들을 브라우저에 설치할 수 있습니

다. 이런 부가기능들은 브라우저의 능력을 확장시켜, 파이어폭스를 최고의 웹 개

발 브라우저로 만들었습니다. 멋진 부가기능 몇 가지를 소개하겠습니다.

Firebugaddons.mozi l la .org/fi refox/1843

파이어폭스로 웹사이트 개발을 진행하는 사람이라면 파이어버그는 정말 꼭 필

요한 도구입니다. 이 파이어버그가 해줄 수 있는 것들은 아래와 같습니다

▒ 브라우저 화면에 보이는 HTML, CSS, 그리고 자바스크립트를 직접 보여주고, 임시적으로 수정도 할 수 있습니다.

▒ 사용자가 선택하는 영역을 눈에 잘 띄게 표시해주며 그 선택 영역에 적용된 스타일과 전체 콘텐츠를 보여줍니다.

▒ 웹페이지 로딩시간이 얼마나 걸리는지 요소별로 보여주고, 여러분의 디자인에서 어떤 부분이 병목현상을 발생시키는지 보여줍니다.

Colorzillaaddons.mozi l la .org/fi refox/271

웹 브라우저에서 보이는 어떤 픽셀이라도 색상을 추출하여, hex 값과 RGB 값 두

가지의 형식으로 보여줍니다. 간단하게 점안기를 선택하여 픽셀을 클릭합니다.

그러면, 클릭영역의 색상 코드를 복사해서 여러분이 넣고자 하는 다른 프로그램

에 붙여 넣을 수 있습니다.

파이어폭스의 부가기능

25

HTML 코드 CSS 코드

선택된 요소

파이어폭스에 있는 파이어버그

파이어버그를 이용하면, 페이지를 구성하고 있는 HTML과 CSS 코드를 검사해 볼 수 있으며,

일시적으로 코드를 다른 값들로 변경해 넣어볼 수 있습니다.

26

웹의 첫걸음

웹 디자이너의 도구 상자

파이어폭스의 부가기능 continued

Palette Grabberaddons.mozi l la .org/fi refox/2290

Palette Grabber를 이용하면 웹사이트 CSS에 지정되어 있지 않은 색상 값을 측

정해서 작업할 때 사용하는 포토샵이나 다른 프로그램의 팔레트에 추가할 수 있

습니다. 한 번 클릭하여 하나의 팔레트를 저장할 수 있는데, 여러분이 사용하는

이미지 편집 프로그램에서 팔레트를 불러서 사용할 수 있습니다.

MeasureItaddons.mozi l la .org/fi refox/539

화면상에 보이는 것을 측정해서 정확한 길이 값이 필요한 경우가 다 있을 것입니

다. 혹은 두 개의 객체가 서로 정렬이 맞지 않았을 때, 얼만큼 위치를 이동해야 하

는지 잘 모를 때도 있습니다. 이럴 때 MeasureIt을 사용하면 됩니다. 아이콘을 클

릭하여 측정하고자 하는 영역의 너비와 높이를 선택하면, MeasureIt은 픽셀로

그 영역을 보여주고, 정확히 측정하였을 때, 할 수 있는 다른 설정도 해줄 수 있습

니다.

Pixel Perfectaddons.mozi l la .org/fi refox/7943

여러분의 이미지 작업물과 실제 작업된 사이트를 정확하게 맞추고 싶다면, Pixel

Perfect가 필요할 것입니다. 이것은 파이어버그에 추가할 수 있는 부가기능으로

써, 여러분의 이미지 작업물의 JPG 파일을 로드하여, 실제 웹페이지에 투명하게

얹어봄으로써 디자인 작업물과 실제 사이트를 비교할 수 있는 프로그램입니다.

27

파이어폭스 부가 기능

addons.mozi l la .org

파이어폭스에 추가할 수 있는 많은 부가 기능들의 있습니다. 혹시 여러분이 필요하다고 생각

하는 것들이 있다면, 아마 그것은 파이어폭스의 부가기능에서 찾을 수 있을 것입니다.

28

웹의 첫걸음

웹 디자이너의 도구 상자

코드 에디터

글을 쓰기 위해 워드 프로세서를 사용하거나, 그림을 그리기 위해 일러스트레이

션 프로그램을 사용하는 것처럼, 프로그램 코드 작업을 위해서는 웹 개발 프로

그램이 필요합니다.

좋은 코드 에디터는

▒ 필요할 때 코드 제안사항(code hinting)을 제공하면서 문서를 편집하고 체계화할 수 있고,

▒ 다양한 여러 브라우저를 확인해 보지 않고도 문서의 미리보기를 제공

하고,

▒ 함께 작업한 문서를 다운로드, 업로드를 할 수 있고,

▒ 여러분의 코드를 분석하여 최적화할 수 있는 에디터입니다.

CodaMacpanic.com/coda/

coda는 필자가 언제나 가장 먼저 사용하는 프로그램입니다. coda(Panic Soft-

ware)는 통합된 FTP 프로그램을 가지고 있어서 쉽게 파일을 업로드하거나 다운

로드할 수 있습니다. CSS 작성 도구는 코드에 직접 작업하거나 디자이너에게 친

숙한 인터페이스를 이용하여 사용할 수 있게 해줍니다.

29

TopStyleWindowsnewsgator.com/indiv iduals/topsty le

만약 여러분이 PC에서 윈도우즈 운영체제를 사용하고 있다면 TopStyle이 Coda

와 비슷할 것입니다.

CSSEditMacmacrabbit .com/cssedit/

여러분이 HTML이나 자바스크립트 말고 오직 CSS 작업에만 흥미가 있는 디자

이너라면, CSSEdit는 여러분이 원하는 모든 것을 가능하게 해줍니다. 이 프로그

램에는 기존에 있는 웹사이트의 CSS를 분석하는 강화된 도구가 포함되어 있습

니다.

DreamweaverWindows and Macadobe.com/dreamweaver

드림위버는 어도비 소프트웨어의 패키지에 포함되어 있는 프로그램으로, 많은

디자이너들이 기본적으로 선택합니다. 코드 편집의 모든 것을 할 수 있기 때문

에, 드림위버는 좀 더 많은 기능들을 담고 있지만, 더 많은 기능들은 오히려 사용

하기 더 어렵게 만들기도 합니다.

30

웹의 첫걸음

웹 디자이너의 도구 상자

온라인에서 사용할 수 있는 도구들

일반적으로 애플리케이션이라고 하는 것은 하드디스크에 있거나, 다운로드해서

컴퓨터에 설치하여 사용한다고 생각합니다. 하지만, 손쉬운 다운로드로 별도의

설치과정 없이 웹에서 사용할 수 있는 애플리케이션들이 늘어나고 있습니다. 데

스크톱에 설치되어 있지 않고, 온라인으로 사용하는 훌륭한 도구들이 몇 가지

있습니다. 웹사이트와 웹 애플리케이션(혹은 웹 앱스)의 경계가 점점 더 모호해

지고 있습니다. 웹사이트에서 하는 것과 같이 웹 브라우저와 URL을 이용하여

웹 앱스에서도 얻을 수 있지만, 웹 앱스는 기존의 데스크톱 방식의 애플리케이션

들에서나 기대할 수 있는 다양한 기능들을 제공하고 있습니다.

ColorJack과 어도비 Kulercolor jack .com kuler.adobe.com

모든 디자이너들이 색상을 다룹니다. 서로 잘 조합되어 작업할 수 있는 색상의

팔레트를 정의하는 것은 쉬운 일이 아닙니다. ColorJack과 어도비 Kuler는 색상

팔레트를 넣어, 색채이론을 바탕으로 한 최고의 색상 조합을 얻을 수 있는 애플

리케이션입니다. 여러분은 포토샵이나 일러스트레이터 같은 이미지 편집 프로그

램에서 그 색상 조합 결과를 저장하여 사용할 수 있습니다.

31

32

웹의 첫걸음

웹 디자이너의 도구 상자

Typetestertypetester.org

웹에서 멋진 타이포그라피를 보여준다는 건 조금 모순적이긴 하지만, 상황은 점

점 좋아지고 있습니다. Typetester는 폰트 서체들이 크기, 굵기, 스타일에 따라 어

떻게 다른지를 보여줍니다. 여러분의 컴퓨터에 설치되어 있는 폰트 리스트에서

웹에서 사용되는 폰트를 선택하면 바로 아래에 결과가 보이게 됩니다.

SUMO Paintsumopaint .com

여러분이 디자이너라면, 이미 포토샵, 파이어웍스, 일러스트레이터 같은 이미지

편집 프로그램들을 사용하고 있을 것입니다. 이러한 프로그램들은 가격이 비싸

지만, 웹에서 사용할 수 있는 작업들을 가능하게 해줍니다. SUMO Paint는 포토

샵 인터페이스와 비슷한데, 레이어가 있는 비트맵 이미지를 만들고 편집할 수 있

게 해줍니다. 여러분이 경제적으로 좀 힘들다면, 이 프로그램은 여러분이 찾고

있는 프로그램일 것입니다. 비록 몇 가지 기능들은 제한적이지만, 여러분이 원하

는 웹그래픽을 만들기 위한 기본적인 기능들은 다 가지고 있습니다.

온라인에서 사용할 수 있는 도구들 continued

33