[개정판 출간] 도서정보 페이지 바로가기 『Web Standards Solutions Special Edition 한국어판: 웹 표준 첫걸음』

웹 표준, 도대체 어떻게 시작해야 합니까?

국내최초로 출간되는 웹 표준 활용 지침서!
전 세계 전문가들이 극찬하고 국내 웹 전문가들이 기다려온 바로 그 책,

웹 표준의 대가 댄 씨더홈과 함께 퀴즈로 풀어보는 웹 표준 실전 가이드!
역자가 강의하는 웹 표준 블로그 만들기 등 한국어판 특별 부록 수록!

구입하신 모든 독자께 5,000원 상당의 사진인화권을 선물로 드립니다.


이제까지 웹 디자이너와 개발자들은 디자인이 화려한 사이트를 만들기 위해 비대한 마크업을 사용해왔고, 오늘날 웹은 이런 사이트로 온통 가득 차 있습니다. 테이블이 테이블을 세 번 이상 포함하고 있고 픽셀 단위로 레이아웃을 맞추기 위해 투명 GIF 이미지를 사용하는 것이 일반적인 형태가 된 지 오래입니다. 하지만 대중적인 주요 웹 브라우저에서 표준을 지원하기 시작하면서 깔끔하고 구조화된 마크업과 CSS를 함께 사용한 표준을 준수한 디자인 작업이 힘들다는 인식은 변화하기 시작했습니다. 트렌드가 변화하고 있습니다. 이렇게 웹 표준의 장점을 깨닫게 된 많은 사람들이 웹 디자인과 웹 개발 커뮤니티의 나머지 사람들을 한 단계 올려놓을 것입니다.


[ 이 책의 내용 ]

웹 표준을 이용해 사이트를 구현하면 어떤 장점이 있을까?
이 책은 웹 표준의 장점을 이해하기 위한 필수 안내서입니다.

XHTML과 CSS 같은 웹 표준은 이미 많이 알려진 기술입니다. 웹 관련 직종에 있다면 웹 표준에 대해서 들어봤을 것입니다. 하지만 웹 표준을 지원하는 웹 브라우저가 점차 늘어가고 있고, 웹 디자이너와 웹 개발자가 웹 표준이 주는 실질적인 이점을 이해하고 이를 준수하려고 하는 움직임이 많아지고는 있지만, 웹 표준으로 사이트를 구축하는 것은 아직까지 쉬운 일은 아닙니다. 웹 표준의 혜택을 완벽하게 이해하고 웹 표준을 이용해 효율적으로 사이트를 구현해야만 비로소 웹 표준의 진수를 아는 것입니다.

웹 표준 가이드는 16장과 부록으로 구성돼있습니다. 각 장에서는 여러 가지 웹 표준 개념의 이론과 실습을 다루며, 쉽게 이해할 수 있도록 문제에 대해 여러 가지 다른 해결방법을 보여줍니다. 이 책을 통해 다단 레이아웃, 이미지 바꿔치기, 테이블과 리스트 제대로 사용하기 등의 방법을 배울 수 있습니다. 이런 접근방법을 통해서 웹 표준의 핵심사항을 빠르게 이해하고 소화해 제대로 활용할 수 있을 것입니다.

- XHTML 소스를 가볍고 최적화시켜 이해하기 쉽게 작성하는 올바른 방법
- 웹 페이지를 구성하는 엘리먼트를 다양하게 꾸밀 수 있는 CSS 활용법
- 쉽고 효율적인 웹 페이지 레이아웃 구성방법
- 동일한 결과물을 만들어 내는 다양한 구현 방법
- 최신 웹 디자인 테크닉과 그에 따른 유의점 소개


[ 서 문 ]

이 책은 여러분에게 무기를 지급하기 위해 쓰게 됐습니다. 그 무기란 바로 여러분이 속한 프로젝트에서 웹 표준을 해결책으로 사용할 수 있는 것이며, 이 무기를 통해 마크업과 스타일에 있어 올바른 선택을 할 수 있는 능력을 갖게 될 것입니다. 한 장 한 장 넘어가면서 흔히 사용하던 실제 사례를 들어 웹 디자인 방법들을 비교해가며 어떤 방법이 왜 더 나은지 해답을 찾을 것입니다. 그러한 비교를 통해 우리가 수행할 프로젝트에 가장 적합한 방법을 찾고 이를 활용할 수 있게 될 것입니다.
하지만 먼저 이제 시작하는 단계라는 것을 상기합시다. 이 책에는 많은 약어와 코드 예제와 약간은 낯설어 보이는 개념이 포함돼있습니다. 먼저 웹 표준이 무엇인지부터 이야기해보죠.

왜 웹 표준인가?
어제 커튼을 샀습니다. 창 길이를 재고 상점에 가서 23인치의 커튼을 사고 집으로 돌아왔습니다. 완벽하게 잘 맞았죠. 작년에 아내와 저는 식기 세척기를 새로 구입했습니다. 기존에 사용하던 것을 빼내고 새로운 것을 주문했습니다. 물건이 도착한 후 설치해 보니 완벽하게 잘 맞았습니다. 여기서 생각해 볼 것이 있습니다. 가정용 제품들은 표준에 맞게 신제품들이 계속 나오면서 발전해가고 있습니다. 누구든지 저처럼 아무 상점에 가서 어떤 전등을 구입해서 설치해도 잘 들어맞을 것입니다. 또 문 손잡이를 사서 달 경우에도 십중팔구 아무 문제없이 설치할 수 있을 것입니다. 이렇게 미리 정한 표준 측정방법 덕분에 주택에서 편하게 생활할 수 있습니다. 새로운 주인이 이사 와서 집을 수리할 때도 표준이 있어서 쉽게 고치고 예쁘게 꾸밀 수 있을 것입니다.
물론 이렇지 않은 경우도 있을 수 있습니다. 20세기 이전에 지어진 집은 표준을 이용하지 않았습니다. 이 말은 표준을 지키지 않고 지은 집이 나쁜 집이라는 의미는 아닙니다. 다만 이런 집을 수리하거나 유지관리하기 위해서는 별도의 작업이 필요합니다. 낡은 집을 사서 개조를 하는 사람들을 때때로 볼 수 있습니다. 개조를 하는 과정은 힘들지만 이후부터 집을 유지관리할 때는 표준 규격의 장점을 쉽게 이용할 수 있게 됩니다. 이 책은 집에 대한 책이 아닙니다. 하지만 위의 사례를 웹에 비유할 수 있습니다. 표준 기반으로 웹 페이지를 만들면 유지관리하기가 훨씬 쉬워집니다. 함께 일하는 웹 디자이너와 개발자가 페이지의 구조와 스타일을 쉽게 이해할 수 있어서 금방 함께 작업할 수 있습니다.
웹 표준을 이해하게 되면 다음과 같은 장점을 취할 수 있습니다.

■ 마크업 용량이 줄어든다 코드량이 줄어든다는 것은 페이지 로딩 시간이 빨라진다는 것을 의미합니다. 또 코드량이 줄면 서버가 성능을 더 발휘할 수 있게 되므로 서버 공간이나 처리 능력에 들어가는 비용을 줄일 수 있습니다.
■ 컨텐트와 문서 모양을 분리할 수 있다 CSS를 사용해 사이트를 디자인할 수 있으므로 디자인 수정이나 리뉴얼을 쉽게 할 수 있습니다. 스타일시트 내용만 수정하면 사이트 전체에 디자인 수정사항이 그 즉시 반영됩니다.
■ 웹 접근성이 높아진다 웹 표준을 이용해 작성한 문서는 최대한 많은 웹 브라우저와 장치에서 읽을 수 있습니다. 대부분 브라우저, 휴대폰, PDA, 심지어 장애인 지원용 소프트웨어에서도 컨텐트를 쉽게 읽을 수 있습니다.
■ 향후 호환성을 보장받는다 웹 표준으로 페이지를 작성하게 되면 향후에도 그 문서를 확실히 읽을 수 있습니다. 위와 같은 장점들은 모두 웹 표준을 선택해야 하는 충분한 이유가 될 것입니다. 또한 이 책을 통해서 기존의 나쁜 습관을 고칠 수 있는 방법과 더불어 멋진 표준 기반의 디자인을 하기 위한 팁과 기술들을 선보이겠습니다.

책을 쓰게 된 동기
처음엔 아주 단순하게 시작했습니다. 제 개인 웹 사이트에 간단한 퀴즈를 올리는 것을 생각했죠. 동일하거나 유사한 결과를 내는 것들을 보기로 제시한 후 “어떤 방법이 가장 좋은 방법일까요?”를 선택하는 객관식 문제로 말이죠. 해답은 이 질문에 대한 진짜 해결책이었습니다. 이 퀴즈의 목적은 각 방법의 장단점을 보여주는 데 있었습니다. 때론 유효성이 검증된 html 코드가 반드시 최선의 해결책이 아닌 방법도 몇 가지 있었습니다. 이 글을 읽은 사람들은 댓글로 자신들의 의견을 남겨주고 이 토론을 통해서 강력한 무기를 얻게 됐죠. 페이지 머리글이나 리스트를 적절하게 사용하는 것이 왜 중요한지 이유를 알게 된다면 우리가 직접 수행하는 프로젝트에 바로 적용하게 될 것입니다. 웹 디자인에서 항상 그렇듯이 동일하거나 유사한 결과를 얻기 위한 방법은 여러 가지가 있습니다. 어떤 작업을 하든 최선의 방법을 사용해야 합니다. 하지만 선택할 수 있는 여러 가지 방법에 대한 장단점을 이해해야만 선택의 순간이 왔을 때 올바른 결정을 할 수 있을 것입니다.

이 책의 형식
이 책은 2부로 구성돼 있습니다. 1부는 마크업, 2부는 CSS에 대해서 다루고 있습니다. 각 장은 특정 질문에 대한 답변 형식으로 구성돼있습니다. 경우에 따라 동일한 결과를 만들어 내는 여러 가지 방법에 대해서 설명하기도 합니다. 각 방법에 대해서는 장점과 단점을 따져가며 상세하게 설명할 것입니다. 또 각 장의 마지막 부분에는 심화 학습을 제공해 그 장에서 설명한 내용과 관련된 고급 마크업과 CSS에 대해서 소개할 것입니다.


[ 부록 CD 소개 ]

1. 예제 소스코드
이 폴더에는 원서 "Web Standard Solution"과 한국어판 "실용예제로 배우는 웹 표준" 두 폴더 안에 책에 나온 모든 예제 소스코드가 담겨있습니다. 각 폴더에서 index 파일을 실행하면 각 장 모든 파일의 링크를 한 눈에 볼 수 있습니다.

2. KADO-WAH
웹 접근성 평가 프로그램인 KADO-WAH를 실었습니다. 웹 페이지의 접근성 여부를 국내외 웹 접근성 지침에 따라 자동으로 점검한 후에 그 문제점을 보고서로 제공하고 수정을 지원해 웹 디자이너와 프로그래머들이 쉽게 접근성이 있는 웹 페이지를 제작할 수 있도록 도와주는 프로그램입니다.

3. KADO 교육 자료
웹 접근성을 고려한 콘텐츠 제작기법을 담은 PDF파일입니다. KADO-WAH와 교육자료는 정보통신부와 한국정보문화진흥원이 무료로 제공해주셨습니다.

[ 저자 소개 ]

댄 씨더홈

댄 씨더홈(Dan Cederholm)은 여러 차례 수상 경력이 있는 웹 디자이너이자 컨설턴트이며 웹 표준 기반의 웹 사이트 디자인 및 구축 분야 전문 저술가이다. 2003년도에 패스트 컴퍼니(Fast Company)와 인크닷컴(Inc.)의 웹 사이트를 CSS 장점을 최대한 살린 웹 표준 기반으로 리뉴얼 하면서 알려지기 시작했다. 또 웹 관련 기술과 일상적인 이야기들을 전해 매우 유명해진 블로그 심플비츠(SimpleBits)를 운영하고 있다. 블로그와 같은 이름의 컨설팅 회사도 운영하고 있는데, 이 회사에서는 이 책에서 설명한 방법들을 적용해 단순하고도 매력적인 인터페이스 제작분야에 초점을 맞추고 있다. 텍사스 오스틴에서 열린 SXSW 같은 컨퍼런스에서의 강의를 통해 그가 정리한 표준 기반의 마크업과 스타일 테크닉을 전하며 웹 디자인과 개발에 대해 그만의 명쾌한 접근방법을 참가자들과 함께 나눴다.


드류 맥르란 / 기술 감수

영국 런던에 거주하는 웹 애플리케이션 개발자로 주간에는 웹 개발 업무를 하고 있으며, 밤에는 기술 서적을 쓰거나 편집하는 일을 한다. 운영중인 개인 웹사이트인 www.allinthehead.com에는 그의 업무와 관련된 주제들에 대해 소개하고 있다. 드류는 “드림위버 MX 개발”(뉴라이더스 출판사)를 집필했으며 A List Apart(www.alistapart.com)와 매크로미디어(www.macromedia.com)에 기사를 투고한 바 있다. 웹 표준 프로젝트(www.webstandards.org)의 멤버이기도 한 그는 PR 등의 다양한 역할을 하고 있다. 어릴 적 꿈은 우주비행사가 되는 것이었다고 한다.


[ 한국 독자들에게 드리는 저자 인사 ]

한국의 독자 여러분, 안녕하세요! 제가 처음 이 책을 쓰기 시작했을 때는 이 책이 제가 살고 있는 미동북부에서 세계 전지역으로 퍼져 나갈거라고 상상도 못했습니다. 이 책은 웹 표준에 대한 풍부한 내용과 더불어 마크업 및 스타일 작성에 관련된 업무를 단순명료하게 해 줄 중요한 사실을 설명하고 있습니다. 여러분이 좀 더 편하게 읽으실 수 있는 한국어판이 출간된 것을 영광으로 생각합니다. 즐겁게 읽으시길 바라며 이 책을 읽어주신 것에 대해 깊은 감사를 드립니다.



[ 역자 소개 ]

박수만

엔비닷컴(http://www.enbee.com) 이사. 2002년부터 운영하고 있는 개인 블로그인 suman`s shallow thoughts(http://www.sumanpark.com)는 블로그계에 널리 알려져 있다. 그의 블로그에서는 웹표준외에도 웹 사이트 기획 및 개발에 관련된 트렌드, 그리고 그의 잔잔한 일상도 엿볼 수 있다. 명지대학교 컴퓨터공학과 학부와 대학원(소프트웨어 공학 전공)을 졸업했다.


[ 역자 서문 ]

1993년 넷스케이프를 겨우 설치하고 띄운 회색 바탕에 파란색 링크로 가득 찬 야후 Yahoo! 웹 페이지는 태어나서 처음 본 웹 문서였다. 그 때는 그저 이 HTML 문서를 왜 홈페이지라고 부르는지 궁금하기만 했다. 그로부터 몇 년 후… 국내 웹사이트들의 화려한 변신이 시작됐다. "와, 테이블에 이렇게 바탕을 깔아 그 위에 흰색 바탕의 테이블에 패딩을 주고 작은 이미지들을 끼워 넣으면 이렇게 되는구나!" 우리 웹 디자이너/코더의 능력을 보니 감탄이 절로 나왔다. 하지만 그렇게 쌓인 화려한 테크닉이 이제는 우리의 발목을 잡고 있다. 웹 표준 기반 디자인과 개발의 핵심은 의미를 살린 결과물이다. 나머지 장점들은 모두 저절로 따라온다.

■ 의미를 살리다 보니 군더더기 없이 깔끔한 코드가 생성된다 　
■ 코드가 깔끔해지면 기존 코드의 용량이 몇십분의 일로 줄어든다 　
■ 의미를 살린 마크업으로 스타일을 마음대로 입힐 수 있게 된다 　
■ 문서구조와 문서모양을 별도의 파일로 컨트롤할 수 있다 　
■ 어떤 웹 브라우저나 스크린리더에서 보더라도 한결같은 결과물을 얻게 된다.(이해도/유지보수성/접근성이 높아지며, 서버/네트웍 비용 절감 등 여러 자연스러운 부수효과를 낳는다)

원서를 처음 접한 후 혼자서 보다가 우리 회사 웹 디자이너들에게도 읽히려고 번역을 시작했는데 드디어 한 권의 책으로 나오게 됐다. "기획자, 개발자, 디자이너가 함께 보는~"이라는 부제처럼 이 책이 웹에 종사하고 있는 모든 이가 웹 표준의 필요성을 이해하고 새롭게 시도해 보려는 첫걸음에 많은 도움이 될 것을 확신한다.

목차

• 1부 마크업, 처음부터 제대로 배우기
  
  • 1장 리스트
    • 블로그 꾸미기
    • 퀴즈 시간
  • 방법 A. <br /> 태그 사용
• 줄 바뀜 문제
• 방법 B. 불릿 활용
  • 방법 C. 좀 더 정확하게
• 방법 D. 잘 감싸봅시다
  • 요약
  • 심화 학습
• 불릿 감추기
• 불릿 이미지를 넣어 더 예쁘게
• 내비게이션 메뉴바로 활용해보기
• 다양한 미니탭 모양 바꿔보기
  

2장 머리글

• 문서 제목을 마크업하는 가장 좋은 방법은?

방법 A. 의미를 살린 방법?

방법 B. p와 b 조합

• 방법 C. 스타일과 내용 모두 살리기
  • 요약
  • 심화 학습
• 스타일링 기초
• 배경 지정
• 배경과 테두리선

아이콘 지정

• 손쉬운 업데이트

카멜레온 효과

• 마무리
  

3장 테이블을 쓰면 안된다?

• 테이블이 적합한 경우
• 테이블 기초

요약 정보 덧붙이기

테이블 헤더

헤더와 데이터의 관계

<thead>, <tfoot>, <tbody>

테이블을 쓰면 안된다?

• 심화 학습

격자 만들기

간격 붙이기

헤더 모양 수정

• 헤더에 배경 이미지 지정

ID에 아이콘 지정

• 마무리
  

4장 인용문

• 방법 A. 의미를 살리지 못한 표현
• 방법 B. 불필요한 클래스 지정
• 방법 C. 최선의 선택, <blockquote>

스크류 드라이버로 망치질하는 꼴

• 요약
• 심화 학습

더 많은 정보를 제공하는 cite 속성

인라인 인용문

<blockquote> 스타일 입히기

• 마무리
  

5장 폼

• 폼을 마크업하는 방법에는 어떤 것이 있나요?

방법 A. 테이블 이용

방법 B. 테이블 쓰지 않기. 하지만 뭔가 답답하죠?

방법 C. 단순하고 접근성이 높은 방법

• 방법 D. 정의 리스트 활용하기
  • 요약
  • 심화 학습
• 탭인덱스
• 자주 사용하는 폼을 위한 액세스 키
• 폼 꾸미기
  • 마무리
    

6장 구문표현 엘리먼트

• 문서모양 vs. 문서구조

<strong>과 <em>이 <b>와 <i>보다 나은 이유

<em>의 사용법

굵은 글꼴이나 이탤릭체로 지정하는 경우

굵은 이탤릭체로 지정하는 경우

• 요약
• 심화 학습
• 문구 엘리먼트

<cite> 태그

<abbr>과 <acronym>

<code>

• <samp>
• <var>
• <kbd>
• 마무리
  
  

7장 앵커

• 웹 페이지 내의 특정 위치를 가리키는 가장 좋은 방법은?
• 방법 A. name 속성은 있고 내용은 없는 앵커 사용

방법 B. name 속성과 내용을 모두 사용

방법 C. name 속성 사용하지 않기

방법 D. 종합 해결책

• 요약
• 심화 학습

title 속성

링크 꾸미기

• 닻을 들어올리며
  

8장 리스트의 고급 기능

• 번호가 매겨진 리스트를 마크업하는 가장 좋은 방법은?

방법 A. <ul> 사용하기

방법 B. <ol> 사용하기

• 용어와 설명 묶음을 마크업하는 가장 좋은 방법은?

방법 A.

방법 B.

• 요약
• 심화 학습

각 파트에 id 부여

숫자 모양 만들기

CSS에 숫자 추가

결과 화면

• 마무리
  

9장 마크업 용량 줄이기

• 웹 표준을 지켜 사이트를 만들면 마크업 용량을 줄일 수 있을까?

하위 선택자

• 방법 A. 클래스 정의

방법 B. 좀더 자연스럽게

• 불필요한 <div> 제거

방법 A. <div> 사용

방법 B. <div> 제거

그 밖의 사례

• 요약
• 심화 학습

기본 마크업 구조

스타일 입히기

불릿 모양 바꾸기

테두리 추가

• 마무리
  

2부 웹 표준 스타일의 세계로

• 10장 CSS 적용하기
  • CSS를 문서에 어떻게 적용하나요?
• 방법 A. <style> 엘리먼트 사용
  • 방법 B. 외부 스타일 시트 사용
  • 방법 C. @import 사용
  • 방법 B와 방법 C를 조합한 다중 스타일시트 활용법
  • 일반 스타일과 고급 스타일
  • 캐스케이드 효과 활용
  • 방법 D. 인라인 스타일
    • 요약
    • 심화 학습
  • 대체 스타일
    • 마무리
      
• 11장 인쇄를 위한 스타일
  • 인쇄를 위한 스타일은 어떻게 지정하나요?
• 미디어 타입
  • 대상을 지정하는 두 가지 방법
  • 방법 A. media 속성
  • 방법 B. @media 혹은 @import
  • 여러 값 지정
  • 화면 스타일과 인쇄 스타일 분리하기
  • 인쇄용 스타일 시트 만들기
    • 마무리
      
• 12장 CSS로 레이아웃 잡기
  • CSS로 2단 레이아웃을 어떻게 만드나요?
• 방법 A. 사이드바 띄우기
• 방법 B. float을 두 번 사용하기
• 방법 C. 컨텐트 띄우기
• 방법 D. 포지셔닝
  • 요약
  • 심화 학습
• 박스모델 문제
• 가짜 컬럼
  • 마무리
    
• 13장 텍스트 스타일
  • 어떻게 하면 텍스트를 근사하게 꾸밀 수 있나요?
• 사용자마다 다른 웹 브라우저 기본 글꼴
• 줄 간격 조정
• font-family에 글꼴 모아놓기
• 커닝 (글자 간격)

드랍캡

• 텍스트 정렬
• 텍스트 변형
• 소형 대문자
• 문단 들여쓰기
  • 마무리
    

14장 이미지 바꿔치기

• CSS로 텍스트 대신 이미지를 표시하려면 어떻게 해야 하나요?

아직은 진행 중

사용에 유의

방법 A. FIR 방법

방법 B. LIR 방법

방법 C. 파크 방법

• 요약
• 심화 학습

로고 모양 바꾸기

접근성이 뛰어난 이미지 탭 롤오버

마무리

15장 <BODY>를 위한 스타일

• 2단 또는 3단으로 자유롭게 변경하기
• 마크업과 스타일 구조
• <body>에 클래스 지정
• 그 밖의 다양한 활용 방안
• 사용자가 머물고 있는 위치 알리기
• 내비게이션바 구현을 위한 리스트
• 각 파트 지정
• CSS의 마법
• 마무리
  

16장 새로운 도약

• 이제 어디로 가야 할까요?

관련 기관 및 간행물

• 영향력 있는 블로그
• 관련 도서
• 맺는 말
  

3부 한국어판 특별 부록

부록 I 웹 표준 블로그 만들기

블로그 출판

1단계. 블로그 만들기

2단계. 블로그 글 입력

3단계. 블로그 스킨 템플릿 고치기

• 블로그 페이지를 위한 마크업과 스타일
• 1단계. 기본 문서 구조

2단계. 블로그 글 추가하기

3단계. 블로그 템플릿 작성

4단계. CSS 작성하기

• 기타 참조 블로그
• 마무리
  

부록 II 국내외 웹 접근성 소개 및 현황

• 웹 접근성이란
• 우리나라 웹 접근성 관련 법률 및 동향
• 해외 선진국의 웹 접근성 관련 법률 및 동향
• 국내 스크린리더 프로그램 현황
• 한국정보문화진흥원 소개
• 정보통신 접근성 향상 표준화 포럼
• 웹 접근성 자동평가 툴
• 한국형 웹 콘텐츠 접근성 지침(KWCAG) 1.0
• W3C 웹 콘텐츠 접근성 지침(WCAG) 1.0

[ p12 아래에서 6행 ]
list-style-image: none;
→ list-style: none;

[ p13 두 번째 문단 1행 ]
가로 15픽셀, 세로 5픽셀
→ 가로 12픽셀, 세로 12픽셀

[ p41 코드 2행 ]
<table> → <table border="1">

[ p95 코드 4행 ]
id"name" → id="name"

[ p147, p150 코드 내 ]
text-decoration: green;
→ text-decoration: none;

[ p198 코드 내 ]
@import "hifi.css"
→ @import "hifi.css";

[ p200 코드 내 ]
@import "master.css" → @import "master.css";
@import "custom.css" → @import "custom.css";

[ p222 '인쇄 미리보기로 잉크 아끼기' 절 3행 ]
미리보기 옵션이 이어서 → 미리보기 옵션이 있어서

[ p256, p257 코드 내 ]
voice-family: "\"}"\";
→ voice-family: "\"}\"";

[ p270 첫 번째 문단 1행 ]
이렇게 해서 첫번째 문단의 "I"를 맘대로 제어할 수 있게 되었습니다.
→ 이렇게 해서 첫번째 문단의 "유"를 맘대로 제어할 수 있게 되었습니다.

[ 부록 CD 예제소스코드 한글판 chapter1 ]
#fig1_7 #minitabs a.active, #fig1_8 #minitabs a:hover {
→ #fig1_7 #minitabs a.active, #fig1_7 #minitabs a:hover {