옮긴이의 말_ 김지원
옮긴이의 말_ 홍승표
감사의 글
저자 소개
Part I 기초편
1장 시작하기에 앞서
1-1 누구를 위한 책일까요?
이 책은 어떤 사람들과 어울리지 않을까요?
1-2 이 책을 통해 무엇을 얻을 수 있을까요?
1-3 이 책을 통해 얻을 수 없는 것
1-4 이 책을 활용하는 방법
커뮤니티에 가입하세요
1-5 이어질 내용
2장 철학과 원칙
브라우저 전쟁
표준화의 태동
웹 표준화의 현재
2-1 왜 웹 표준안을 준수해야 하는가?
2-2 World Wide Web을 개발하는 방법
모든 브라우저에서 똑같이 보이지 않을 수도 있습니다
단계적 향상
콘텐트, 디자인, 기능의 분리
하나 더, 의미 있는 구성 방법
다음 장에서는
3장 마크업
3-1 브라우저 위에서 돌아가는 것만으로 충분하지 않은 이유
3-2 HTML과 XHTML
3-3 구문과 의미
3-4 HTML에 관한 짧은 역사
HTML 4.01
XHTML 1.0, 1.1, 2.0
HTML5
3-5 HTML의 핵심 개념
웹 페이지란 무엇일까요?
용어: 요소, 속성, 태그, 기타
비어 있는 HTML 요소
3-6 문서 타입
DOCTYPE을 입력합니다
3-7 HTML의 기본 구조
최상위 요소, html
head 요소
body 요소
인라인 요소
3-8 HTML 의미의 확장
class
id
span
3-9 링크: “하이퍼 텍스트”에서 “하이퍼”가 의미하는 것
앵커
URL의 절대 경로와 상대 경로
웹 상에 있는 특정 자원으로의 링크
3-10 내장 콘텐트
이미지
이미지 포함하기
멀티미디어 콘텐트
3-11 폼
form 요소
input 요소
button 요소
메뉴
폼 컨트롤 비활성화하기
레이블 컨트롤
컨트롤 그룹핑하기
3-12 테이블
테이블의 구조
열 병합하기
3-13 프레임과 인라인 프레임
3-14 특수 문자
3-15 품질 보증
마크업 문서의 유효성 검증
링크 확인
HTML Tidy
3-16 HTML VS XHTML
구문상의 차이점
서버가 제공하는 문서
에러 처리
무엇을 사용해야 할까요?
4장 프레젠테이션과 디자인
4-1 웹 스타일에 관한 짧은 역사
콘텐트의 내용과 디자인을 분리해야 하는 이유는 무엇일까요?
4-2 CSS가 무엇일까요?
4-3 CSS를 어떻게 사용할까요?
인라인 스타일
내장 CSS
외부 CSS 파일에 링크
4-4 CSS의 기본 구문
선택자, 선언 블록, 선언, 속성
4-5 선택자의 기본
태그 선택자
여러 선택자를 하나로 묶기
4-6 기본 속성: 글꼴 스타일
색상
글꼴 계통
글자 크기
글자 두께
글자 스타일
글자 장식
4-7 상속
4-8 구체화하기: class, id 선택자
class 선택자
id 선택자
특정도
4-9 자주 사용하는 글자 레이아웃 속성
글자 정렬
라인 높이
글자 또는 단어의 간격
들여쓰기
4-10 결합자: 하위 선택자와 자식 선택자
하위 선택자
자식 선택자
연쇄선택
하위 선택자와 자식 선택자 구체화 하기
4-11 널리 사용되는 배경 속성
배경색
배경 이미지
URL
배경 이미지의 반복
배경 이미지의 위치
배경 이미지의 스크롤 여부
CSS3의 배경 속성
속성 약식 지정
4-12 동적 선택자
4-13 기본 페이지 레이아웃
블록 요소 vs 인라인 요소
박스 모델
너비
높이
튀어나온 콘텐트
마진
테두리
패딩
요소의 전체 너비와 높이는 어떻게 산정할까요?
4-14 고급 페이지 레이아웃
콘텐트 띄우기
float 속성 초기화
4-15 위치 선정
위치 선정 과정과 position 속성
4-16 고급 선택자
인접 선택자
속성 선택자
4-17 화면 출력 타입
가시성
리스트
4-18 기타 속성
프린트 출력 관련 속성
인터페이스 관련 속성
기타 선택자
CSS를 통한 콘텐트 생성
4-19 매체 타입
매체별로 특화된 CSS
매체 타입 링크하기
매체 타입 내장하기
@media
4-20 스타일 시트 가져오기
@import
4-21 품질 보증
CSS 유효성 검증하기
브라우저 지원 여부 확인
4-22 도전 과제와 기술
폼 스타일
이미지를 통한 글자열 대체
페이지 레이아웃
멀티 브라우저 지원에 관한 과제
CSS 코드 구성하기
CSS와 사이트의 성능 문제
5장 DOM
DOM 레벨 0
중급 DOM
DOM 레벨 1
DOM 레벨 2
DOM 레벨 3
5-1 DOM 계층 구조
5-2 중요한 DOM 객체와 함수
window
document
element
5-3 이벤트
이벤트 리스너
이벤트 전달
5-4 표준화 DOM 스크립팅 관련 모범 사례
절제된 스크립트 처리
브라우저의 비 호환성
innerHTML vs DOM 함수
보안
5-5 자바스크립트 라이브러리의 발전
자바스크립트 라이브러리 선택하기
JQuery
Prototype
Script.aculo.us
YUI
5-6 DOM 검사하기
IE6, 7버전용 개발 도구
인터넷 익스플로러 8 개발자 도구
파이어폭스 파이어버그와 Web Developer 도구
오페라를 위한 Dragonfly
사파리 Web Inspector
5-7 Ajax
5-8 정리
6장 웹 접근성
비즈니스 관점에서 바라본 웹 접근성
국제적으로 벌어지고 있는 법적 이슈
6-1 웹 접근성과 W3C
WCAG1
WCAG 2
ARIA
6-2 흔한 웹 접근성 문제와 해결책
링크와 title 속성
표제
alt 문자열
색상 대비
테이블
폼
6-3 정리
Part II 응용편
7장 브라우저의 이해, 버그 해결, 선별 적용
7-1 브라우저의 세 가지 문제점
7-2 브라우저 모드
관용 모드와 DOCTYPE 전환
표준 모드 선택
IE8에 새로 도입된 DOCTYPE 전환 방식
7-3 브라우저의 흔한 버그
박스 모델 버그
이중 플로트 마진 버그
비통합 마진 버그
7-4 IE와 hasLayout
브라우저의 내부
요소에 레이아웃 성질이 생기는 원인
hasLayout을 이용한 버그 유발과 수정
7-5 버그 교정: 핵을 쓸 것인가 말 것인가?
적을 파악합시다
7-6 브라우저별 스타일 맞춤화
구식 브라우저엔 스타일 시트 차단하기
7-7 브라우저에 기능이 없을 때
딘 에드워드의 IE 7과 IE 8
7-8 정리
8장 세련된 마크업을 위한 좋은 습관
8-1 코드 가독성
명명법
형식화, 주석 넣기, 일관성
8-2 관습적 시맨틱 HTML
의미에 충실한 HTML 요소, 클래스, ID 사용하기
전자 상거래 마크업 언어
8-3 마크업과 검색엔진 최적화SEO
8-4 마이크로포맷
마이크로포맷의 장점
마이크로포맷 활용
마이크로포맷 도구
훨씬 많습니다
8-5 정리
9장 CSS 기반의 페이지 레이아웃
9-1 가로 중앙 정렬
9-2 세로 중앙 정렬
9-3 CSS 위치 지정
위치 지정 방식
위치 지정 속성
절대 위치 지정 실습
9-4 float 적용 레이아웃
부유된 가로 내비게이션 바
박스 채우기
내비게이션 목록 주위의 테두리
float 다단 레이아웃
푸터
색상 문제
9-5 격자 레이아웃
CSS2.1 테이블 레이아웃 속성
9-6 정리
10장 CSS 초기화와 프레임워크
10-1 CSS 초기화
CSS 초기화의 장점
초기화에 대한 반대 입장
CSS 초기화 명령문의 형태
주류 CSS 초기화 기법
10-2 CSS 프레임워크
CSS 프레임워크에 대한 찬반 논란
주류 프레임워크와 용도
10-3 정리
Part III HTML5 + CSS3
11장 HTML5
11-1 HTML5는 또 뭔가요?
11-2 HTML5의 주요 기능
에러 처리
canvas 요소
로컬 저장소
웹 워커를 이용한 자바스크립트 스레드
멀티미디어 지원
지오로케이션을 이용한 위치 인식 웹 애플리케이션
사용자 편집 가능 페이지
11-3 HTML4에서 달라진 점
DOCTYPE 선언 방식
header, footer, section을 비롯한 새 구조 요소
11-4 HTML5 샘플 문서
11-5 비디오, 오디오를 비롯한 삽입 콘텐트
비디오
오디오
브라우저의 비디오/오디오 지원
비디오와 오디오 접근성
11-6 브라우저의 HTML5 지원 여부
IE7 이하 버전
11-7 HTML5의 유효검사와 서비스 실시
11-8 HTML5를 당장 사용해야 하나요?
12장 CSS3와 전망
12-1 돌아온 CSS
12-2 CSS3 시작하기
양방향 호환성은 해결됐나요?
브라우저 업체별 접두어
12-3 새로 생긴 선택자
구조적인 가상 요소 선택자
문서 구조
first-child
first-of-type
last-child
nth-child
target
12-4 정리
13장 CSS3의 새 속성
13-1 섀도 이펙트
text-shadow
box-shadow
13-2 border-radius
호환성
13-3 투명도
background-color: transparent
반투명 배경 이미지
불투명도
13-4 RGBa 색상
호환성
13-5 다단 텍스트
13-6 전환
전환 지정하기
13-7 기타 속성
테두리 이미지
멀티 배경 이미지
CSS 변형
그레이디언트
13-8 훨씬 많습니다!
14장 CSS3로 미디어 선별 적용
브라우저 스니핑
핵
14-1 미디어 질의
미디어 질의 사용법
미디어 질의의 적합한 용도
호환성
하지만 과연 이 방법이 브라우저 스니핑보다 나을까요?
14-2 정리
15장 웹 폰트
15-1 폰트 링크와 삽입의 역사
15-2 법률 현안
15-3 기술 현안
15-4 @font-face와 폰트 삽입
IE에서 폰트 삽입하기
다른 브라우저에서 폰트 링크하기
두 방법의 단점
문제점 최소화하기
폰트 서비스
15-5 정리
16장 SVG와 캔버스 - 브라우저에서 다채로운 그림 구현
16-1 SVG
주요 SVG 개념과 문법
SVG 좌표계
SVG의 장점
SVG의 용도
웹 페이지에 SVG 넣기
브라우저별 SVG 지원 여부
SVG 서비스하기
SVG보다 나은 대안
16-2 HTML5의 canvas 요소
canvas 사용
canvas 요소 추가
드로잉 콘텍스트 가져오기
콘텍스트로 그리기
그 밖의 기능
16-3 캔버스냐 SVG냐
16-4 정리
참고 자료
Index
옮긴이의 말_ 홍승표
감사의 글
저자 소개
Part I 기초편
1장 시작하기에 앞서
1-1 누구를 위한 책일까요?
이 책은 어떤 사람들과 어울리지 않을까요?
1-2 이 책을 통해 무엇을 얻을 수 있을까요?
1-3 이 책을 통해 얻을 수 없는 것
1-4 이 책을 활용하는 방법
커뮤니티에 가입하세요
1-5 이어질 내용
2장 철학과 원칙
브라우저 전쟁
표준화의 태동
웹 표준화의 현재
2-1 왜 웹 표준안을 준수해야 하는가?
2-2 World Wide Web을 개발하는 방법
모든 브라우저에서 똑같이 보이지 않을 수도 있습니다
단계적 향상
콘텐트, 디자인, 기능의 분리
하나 더, 의미 있는 구성 방법
다음 장에서는
3장 마크업
3-1 브라우저 위에서 돌아가는 것만으로 충분하지 않은 이유
3-2 HTML과 XHTML
3-3 구문과 의미
3-4 HTML에 관한 짧은 역사
HTML 4.01
XHTML 1.0, 1.1, 2.0
HTML5
3-5 HTML의 핵심 개념
웹 페이지란 무엇일까요?
용어: 요소, 속성, 태그, 기타
비어 있는 HTML 요소
3-6 문서 타입
DOCTYPE을 입력합니다
3-7 HTML의 기본 구조
최상위 요소, html
head 요소
body 요소
인라인 요소
3-8 HTML 의미의 확장
class
id
span
3-9 링크: “하이퍼 텍스트”에서 “하이퍼”가 의미하는 것
앵커
URL의 절대 경로와 상대 경로
웹 상에 있는 특정 자원으로의 링크
3-10 내장 콘텐트
이미지
이미지 포함하기
멀티미디어 콘텐트
3-11 폼
form 요소
input 요소
button 요소
메뉴
폼 컨트롤 비활성화하기
레이블 컨트롤
컨트롤 그룹핑하기
3-12 테이블
테이블의 구조
열 병합하기
3-13 프레임과 인라인 프레임
3-14 특수 문자
3-15 품질 보증
마크업 문서의 유효성 검증
링크 확인
HTML Tidy
3-16 HTML VS XHTML
구문상의 차이점
서버가 제공하는 문서
에러 처리
무엇을 사용해야 할까요?
4장 프레젠테이션과 디자인
4-1 웹 스타일에 관한 짧은 역사
콘텐트의 내용과 디자인을 분리해야 하는 이유는 무엇일까요?
4-2 CSS가 무엇일까요?
4-3 CSS를 어떻게 사용할까요?
인라인 스타일
내장 CSS
외부 CSS 파일에 링크
4-4 CSS의 기본 구문
선택자, 선언 블록, 선언, 속성
4-5 선택자의 기본
태그 선택자
여러 선택자를 하나로 묶기
4-6 기본 속성: 글꼴 스타일
색상
글꼴 계통
글자 크기
글자 두께
글자 스타일
글자 장식
4-7 상속
4-8 구체화하기: class, id 선택자
class 선택자
id 선택자
특정도
4-9 자주 사용하는 글자 레이아웃 속성
글자 정렬
라인 높이
글자 또는 단어의 간격
들여쓰기
4-10 결합자: 하위 선택자와 자식 선택자
하위 선택자
자식 선택자
연쇄선택
하위 선택자와 자식 선택자 구체화 하기
4-11 널리 사용되는 배경 속성
배경색
배경 이미지
URL
배경 이미지의 반복
배경 이미지의 위치
배경 이미지의 스크롤 여부
CSS3의 배경 속성
속성 약식 지정
4-12 동적 선택자
4-13 기본 페이지 레이아웃
블록 요소 vs 인라인 요소
박스 모델
너비
높이
튀어나온 콘텐트
마진
테두리
패딩
요소의 전체 너비와 높이는 어떻게 산정할까요?
4-14 고급 페이지 레이아웃
콘텐트 띄우기
float 속성 초기화
4-15 위치 선정
위치 선정 과정과 position 속성
4-16 고급 선택자
인접 선택자
속성 선택자
4-17 화면 출력 타입
가시성
리스트
4-18 기타 속성
프린트 출력 관련 속성
인터페이스 관련 속성
기타 선택자
CSS를 통한 콘텐트 생성
4-19 매체 타입
매체별로 특화된 CSS
매체 타입 링크하기
매체 타입 내장하기
@media
4-20 스타일 시트 가져오기
@import
4-21 품질 보증
CSS 유효성 검증하기
브라우저 지원 여부 확인
4-22 도전 과제와 기술
폼 스타일
이미지를 통한 글자열 대체
페이지 레이아웃
멀티 브라우저 지원에 관한 과제
CSS 코드 구성하기
CSS와 사이트의 성능 문제
5장 DOM
DOM 레벨 0
중급 DOM
DOM 레벨 1
DOM 레벨 2
DOM 레벨 3
5-1 DOM 계층 구조
5-2 중요한 DOM 객체와 함수
window
document
element
5-3 이벤트
이벤트 리스너
이벤트 전달
5-4 표준화 DOM 스크립팅 관련 모범 사례
절제된 스크립트 처리
브라우저의 비 호환성
innerHTML vs DOM 함수
보안
5-5 자바스크립트 라이브러리의 발전
자바스크립트 라이브러리 선택하기
JQuery
Prototype
Script.aculo.us
YUI
5-6 DOM 검사하기
IE6, 7버전용 개발 도구
인터넷 익스플로러 8 개발자 도구
파이어폭스 파이어버그와 Web Developer 도구
오페라를 위한 Dragonfly
사파리 Web Inspector
5-7 Ajax
5-8 정리
6장 웹 접근성
비즈니스 관점에서 바라본 웹 접근성
국제적으로 벌어지고 있는 법적 이슈
6-1 웹 접근성과 W3C
WCAG1
WCAG 2
ARIA
6-2 흔한 웹 접근성 문제와 해결책
링크와 title 속성
표제
alt 문자열
색상 대비
테이블
폼
6-3 정리
Part II 응용편
7장 브라우저의 이해, 버그 해결, 선별 적용
7-1 브라우저의 세 가지 문제점
7-2 브라우저 모드
관용 모드와 DOCTYPE 전환
표준 모드 선택
IE8에 새로 도입된 DOCTYPE 전환 방식
7-3 브라우저의 흔한 버그
박스 모델 버그
이중 플로트 마진 버그
비통합 마진 버그
7-4 IE와 hasLayout
브라우저의 내부
요소에 레이아웃 성질이 생기는 원인
hasLayout을 이용한 버그 유발과 수정
7-5 버그 교정: 핵을 쓸 것인가 말 것인가?
적을 파악합시다
7-6 브라우저별 스타일 맞춤화
구식 브라우저엔 스타일 시트 차단하기
7-7 브라우저에 기능이 없을 때
딘 에드워드의 IE 7과 IE 8
7-8 정리
8장 세련된 마크업을 위한 좋은 습관
8-1 코드 가독성
명명법
형식화, 주석 넣기, 일관성
8-2 관습적 시맨틱 HTML
의미에 충실한 HTML 요소, 클래스, ID 사용하기
전자 상거래 마크업 언어
8-3 마크업과 검색엔진 최적화SEO
8-4 마이크로포맷
마이크로포맷의 장점
마이크로포맷 활용
마이크로포맷 도구
훨씬 많습니다
8-5 정리
9장 CSS 기반의 페이지 레이아웃
9-1 가로 중앙 정렬
9-2 세로 중앙 정렬
9-3 CSS 위치 지정
위치 지정 방식
위치 지정 속성
절대 위치 지정 실습
9-4 float 적용 레이아웃
부유된 가로 내비게이션 바
박스 채우기
내비게이션 목록 주위의 테두리
float 다단 레이아웃
푸터
색상 문제
9-5 격자 레이아웃
CSS2.1 테이블 레이아웃 속성
9-6 정리
10장 CSS 초기화와 프레임워크
10-1 CSS 초기화
CSS 초기화의 장점
초기화에 대한 반대 입장
CSS 초기화 명령문의 형태
주류 CSS 초기화 기법
10-2 CSS 프레임워크
CSS 프레임워크에 대한 찬반 논란
주류 프레임워크와 용도
10-3 정리
Part III HTML5 + CSS3
11장 HTML5
11-1 HTML5는 또 뭔가요?
11-2 HTML5의 주요 기능
에러 처리
canvas 요소
로컬 저장소
웹 워커를 이용한 자바스크립트 스레드
멀티미디어 지원
지오로케이션을 이용한 위치 인식 웹 애플리케이션
사용자 편집 가능 페이지
11-3 HTML4에서 달라진 점
DOCTYPE 선언 방식
header, footer, section을 비롯한 새 구조 요소
11-4 HTML5 샘플 문서
11-5 비디오, 오디오를 비롯한 삽입 콘텐트
비디오
오디오
브라우저의 비디오/오디오 지원
비디오와 오디오 접근성
11-6 브라우저의 HTML5 지원 여부
IE7 이하 버전
11-7 HTML5의 유효검사와 서비스 실시
11-8 HTML5를 당장 사용해야 하나요?
12장 CSS3와 전망
12-1 돌아온 CSS
12-2 CSS3 시작하기
양방향 호환성은 해결됐나요?
브라우저 업체별 접두어
12-3 새로 생긴 선택자
구조적인 가상 요소 선택자
문서 구조
first-child
first-of-type
last-child
nth-child
target
12-4 정리
13장 CSS3의 새 속성
13-1 섀도 이펙트
text-shadow
box-shadow
13-2 border-radius
호환성
13-3 투명도
background-color: transparent
반투명 배경 이미지
불투명도
13-4 RGBa 색상
호환성
13-5 다단 텍스트
13-6 전환
전환 지정하기
13-7 기타 속성
테두리 이미지
멀티 배경 이미지
CSS 변형
그레이디언트
13-8 훨씬 많습니다!
14장 CSS3로 미디어 선별 적용
브라우저 스니핑
핵
14-1 미디어 질의
미디어 질의 사용법
미디어 질의의 적합한 용도
호환성
하지만 과연 이 방법이 브라우저 스니핑보다 나을까요?
14-2 정리
15장 웹 폰트
15-1 폰트 링크와 삽입의 역사
15-2 법률 현안
15-3 기술 현안
15-4 @font-face와 폰트 삽입
IE에서 폰트 삽입하기
다른 브라우저에서 폰트 링크하기
두 방법의 단점
문제점 최소화하기
폰트 서비스
15-5 정리
16장 SVG와 캔버스 - 브라우저에서 다채로운 그림 구현
16-1 SVG
주요 SVG 개념과 문법
SVG 좌표계
SVG의 장점
SVG의 용도
웹 페이지에 SVG 넣기
브라우저별 SVG 지원 여부
SVG 서비스하기
SVG보다 나은 대안
16-2 HTML5의 canvas 요소
canvas 사용
canvas 요소 추가
드로잉 콘텍스트 가져오기
콘텍스트로 그리기
그 밖의 기능
16-3 캔버스냐 SVG냐
16-4 정리
참고 자료
Index