목차

옮긴이의 글

1장 들어가며
__1.1 시작하기 전에
__1.2 디자인 프로세스 따라가보기
____요구사항 수집하기
____포토샵 작업
____코딩
____준비 완료
____항상 쉬운 것만은 아니다
__1.3 YourFoodbox.com
__1.4 시작해볼까?
__1.5 감사의 말

1부 디자인의 기본 

2장 사이트 리디자인의 기본: 푸드박스 재설계하기
__2.1 기존 사이트
__2.2 요구사항 수집하기
__2.3 목적을 분명히 하자
__2.4 다음에 할일
__2.5 아이디어 스케치하기
____레이아웃 규칙
____세 개의 스케치
__2.6 스케치 선택
__2.7 정리
3장 색 선택하기
__3.1 색의 기초
____색상, 채도, 명도
____가산 혼합과 감산 혼합
__3.2 색 컨텍스트
__3.3 감정을 일깨우는 색상
____따뜻한 색
____빨강
____차가운 색
____자연색
____색과 사용자
__3.4 색상 계획
____단색 색상 계획
____인접 색상 계획
____보색 색상 계획
____인접 보색 색상 계획
__3.5 웹 안전 색 팔레트
__3.6 색상 계획 만들기
____기술적인 방법을 사용해 색을 선택하기
____자연적인 방법을 사용해 색상 선택하기
__3.7 색상 계획 선택하기
____전경색과 배경색
____링크
__3.8 요약
4장 글꼴과 타이포그래피
__4.1 글꼴의 구조
__4.2 글꼴 유형
____세리프 글꼴
____산세리프 글꼴
____고정폭 또는 단일폭(monospaced) 글꼴
__4.3 글꼴 사용시 제약사항
____웹 안전 글꼴
____이미지 대체
____글꼴 스택에서 대체 글꼴 지정하기
__4.4 글꼴 선택하기
____콘텐츠 글꼴
____표제 글꼴
__4.5 기준선 그리드 사용하기
____행 간격
____측정 단위
____Foodbox에 적용할 글꼴 선택하기
__4.6 요약

2부 이미지 추가하기 

5장 Foodbox 로고 디자인하기
__5.1 작업 폴더 설정하기
__5.2 Foodbox 로고
__5.3 나만의 로고를 원한다면?
__5.4 요약
6장 목업 디자인: 페이지 구조
__6.1 레이어 살짝 살펴보기
__6.2 기본 구조
____화면 크기
____고정폭 레이아웃
____그리드 설정하기
____가이드로 영역 지정하기
____상자 그리기
__6.3 로고 배치
__6.4 레이어 그룹으로 화면 조직화하기
__6.5 로고에 반영(Ref lection) 효과 추가하기
__6.6 푸터
__6.7 요약
7장 목업 디자인: 콘텐츠
__7.1 검색창 만들기
__7.2 레시피 태그 클라우드
__7.3 점점 늘어나는 작업 범위
____재료 태그 클라우드
__7.4 맛있어 보이는 마스터헤드 목업
__7.5 메인 콘텐츠
____본문 텍스트
__7.6 브라우저 테스트
__7.7 요약
8장 목업 다듬기
__8.1 검색 아이콘 만들기
____아이콘의 배경 만들기
____돋보기 만들기
____검색 아이콘 배치하기
__8.2 회원 가입과 로그인 버튼 만들기
____텍스트 추가하기
____회원 가입 버튼 추가하기
__8.3 콘텐츠가 도착했다!
____더미 텍스트 대체하기
____최근 추가된 레시피 영역 추가하기
__8.4 요약

3부 사이트 만들기 

9장 HTML로 홈페이지 만들기
__9.1 웹 표준으로 작업하기
__9.2 홈페이지 구조
__9.3 시맨틱 마크업
__9.4 홈페이지 구조
____Doctype
____HTML 태그
____속성
____Head와 Body
____닫는 태그가 없는 태그
____페이지 타이틀
__9.5 헤더
__9.6 사이드바
____검색 폼
____레시피 태그 클라우드
____재료 태그 클라우드
__9.7 메인 콘텐츠
____파스타 이미지
____텍스트 콘텐츠
____회원 가입과 로그인 버튼
____최근 레시피 섹션
__9.8 푸터
__9.9 마크업 유효성 검사
____웹 페이지 개발을 위한 파이어폭스 설정하기
____웹 개발자 툴바
____문서의 유효성 검증하기
__9.10 HTML 5
__9.11 요약
10장 목업에서 이미지 만들기
__10.1 그래픽 최적화
____작은 이미지는 최종 사용자가 좀더 사용하기 쉽다
____작은 이미지는 대역폭에 주는 장점도 있다
____작은 이미지는 물리적인 공간도 덜 차지한다
____다운로드 시간
__10.2 다양한 그래픽 포맷 다루기
____GIF
____PNG
____JPEG
__10.3 문서 잘라내기
____목업에 대한 재확인
__10.4 슬라이스 만들기
____나머지 이미지 잘라내기
__10.5 투명한 PNG로 배너 만들기
____레이어 감추기
____슬라이스 저장하기
__10.6 나머지 요소 내보내기
__10.7 요약
11장 CSS로 레이아웃 설정하기
__11.1 브라우저는 무시무시하다
__11.2 CSS의 기초
____선택자
____선언부 : 속성과 값
____겹치는 부분
__11.3 브라우저에서는 CSS를 어떻게 사용하나
____인라인 스타일
____Style 태그
____외부 CSS 파일
__11.4 새로운 스타일시트를 만들고 링크 걸기
__11.5 기본 구조, 헤더, 푸터 정의하기
____브라우저 기본값
____박스 모델
____콘텐츠 가운데 정렬
____헤더와 푸터 지정하기
__11.6 하나의 컬럼을 두 개로 나누기
____문서 플로우
____띄우기
____배경과 띄우기의 문제
__11.7 콘텐츠에 마진 적용하기
____사이드바 요소 빠르게 포맷 지정하기
__11.8 메인 콘텐츠
____메인 텍스트
____회원 가입 영역
____최근 레시피
__11.9 푸터 다시 보기
__11.10 요약
12장 커버업 기법으로 타이틀 영역을 대체하기
__12.1 커버업 기법 설명
__12.2 대체할 HTML 준비하기
__12.3 텍스트 덮기
__12.4 다른 타이틀 대체하기
__12.5 링크 대체하기
____투명도
__12.6 대체 기법의 부정적인 면
__12.7 요약
13장 스타일 적용하기
__13.1 색상과 글꼴 설정하기
____스타일 가이드의 중요성
____가상 클래스
__13.2 태그 클라우드
__13.3 검색 양식
__13.4 푸터
__13.5 미진한 부분 정리하기
____이미지 경계선 제거하기
____배너 색상 확장하기
__13.6 요약
14장 인쇄에 적합한 페이지 만들기
__14.1 인쇄 준비하기
__14.2 인쇄 스타일시트 연결하기
__14.3 필요하지 않은 요소 제거하기
____noprint 클래스
__14.4 마진, 넓이, 글꼴 설정하기
____페이지 마진
____글꼴 집합(Font Family) 선택하기
____구분자 추가하기
__14.5 링크 고정시키기
__14.6 놀란 사용자 다루기
__14.7 요약

4부 오픈 준비하기 

__15장 인터넷 익스플로러와 다른 브라우저 다루기
__15.1 어떤 것을 지원할지 결정하기
____브라우저 지원
____기능 지원
__15.2 브라우저 통계
__15.3 인터넷 익스플로러: 무시할 수 없는 악
____약간의 균형감
__15.4 인터넷 익스플로러 7
____IE에서 Quirks 모드
__15.5 인터넷 익스플로러 6
____깨진 요소 고치기
____컬럼 고정하기
____투명도 수정하기
____헤더 이미지 아래 여백 수정하기
__15.6 인터넷 익스플로러 8
____접근 방식의 문제점
__15.7 다른 브라우저
__15.8 요약
16장 접근성과 사용성
__16.1 접근성은 당신에게 어떤 의미인가?
__16.2 기본적인 접근성 이슈
____시각 장애가 있는 사람
____색맹 사용자
____시력 장애가 있는 사람들
____청각 장애가 있는 사람들
____근육 장애와 마우스를 사용하지 않는 경우
__16.3 모두를 위해!
____내비게이션
____오류 처리
____크로스 브라우저 테스트
__16.4 심각한 비즈니스 문제
__16.5 사이트의 접근성 향상시키기
____건너뛰기 링크 추가하기
____스크린 리더와 display:none
____네거티브 포지셔닝으로 건너뛰기 링크 숨기기
____폼에 라벨 추가하기
__16.6. 탭
____tabindex 피하기
__16.7 접근성 테스트 점검 목록
__16.8 요약
17장 파비콘 만들기
__17.1 간단한 아이콘 만들기
__17.2 파비콘 만들기
__17.3 요약
18장 검색 엔진 최적화
__18.1 콘텐츠가 왕이다
____검색 엔진 속이기
____콘텐츠란 무엇인가?
__18.2 키워드 선택하기
____그들이 당신을 어떻게 찾을지를 생각해보자
____어떤 식으로 찾아지기를 원하는지 결정하자
____경쟁사 스파이
____키워드 추가하기
__18.3 콘텐츠 조화시키기
__18.4 사용자들이 떠날 만큼의 최적화는 피하자!
__18.5 링크
__18.6 모든 것은 상식으로 귀착된다
__18.7 요약
19장 모바일 디바이스를 위한 디자인
__19.1 모바일 사용자
__19.2 (매우) 작은 화면을 생각해보기
__19.3 자바스크립트
__19.4 모바일 콘텐츠 제공하기
____모바일 스타일시트
____유저 에이전트(User Agent) 탐지
____여러 하위 도메인 사용하기
__19.5 무엇을 지원할지 결정하기
____콘텐츠를 복사하지 않고 사이트를 미러링하기
____콘텐츠 변경
____핸들러 작성하기
____개선할 점
__19.6 모바일 사용자를 위한 구조 개선
__19.7 요약
20장 테스트와 성능 향상
__20.1 성능 향상을 위한 전략
__20.2 결정적인 성능 이슈
____속도 테스트
____YSlow
__20.3 성능 바로잡기