제프리 젤드만의 웹표준 가이드 웹 디자이너와 개발자, 그리고 사용자를 위한 올바른 선택(2ed)
제프리 젤드만 (Jeffrey Zeldman) 은 누구인가? 제프리 젤드만은 최초의 웹디자이너 중 한 명이고 전문가들 사이에서 강력한 영향력을 지녔습니다.
1995년 전 아트 디렉터이자 카피라이터인 그는 최초로 가장 영향력 있는 개인 웹 사이트 중의 하나 (www.zeldman.com)을 만들었고웹 디자인의 방법과 원칙에 대한 유명한 튜토리얼을 쓰기 시작했습니다.
1998년 마이크로소프트와 넷스케이프에서 각각 자기들의 브라우저에서 같은 기술을 지원하도록 설득한 기초 연합인 The Web Standards Project(www.webstandards.org)를 공동 설립했습니다. 같은 해 A List Apart(www.alistanart.com) 'for people who make websites' (웹 사이트를 만드는 사람들을 위하여)를 만들기 시작했습니다. 그리고 이 분야해서 가장 존중 받고 영향력 있는 잡지가 되었다고 합니다. (책 저자 소개 일부...)
목차
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 로딩 실패 현상 - 회피법
3부: 타이포그라피
13장 브라우저 다루기
사이즈 문제 사용자 조절 구시대 사람들의 공포 - 단위의 차이 드디어 등장한 표준 사이즈 - 클릭 한번으로 되돌려지다 - 브라우저 판별: 브라우저의 변화에 대한 잘못된 반응 - 표준 사이즈와 최선의 방법 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가지...
오늘 점심시간에 코엑스에 잠깐 다녀왔는데, 우연치 않게 서점을 발견해서 전부터 구매하고 싶었던 '제프리 젤드만의 웹표준 가이드'를 질렀습니다.
온라인에서는 28.000원에 판매가 되던데 저는 기다리는게 싫어서 32.000원에 질렀습니다. 웹표준을 본격적으로 접한게 작년 같은데 공부하면 할수록 어려운게 이쪽 분야가 아닌가 하는 생각이 듭니다.
이미 예약판매때부터 미리 구매한 사무실 대리님이 계셔서 잠시 빌려 봤었는데 내용이 좋은거 같아 저도 구매를 하게 되었습니다. 웹표준 관련서적은 구매를 많이 했었는데, 책만 보면 졸려서 인지, 필요할때만 살짝 펼쳤는데, 이번참에 끝까지 읽어보고 개념부터 다시 잡아야 겠다는 생각이 듭니다.
