HOME > 상세정보

상세정보

개발자, 웹 디자인에 뛰어들다 (14회 대출)

자료유형
단행본
개인저자
Hogan, Brian P. 이준하, 역
서명 / 저자사항
개발자, 웹 디자인에 뛰어들다 / 브라이언 P. 호건 지음 ; 이준하 옮김
발행사항
서울 :   인사이트,   2012  
형태사항
xvi, 360 p. : 삽화(일부천연색) ; 23 cm
원표제
Web design for developers : a programmer's guide to design tools and techniques
ISBN
9788966260249
서지주기
참고문헌(p. 341-344)과 색인수록
일반주제명
Web sites -- Design Web site development Internet programming
000 00996camcc2200313 c 4500
001 000045703261
005 20120430174351
007 ta
008 120427s2012 ulka b 001c kor
020 ▼a 9788966260249 ▼g 13560
035 ▼a (KERIS)BIB000012742977
040 ▼a 211062 ▼c 211062 ▼d 211009
041 1 ▼a kor ▼h eng
082 0 4 ▼a 005.72 ▼2 22
085 ▼a 005.72 ▼2 DDCK
090 ▼a 005.72 ▼b 2012z3
100 1 ▼a Hogan, Brian P.
245 1 0 ▼a 개발자, 웹 디자인에 뛰어들다 / ▼d 브라이언 P. 호건 지음 ; ▼e 이준하 옮김
246 1 9 ▼a Web design for developers : ▼b a programmer's guide to design tools and techniques
260 ▼a 서울 : ▼b 인사이트, ▼c 2012
300 ▼a xvi, 360 p. : ▼b 삽화(일부천연색) ; ▼c 23 cm
504 ▼a 참고문헌(p. 341-344)과 색인수록
650 0 ▼a Web sites ▼x Design
650 0 ▼a Web site development
650 0 ▼a Internet programming
700 1 ▼a 이준하, ▼e
900 1 0 ▼a 호건, 브라이언 P., ▼e
945 ▼a KLPA

소장정보

No. 소장처 청구기호 등록번호 도서상태 반납예정일 예약 서비스
No. 1 소장처 과학도서관/Sci-Info(1층서고)/ 청구기호 005.72 2012z3 등록번호 121219374 도서상태 대출가능 반납예정일 예약 서비스 B M
No. 2 소장처 과학도서관/Sci-Info(1층서고)/ 청구기호 005.72 2012z3 등록번호 121219375 도서상태 대출가능 반납예정일 예약 서비스 B M

컨텐츠정보

책소개

음식 레시피 웹사이트를 리뉴얼하면서, 디자인 시 고려해야 할 기본 사항들을 하나씩 짚어가며 설명한다. 웹사이트에 사용할 색상을 어떤 식으로 선택할지, 글꼴과 줄간격을 어떻게 지정해야 읽기 편한지 등을 설명하며, 이를 구현할 때는 어떤 프로그램(포토샵, 일러스트레이터 등)을 어떤 식으로 사용하는지 등도 알려준다. 또한 실제 시각 장애인들이 사용성과 접근성을 고려하지 않은 사이트를 어떻게 보게 되는지 사진으로 보여준다.

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

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

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

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


정보제공 : Aladin

저자소개

브라이언 P. 호건(지은이)

웹 프로그래밍 분야에서 일하는 개발자로, 동일 분야에서 저술 및 강사 활동도 하고 있다. 대학에서 프로그래밍 입문 과정을 가르치고 있으며, 성능 기반 학습 분야에 관심을 갖고 있다. 저서로는 『웹 개발 레시피』, 『HTML5 & CSS3』, 『개발자, 웹 디자인에 뛰어들다』 등이 있다.

이준하(옮긴이)

2013년 현재 ㈜투비소프트에서 개발자들의 행복한 삶을 위해 노력하고 있으며 '열이아빠의 RIA 이야기(http://koko8829.tistory.com)'라는 블로그를 통해 다양한 시각을 나누고 새로운 경험을 중심으로 나타나는 여러 가지 현상을 탐구하고 있다. 최근에는 기업 환경에 최적화된 RIA 솔루션을 고민하며 페이스북 페이지 BizRIA(http://www.facebook.com/BizRIA)에서 다양한 인사이트를 공유하는 데 많은 관심을 갖고 있다.

정보제공 : Aladin

목차

옮긴이의 글 

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 성능 바로잡기 
헤더에 만료 기간 설정하기 
캐시 성능을 높이기 위해 ETag 살펴보기 
자원 서버로 요청을 분배하기 
과일 압축 
스크립트를 축소하기 
20.4 이미지 최적화 
스스로 해보기 
20.5 요약 
21장 앞으로 해야 할 일 
21.1 추가적인 페이지와 템플릿 
두 번째 레벨 페이지 
21.2 좀 더 향상된 템플릿 
21.3 그리드 시스템과 CSS 프레임워크 
YUI 그리드 
960 그리드 시스템 
프레임워크가 모든 문제를 해결해주지는 않는다! 
21.4 CSS 대체하기 
Less CSS 
21.5 상업용 이미지를 구매하는 것을 잊지 말자! 
21.6 시각적 효과 
이미지 크기 조정 
스크립트 만들기 
홈페이지에 적용하기 
21.7 도전하고 연습하자! 
22장 참고자료 
22.1 색상 
22.2 글꼴과 타이포그래피 
22.3 기술 서적 
22.4 웹사이트

관련분야 신착자료

Ramamurthy, Bina (2021)