서문 ... 1 하나의 방법으로 모든 문제를 해결할 수 없다 ... 2 이론과 실제 ... 3 유연성 없는 규칙이 아닌 하나의 연속체 ... 4 팔려고 하지 말고 보여주라 ... 4 결과물 자체로 사업이 되게 하라 ... 5 내부 작업에서의 사용 ... 6 변화의 움직임 ... 6 1부 이미 문제는 발생해 버렸다 ... 9 00장 시작하기 전에 ... 11 증가하는 비용, 줄어드는 효과 ... 12 구식화의 악순환 끝내기 ... 14 상위 호환성이란 무엇인가? ... 15 규정도 없고 정석도 없다 ... 16 이론이 아닌 실제 ... 18 꼭 이 책을 읽어야 할까? ... 20 01장 웹사이트의 99.9%는 시대에 뒤떨어진다 ... 21 최신 브라우저들과 웹표준 ... 22 새로운 작업을 위한 새로운 코드 ... 24 버전 문제 ... 25 이전 버전에 대한 고려 ... 27 구식 마크업: 비용의 증가 ... 31 하위 호환성 ... 33 사용자를 막으면 손해일 뿐이다 ... 33 삼천포로 빠지기 ... 38 나쁜 마크업에 좋은 일이 생길 때 ... 39 해결책 ... 41 02장 표준에 맞춰 디자인하고 제작하기 ... 43 고생담 ... 45 표준화가 도입되기 이전의 디자인 비용 ... 46 구시대적인 방법으로 만든 현대적인 웹사이트 ... 47 비참한 왕국 ... 51 웹표준의 세 가지 요소 ... 53 구조 ... 53 표현 ... 56 동작 ... 57 실행 ... 57 전환형의 이점 ... 58 웹표준화 프로젝트: 이식성 ... 60 문서 하나로 모든 서비스를 한다 ... 63 A List Apart : 하나의 페이지, 다양한 디자인 ... 63 모니터 밖의 디자인 ... 65 시간과 비용의 절약, 방문자수 증가 ... 66 앞으로의 발전방향 ... 67 전환형(transitional) 상위 호환성(혼합형 디자인) ... 67 엄격한(Strict) 상위 호환성 ... 69 03장 표준화가 어려운 이유 ... 73 보기에는 좋지만 실행하기는 끔찍하다 ... 74 공동의 목표, 공동의 방법 ... 76 실제와 대비되는 인식 ... 77 2000년: 브라우저가 완성된 해 ... 78 맥킨토시용 인터넷 익스플로러: DOCTYPE 전환 기능과 확대축소 기능 ... 79 넷스케이프의 대담한 변화 ... 82 브라우저들의 홍수 ... 82 너무 적다? 너무 늦었다? ... 83 CSS: 처음에는 쓸모 없었다 ... 84 나쁜 브라우저가 나쁜 습관을 만든다 ... 84 넷스케이프 4에서 표현의 상속 문제 ... 85 상속을 사용하자 ... 87 잘못된 방식 ... 87 오래 유지되는 표준화 기반 스크립트 ... 88 혼동되는 사이트와 갈피를 잡을 수 없는 명칭들 ... 89 학문이냐 이익이냐 ... 90 협회에서 제안하고, 업체에서 판매 ... 91 제품의 인지도와 표준의 인지도 ... 91 플래시 ... 92 플래시의 가치 ... 94 플래시의 문제점 ... 96 플래시의 또 다른 문제점 ... 96 호환은 나쁜 것이다 ... 97 인지도를 만드는 언어의 힘 ... 97 느낌의 문제 ... 98 다른 문제들 ... 99 04장 파인더빌러티, 발행, 블로그, 팟캐스트, 롱테일, Ajax(그리고 표준화가 대세가 되는 다른 여러 가지 이유들) ... 101 범용언어 (XML) ... 103 XML과 HTML의 비교 ... 104 한 부모, 여러 자손들 ... 105 전문 소프트웨어나 일반 사용자용 소프트웨어의 필수 요소 ... 105 가수보다 유명하다 ... 106 강력한 데이터를 만드는 5가지 이유 ... 108 발명의 모체 ... 109 웹 저작툴 ... 113 사용자가 원하는 대로 ... 114 XML 애플리케이션과 웹 사이트 ... 116 호환성 ... 116 새로운 협력의 시대 ... 117 기준 모음과 상세내역 ... 117 얼마나 잘 맞는가 ... 118 WHAT Working Group ... 119 인터넷 익스플로러 7과 웹표준화 프로젝트 ... 119 웹표준과 저작 프로그램 ... 120 CSS 레이아웃의 출현 ... 122 브라우저 업그레이드 캠페인 ... 123 홍수의 시작 ... 126 변경한 수많은 사이트와 도움이 되는 사이트 ... 128 최대의 CSS 지식 창고 ... 131 목적 있는 유행 따라가기 ... 131 웹표준의 주류 ... 132 상업적인 사이트들의 진입 ... 134 Wired Digital의 전환 ... 135 디자이너의 관심 끌기 ... 137 충격은 계속된다 ... 139 유효성 검사로 다져진 행복으로 가는 길 ... 140 2부 디자인과 제작 ... 141 05장 최신 마크업 ... 143 낡은 마크업의 숨겨진 오점 ... 148 재구성 ... 150 주요 요약 ... 152 어느 XHTML이 더 우리에게 맞을까? ... 152 XHTML 2 - 누구를 위한 것인가? ... 152 XHTML로 바꿔야 하는 이유 Top10 ... 154 XHTML로 바꾸지 말아야 하는 이유 Top5 ... 155 06장 XHTML: 웹의 재구성 ... 157 XHTML로의 전환: 간단한 규칙과 손쉬운 가이드라인 ... 158 적절한 DOCTYPE과 네임스페이스로 시작하라 ... 158 컨텐츠 타입 선언 ... 161 태그는 전부 소문자로 적는다 ... 163 모든 속성값에 인용부호를 사용한다 ... 165 모든 속성에는 값이 있어야 한다 ... 166 모든 태그는 닫아준다 ... 167 "내용 없는" 태그도 닫아준다 ... 167 주석 안에 더블대시 사용금지 ... 168 모든 〈 와 &는 변환해 준다 ... 168 실행 요약: XHTML 규칙 ... 169 캐릭터 인코딩: 따분하고 더 따분하고 최고로 따분한 ... 169 구조적인 변화 ... 171 스타일보다는 감각적인 마크업을 하자 ... 171 비주얼 요소와 구조 ... 175 07장 더 빈틈없고 견고한 페이지를 위하여: 엄격한 마크업과 혼합형 마크업에서의 구조와 메타구조 ... 177 모든 요소를 구조적으로 사용해야 할까? ... 178 div와 id 그리고 다른 여러 보조요소들 ... 179 시멘틱 마크업과 재사용성 ... 183 혼합형 레이아웃과 간결한 마크업: 해야 할 것과 하지 말아야 할 것들 ... 187 안 좋은 방법들에 이름 짓기 ... 187 혼합형 마크업에서의 자주 발견되는 실수들 ... 188 div가 문제가 아니다 ... 191 id를 사용하라 ... 192 테이블 셀의 제거 ... 194 구식 방법들 ... 195 이미지 맵의 시대 ... 195 맵의 단점 ... 196 접근성이 없으면 구조도 필요 없다 ... 197 자르고 나누기 ... 197 이미지 자르기의 유행 ... 197 지나치게 장황한 테이블 ... 199 잘못 사용한 CSS의 등장 ... 200 지속적인 발전 ... 204 08장 XHTML 예제: 혼합형 레이아웃(1부) ... 205 전환형 방법의 장점 ... 206 자바스크립트를 대신하는 스타일시트 ... 206 기본 접근법(개요) ... 206 테이블 분리: CSS와 접근성 면에서의 장점 ... 208 넘어가기 메뉴(Skip Navigation)와 이를 사용하는 이유 ... 208 추가 id ... 213 초기 마크업: 최종 마크업과 같다 ... 214 네비게이션 마크업: 첫 번째 테이블 ... 215 표현, 시멘틱, 순수성 그리고 잘못 ... 216 컨텐츠 마크업: 두 번째 테이블 ... 217 09장 CSS 기본 ... 219 CSS 요약 ... 220 CSS의 장점 ... 220 스타일 분석 ... 222 선택자, 선언, 속성 그리고 값 ... 222 다중 선언 ... 223 여백과 대소문자의 구분 ... 224 대체가능하고 포괄적인 값 ... 224 선택자들의 묶음 ... 226 상속과 불만 ... 226 자손 선택자 ... 227 id 선택자와 자손 선택자 ... 229 class 선택자 ... 230 선택자들을 결합하여 세련된 디자인 효과 만들기 ... 231 외부, 내부, inline 스타일 ... 234 외부 스타일시트 ... 234 inline 스타일 ... 238 '최고 브라우저 테스트' 방식 ... 238 내부 스타일에서 외부 스타일까지: 이중 스타일시트 방식 ... 239 상대 경로, 절대 경로 ... 240 최고 브라우저 테스트 방식과 이중 스타일시트 방식의 이점 ... 240 10장 CSS 활용: 혼합형 레이아웃(2부) ... 243 이미지 준비 ... 244 기본 요소 설정하기 ... 246 전체쓰기와 줄여쓰기, 그리고 margin ... 246 숨김과 블록지정 ... 247 링크에 색상 주기(가상 클래스) ... 249 기타 요소 설정 ... 251 폰트사이즈에 관한 그 외의 것들 ... 253 페이지에 div 배열하기 ... 256 네비게이션 요소 : 첫 번째 단계 ... 259 네비게이션바 CSS: 두 번째 단계의 첫 번째 시도 ... 262 네비게이션바 CSS: 마지막 단계 ... 263 마지막 단계: 외부 스타일과 '현재위치' 나타내기 ... 268 11장 브라우저 다루기 1부: DOCTYPE 전환과 표준 모드 ... 271 DOCTYPE 전환의 전설 ... 272 브라우저 성능 제어하기: DOCTYPE 전환 ... 274 완전한 XHTML DOCTYPE의 전체 목록 ... 277 브라우저 다양성에 축배를! ... 280 12장 브라우저 다루기 2부: Box Model, 버그, 차선책 ... 285 Box Model과 이에 대한 불만들 ... 286 Box Model은 어떻게 작동하는가 ... 287 Box Model은 어떻게 망가지는가 ... 288 Box Model Hack: CSS의 사용을 안전하게 해준다 ... 295 윈도우용 인터넷 익스플로러의 공백 버그 ... 298 윈도우용 인터넷 익스플로러 'Float' 버그 ... 302 Float, Peek-a-Boo 그리고 다른 버그들 ... 304 플래시와 퀵타임: 고객의 요구에 의한 Object? ... 305 Embed가 가능한 객체: 오만과 복수에 관한 전설 ... 305 이중방식: 멀티미디어 파일의 표준 지원 ... 306 추가 문제: Object 로딩 실패 현상 ... 308 회피법 ... 309 13장 브라우저 다루기 3부: 타이포그래피 ... 311 크기 문제 ... 311 사용자가 조절한다 ... 312 구시대 사람들의 공포 ... 312 단위의 차이 ... 314 드디어 등장한 표준 사이즈 ... 315 클릭 한번으로 되돌려지다 ... 317 브라우저 판별: 변화에 대한 브라우저의 잘못된 반응 ... 318 표준 사이즈와 최선의 방법 ... 320 em 단위의 사용: 웃음과 눈물 ... 320 사용자 선택과 em 단위 ... 321 픽셀에 대한 열정 ... 322 최소 단위: 절대적으로 상대적인 단위 ... 322 픽셀의 문제점 ... 323 폰트 사이즈 키워드 방법 ... 324 키워드가 em이나 퍼센트보다 좋은 이유 ... 325 키워드를 적용했던 초기의 문제들 ... 326 최고의 시기 ... 330 14장 접근성의 기본 ... 331 책에서의 접근 ... 333 일반적인 혼란 ... 334 천재들도 실수를 한다 ... 334 규정과 레이아웃 ... 338 Section 508 설명 ... 339 접근성에 관한 소문들의 진상 ... 341 소문: 접근성을 지키기 위해서는 사이트를 두 개의 버전으로 만들어야 한다 ... 341 소문: 동일하거나 상응하는 접근성을 지키기 위해서는 텍스트만으로 만들어진 버전이 필요하다 ... 341 소문: 접근성에는 비용이 너무 많이 든다 ... 341 소문: 접근성은 유치하고 싸구려 디자인밖에 나오지 않게 한다 ... 343 소문: Section 508에 따라서 만들면 사이트는 모든 브라우저와 사용자 환경에서 똑같이 보여야 한다 ... 344 소문: 접근성은 '장애인을 위한 것'이다 ... 344 소문: 드림위버 MX／Cynthia의 툴로 여기 나온 모든 접근성 문제를 해결할 수 있다 ... 345 소문: 고객이 원하지 않으면 접근성은 무시해도 된다 ... 346 요소별 접근성 팁 ... 346 Image ... 346 애플 사의 퀵타임과 다른 동영상 미디어 ... 349 매크로미디어 플래시 4／5 ... 349 매크로미디어 플래시 MX와 플래시 8 ... 349 색상 ... 351 CSS ... 351 롤오버와 다른 스크립트 동작들 ... 353 Form ... 355 이미지 맵 ... 355 테이블 레이아웃 ... 355 데이터를 표시하는 테이블 ... 356 프레임, 애플릿 ... 356 번쩍거리고 깜빡이는 요소 ... 356 접근성에 도움이 되는 툴과 플러그인 ... 357 Cynthia Says™ ... 358 Tab의 연결: 우리의 친구, tabindex 속성 ... 358 접근성 계획: 어떤 장점이 있을까 ... 362 접근성은 우리한테도 도움이 된다 ... 362 15장 DOM 기반의 스크립트로 작업하기 ... 365 DOM 관련 서적 ... 366 DOM이란 무엇인가? ... 367 웹 페이지를 애플리케이션처럼 작동하게 만드는 표준 방식 ... 367 그럼 사용 가능한 환경은? ... 370 DOM을 지원하지 않는 경우 ... 371 스타일 변경: 접근성 지원, 선택의 폭 ... 374 16장 CSS로 디자인하기 ... 379 조건의 정의 ... 380 필수 조건 10가지 ... 380 가상 레이아웃 설정 ... 382 배너 ... 386 마무리하기 ... 390 찾아보기 ... 391