제프리 젤드만의 웹표준 가이드

1부: 이미 문제는 발생해 버렸다

시작하기 전에

비용, 줄어드는 효과
구식화의 악순환 끝내기
호환성이란 무엇인가?
규정도 없고 정석도 없다
이론이 아닌 실행
꼭 이 책을 읽어야 할까?

1장 웹사이트의 99.9%는 시대에 뒤떨어진다
최신 브라우저들과 웹표준
새로운 작업을 위한 새로운 코드
버전 문제
이전 버전에 대한 고려
구식 마크업: 비용의 증가
하위 호환성
사용자를 막는 것은 사업에서는 최악이다
삼천포로 빠지기
나쁜 마크업에 좋은 일이 생길 때
해결책

2장 표준에 맞춰 디자인하고 제작하기
고생담
표준화가 도입되기 이전의 디자인 비용
구시대적인 방법으로 만든 현대적인 웹사이트
비참한 왕국
웹표준의 세 가지 요소
구조
표현
동작
실행
절충법의 이점
웹표준 프로젝트: 이식성
문서 하나로 모든 서비스를 한다
A List Apart: 하나의 페이지, 다양한 디자인
디자인, 화면 밖으로
시간과 비용의 절약, 방문자수 증가
앞으로의 발전방향
절충적(transitional) 상위 호환법(혼합형 디자인)
엄격한(Strict) 상위 호환법

3장 표준화가 어려운 이유
보기에는 좋지만 실행하기는 끔찍하다
공동의 목표, 공동의 방법
실제와 대비되는 인식
2000년: 브라우저가 완성된 해
맥용 인터넷 익스플로러 5: DOCTYPE 변경과 확대축소 기능
넷스케이프의 대담한 변화
브라우저들의 홍수
너무 적다? 너무 늦었다?
CSS: 처음에는 쓸모없었다
나쁜 브라우저가 나쁜 습관을 만든다
넷스케이프 4의 표현의 상속 문제
상속을 사용하자
잘못된 방식
오래 유지되는 표준화 기반 스크립트
혼동되는 사이트와 갈피를 잡을 수 없는 명칭들
학문이냐 이익이냐
협회에서 제안하고, 업체에서 판매
제품의 인지도와 표준의 인지도
플래시
플래시의 가치
플래시의 문제점
플래시의 또 다른 문제점
호환은 나쁜 것이다
인지도를 만드는 언어의 힘
느낌의 문제
다른 문제들

4장 파인더빌러티(findability), 조직, 블로그, 팟캐스트(Podcast), 롱테일, Ajax(그리고 표준화가 대세가 되는 다른 여러 가지 이유들)
범용언어 (XML)
XML과 HTML의 비교
한 부모, 여러 자손들
전문 소프트웨어나 일반 사용자용 소프트웨어의 필수 요소
가수보다 유명하다
강력한 데이터를 만드는 5가지 방법
발명의 모체
웹 저작툴
사용자가 원하는 대로
XML 애플리케이션과 웹 사이트
호환성
새로운 협력의 시대
기준 모음과 상세내역
얼마나 잘 맞는가
WHAT Working Group
인터넷 익스플로러 7과 웹 표준화 프로젝트
웹표준과 저작 프로그램
The Dreamweaver Task Force
위지위그 편집 프로그램의 발달(셋 중에 둘은 쓸 만하다)
프론트페이지에서부터 익스프레션 웹 디자이너(Expression Web Designer)까지
CSS 레이아웃의 출현
브라우저 업그레이드 캠페인
홍수의 시작
수많은 변경한 사이트와 도움이 되는 사이트
최대의 CSS 지식 창고
목적 있는 유행 따라가기
웹표준의 주류
상업적인 사이트들의 진입
Wired Digital의 전환
디자이너의 관심 끌기
충격은 계속된다
유효성 검사로 포장된 행복으로 가는 길

2부 디자인과 제작

5장 최신 마크업
낡은 마크업의 숨겨진 오점
재구성
주요 요약
어느 XHTML이 더 우리에게 맞을까?
누구를 위한 것인가?
XHTML로 바꿔야 하는 이유 Top 10
XHTML로 바꾸지 말아야 하는 이유 Top 5

6장 XHTML: 웹의 재구성
XHTML로의 전환: 간단한 규칙과 손쉬운 가이드라인
적절한 DOCTYPE과 네임스페이스로 시작하라
컨텐트 타입 선언
태그는 전부 소문자로 적는다
모든 속성값에 인용부호를 사용한다
모든 속성에는 값이 있어야 한다
모든 태그는 닫아야 한다
'내용 없는' 태그도 닫아준다
주석 안에 더블대쉬 사용금지
모든 < 와 &는 변환해준다
실행 요약: XHTML 규칙
캐릭터 인코딩: 따분하고 더 따분하고 최고로 따분한
구조적인 변화
스타일보다는 감각적인 마크업을 하자
비주얼 요소와 구조

7장 확실한 페이지를 더 빈틈없고 견고하게: 엄격한(Strict) 마크업에서의 구조와 메타 구조
모든 요소를 구조적으로 사용해야 할까?
div와 id 그리고 다른 여러 보조요소들
시멘틱 마크업과 재사용성
혼합형 레이아웃과 간결한 마크업: 해야 할 것과 하지 말아야 할 것들
안 좋은 방법들에 이름 짓기
혼합형 마크업에서의 자주 발견되는 실수들
div가 문제가 아니다
id를 사용하라
지나친 테이블 셀의 제거
구식 방법들
MAP의 시대
맵과 그 단점
접근성이 없으면 구조도 필요 없다
자르고 나누기
이미지 자르기의 유행
지나치게 장황한 테이블
잘못 사용한 CSS의 등장
지속적인 발전

8장 XHTML 예제: 혼합형 레이아웃(1부)
전환형 방법의 장점
자바스크립트를 대신하는 스타일시트
기본 접근법(개요)
분리된 테이블: CSS와 접근성 면에서의 장점
넘어가기(skip) 메뉴와 사용하는 이유
추가 id
초기 마크업: 최종 마크업과 같다
네비게이션 마크업: 첫 번째 테이블
표현, 시멘틱, 순수성 그리고 잘못
컨텐츠 마크업: 두 번째 테이블

9장 CSS 기본
CSS 간략하게 살펴보기
CSS의 장점
스타일 분석
선택자, 선언, 속성 그리고 값
다중 선언
여백과 대소문자의 구분
대체가능하고 포괄적인 값
선택자들의 묶음
상속과 불만
자손 선택자
id 선택자와 자손 선택자
class 선택자
선택자들을 결합하여 세련된 디자인 효과 만들기
외부, 내부, inline 스타일
외부 스타일시트
ilnine 스타일
'최고 브라우저 테스트' 방식
내부 스타일에서 외부 스타일까지: 이중 스타일시트 방식
상대 경로, 절대 경로
최고 브라우저 테스트 방식과 이중 스타일시트 방식의 이점

10장 CSS 활용: 혼합형 레이아웃(2부)
이미지 준비
기본 요소 설정하기
전체쓰기와 줄여쓰기, 그리고 margin
숨김과 블록지정
링크에 색상 주기(가상 클래스)
기타 요소 설정
폰트사이즈에 관한 그 외의 것들
페이지에 div 배열하기
네비게이션 요소 : 첫 번째 단계
네비게이션바 CSS: 두 번째 단계의 첫 번째 시도
네비게이션바 CSS: 마지막 단계
마지막 단계: 외부 스타일과 '현재위치' 나타내기

11장 브라우저 다루기 1부: DOCTYPE 전환과 표준 모드
DOCTYPE 전환의 전설
브라우저 성능 제어하기: DOCTYPE 전환
완전한 XHTML DOCTYPE의 전체 목록
브라우저 다양성에 축배를!

12장 브라우저 다루기 2부: Box Model, 버그, 차선책
Box Model과 이에 대한 불만들
Box Model은 어떻게 작동하는가
Box Model은 어떻게 망가지는가
Box Model Hack: CSS의 사용을 안전하게 해준다.
윈도용 인터넷 익스플로러의 공백 버그
윈도용 인터넷 익스플로러 'Float' 버그
Float, Peek-a-Boo 그리고 다른 버그들
Flash와 QuickTime: 고객의 요구에 의한 Object?
Embed가 가능한 객체: 오만과 복수에 관한 전설
이중방식: 멀티미디어파일의 표준 지원
추가 문제: Object 로딩 실패 현상
회피법

13장 브라우저 다루기 3부: 타이포그라피
사이즈 문제
사용자 조절
구시대 사람들의 공포
단위의 차이
드디어 등장한 표준 사이즈
클릭 한번으로 되돌려지다
브라우저 판별: 브라우저의 변화에 대한 잘못된 반응
표준 사이즈와 최선의 방법
em 단위의 사용: 웃음과 눈물
사용자 선택과 em 단위
픽셀에 대한 열정
최소 단위: 절대적으로 상대적인 단위
픽셀의 문제점
폰트 사이즈 키워드 방법
키워드가 em이나 퍼센트보다 좋은 이유
키워드를 적용했던 초기의 문제들
최고의 시기

14장 접근성의 기본
책에서의 접근
일반적인 혼란
천재들도 실수를 한다
규정과 레이아웃
Section 508 설명
접근성에 관한 소문들의 진상
소문: 접근성을 지키기 위해서는 사이트를 두 개의 버전으로 만들어야 한다
소문: 동일하거나 상응하는 접근성을 지키기 위해서는 텍스트만으로 만들어진 버전이 필요하다
소문: 접근성에는 비용이 너무 많이 든다
소문: 접근성은 유치하고 싸구려 디자인밖에 나오지 않게 한다
소문: Section 508에 따라서 만들면 사이트는 모든 브라우저와 사용자 환경에서 똑같이 보여야 한다
소문: 접근성은 '장애인을 위한 것'이다
소문: 드림위버 MX/Cynthia의 툴로 여기 나온 모든 접근성 문제를 해결할 수 있다
소문: 고객이 원하지 않으면 접근성은 무시해도 된다
요소별 접근성 팁
Image
애플 사의 퀵타임과 다른 동영상 미디어
매크로미디어 플래시 4/5
Macromedia Flash MX와 Flash 8
색상
CSS
롤오버와 다른 스크립트 동작들
Form
이미지 맵
테이블 레이아웃
프레임, 애플릿
Cynthia Says를 애용하자
Tab의 연결: 우리의 친구, tabindex 속성
접근성 계획: 어떤 장점이 있을까

15장 DOM 기반의 스크립트로 작업하기
DOM 관련 서적
DOM이란 무엇인가?
웹 페이지를 애플리케이션처럼 작동하게 만드는 표준 방식
그럼 사용 가능한 환경은?
DOM을 지원하지 않는 경우
스타일 변경: 접근성 지원, 선택의 폭

16장 CSS로 디자인하기
조건의 정의
필수 조건 10가지
가상 레이아웃 설정
배너
마무리하기

두 명의 디자이너를 하나의 방에 두면 분명히 세 가지의 의견을 들을 수 있다. 어느 디자이너도 텍스트나 브랜딩이나 레이아웃 또는 색상에 대해서 서로 찬성하지 않는다. 표준에서도 마찬가지이다. 어떤 책도 모든 사람에게 모든 것을 알려줄 수는 없다.

따라서 이 책도 단순히 일반적인 방향을 정해줄 뿐 자신의 길은 자신이 찾아야 한다. 이 책의 역할은 어떻게 웹표준 기술들이 맞물려서 상위호환이 되는 사이트를 만드는지를 이해하는 데 도움을 주는 것 뿐이다-그리고 그 방법을 따라가는데 약간의 팁을 주는 것도 있다.

이전에 사용하던 방법으로 사이트를 디자인을 하면서 3년이 지났을 때 방황을 한 적이 있었고, 그 뒤로 이 책의 기본이 되는 이해의 단계에 도달하는데 8년이 걸렸다. 어쩌면 여기서 다룬 내용의 일부나 또는 전부를 반대할지도 모른다. 중요한 것은 작은 차이점에 집착하거나 한두 가지 작은 문제에 대해서 확신이 없다는 이유로 전부를 거부하지는 말아야 한다는 것이다.

그리고 현재의 웹 프로젝트가 최대한 많은 사람에게 오랫동안 그리고 최저의 비용으로 만들어질 수 있도록 하는 것이 중요한 점이다. 지금 시작하지 않는다면, 언제 시작할 수 있을까? 당신이 하지 않는다면, 누가 할 것인가?-본문 중에서