추가 적립 안내

HTML과 CSS의 문법을 안다고 해서 웹 디자인을 잘 할 수 있을까?

개발자들은 웹사이트가 어떤 언어로 작성되는지, 브라우저가 어떻게 렌더링을 하는지 등을 잘 이해하지만, 색상이나 글꼴 등에는 그리 신경을 쓰지 않는다.
이 책은 음식 레시피 웹사이트를 리뉴얼하면서, 디자인 시 고려해야 할 기본 사항들을 하나씩 짚어가며 설명한다. 웹사이트에 사용할 색상을 어떤 식으로 선택할지, 글꼴과 줄간격을 어떻게 지정해야 읽기 편한지 등을 설명하며, 이를 구현할 때는 어떤 프로그램(포토샵, 일러스트레이터 등)을 어떤 식으로 사용하는지 등도 알려준다. 또한 실제 시각 장애인들이 사용성과 접근성을 고려하지 않은 사이트를 어떻게 보게 되는지 사진으로 보여준다.
웹 디자인에 뛰어들지는 않았더라도, 웹 디자이너와 좀더 깊이 있게 대화하고 싶다면 이 책이 꼭 필요할 것이다.

이 책이 다루는 내용
- 색상 설계(color scheme), 글꼴
- 이미지, 디자인 목업
- 디자인을 HTML과 CSS로 구현하기
- 웹표준과 접근성
- 검색 엔진 최적화
- 모바일 기기용 디자인
- 성능 개선

이 책에 수록된 모든 예제 코드는 출판사 스프링노트인 http://insightbook.springnote.com/pages/10882588에서 다운받을 수 있습니다.

옮긴이의 글
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 성능 바로잡기