이미 소장하고 있다면 판매해 보세요.
- 해외배송 가능?
- 문화비소득공제 가능
상세 이미지
책소개
목차
|
서문. 멀티 디바이스 대응: 사이트의 필요성과 과제
01. 지금 요구되고 있는 웹 사이트 - 멀티 디바이스 대응이란 - 멀티 디바이스 대응의 필요성 - 현재의 웹 사이트로는 충분하지 않은가 02. 멀티 디바이스 대응 방법 - 여러 가지 멀티 디바이스 대응 - 기존 방법의 과제 - 사용자 에이전트에 따른 자동 전환 방법의 장점 ---- COLUMN 다양화된 스마트폰 관련 환경 제1장. 반응형 웹 디자인의 기본 01. 반응형 웹 디자인이란 - 반응형 웹 디자인을 구성하는 기술 - 반응형 웹 디자인의 장점 - 반응형 웹 디자인의 단점 - 반응형 웹 디자인의 구축 사례 ---- COLUMN. 반응형 웹 디자인 사이트를 모아놓은 Media Queries 02. 미디어 쿼리 사용 방법 - 미디어 쿼리의 기본 - 미디어 쿼리를 사용 - 스타일의 작성 순서 03. 플루이드 그리드의 지정 - 플루이드 그리드의 기본 - 고정 레이아웃에 따른 페이지 제작 - 고정 레이아웃에서 가변 레이아웃으로 변환 - 플루이드 그리드와 미디어 쿼리의 조합 04. 플루이드 이미지의 지정 제2장. 사이트 제작 워크 플로우와 사이트 설계의 기본 01. 반응형 웹 디자인의 제작 워크 플로우 - 종래의 제작 워크 플로우와의 차이 ---- COLUMN. 와이어 프레임 작성 도구 - 사전 디자인은 필요함 - 올바른 워크 플로우를 위하여 ---- COLUMN. Adobe Edge Reflow 02. 터치 디바이스용의 디자인 - 터치 디바이스의 특징 ---- COLUMN. iOS 휴먼 인터페이스 가이드라인 03. 대상 브라우저와 대상 디바이스 결정 - 대응 정도의 수준 분배 - 대상 OS - 대상 브라우저 ---- COLUMN. 구 버전의 IE 대응이 중요 - 대상 디바이스 04. Mobile First - 왜 Mobile First인가 - Mobile First의 예 ---- COLUMN. 보다 깊은 Mobile First를 배우기 위한 사이트 제3장. HTML5 + CSS3의 기초 지식과 기본 코딩 01. HTML5 기초 지식 - HTML5란 - HTML5 요소, 속성 - HTML5에서 HTML 작성은 어떻게 바뀌는가 ---- COLUMN. 애플리케이션이라는 측면에서 본 HTML5 02. CSS3 기초 지식 - CSS3에서 추가된 주요 속성 - HTML5 & CSS3의 지원상황 확인 03. HTML5 페이지 템플릿 작성 - DOCTYPE 선언과 문자 인코딩 설정 - viewport 설정 - 리셋 CSS 설정 ---- COLUMN. 여러 리셋 CSS - 구 버전 IE에 대응하기 위한 스크립트 로딩 04. CSS3 템플릿 작성 - 브레이크 포인트란 - 픽셀 밀도와 devicePixelRatio ---- COLUMN. 고해상도 디스플레이에서 이미지가 희미해지는 문제 - 브레이크 포인트의 결정 방법 ---- COLUMN. 기존 사이트 브레이크 포인트를 조사하는 방법 제4장. 반응형 웹 사이트 제작 ① 01. 사이트 제작 시의 힌트와 실습 개요 - 4장과 5장의 구성 - 실습에서 제작하는 사이트 개요 - HTML 템플릿 작성 - CSS 템플릿 작성 02. 헤더 디자인 & 제작 - 헤더 코딩 03. 글로벌 내비게이션 디자인 & 제작 - 반응형 웹 디자인의 글로벌 내비게이션 - 글로벌 내비게이션 코딩 04. 콘텐츠 영역 디자인 & 제작 - 콘텐츠 영역의 단 구성 - 단 구성 전환 방법 - 콘텐츠 영역 코딩 05. 푸터 디자인 & 제작 - 푸터 코딩 ---- COLUMN. 가변 레이아웃 + 고정 레이아웃 제5장. 반응형 웹 사이트 제작 ② 01. 상품 일람 페이지 디자인 & 제작 - 상품 일람 페이지 코딩 02. 입력 폼 디자인 & 제작 - 입력 폼 코딩 03. 이미지 슬라이드 쇼 도입 ---- COLUMN. 템플릿 제네레이터 Responsify 제6장. 반응형 웹 사이트 테스트 01. 테스트 방법의 개요 - 주요 테스트 방법 - 실제 기기 테스트 방법 ---- COLUMN. Windows 7의 IE10 02. 시뮬레이터와 에뮬레이터에 의한 사이트 테스트 - Chrome Developer Tools - Coda 2 - IETester - iOS 시뮬레이터 ---- COLUMN. iPhoney - Android 에뮬레이터 ---- COLUMN. 그 밖의 테스트 도구 제7장. WordPress를 이용한 구축 및 편리한 도구 & 플러그 인 01. Word Press의 템플릿 - 미디어 쿼리 확인과 변경 - viewport 확인과 변경 02. WordPress 테마의 이용 ---- COLUMN. WordPress 테마를 소개하는 designer themes 03. 편리한 도구 & 플러그 인 - RESPONSIVE WEB DESIGN SKETCH SHEETS - Responsivator - VIEWPORT RESIZER - Resizer (Chrome) ---- COLUMN. Firefox 반응형 웹 디자인 지원 도구 |
저자 소개
저자 : 야마자키 다이스케
애플리케이션 크리에이터 팀: Venezia-Works 대표. 주식회사 우오즈 시스템: Web Professional Fellow. 디지털 헐리우드 강사 (온라인 스쿨: 웹 애플리케이션 강좌, PHP 강좌, 시부야교: 애플리케이션 크리에이터 전공 등 다수). @IT [HTML5 어플리케이션 만들자] 기사 연재, 닛케이 소프트웨어, 닛케이 BP, Software Design, IT Pro, WebCreators 등의 Web 업계 관련 잡지에서의 정보 전달부터 Web 기술자 인재 육성, JointApps 어소시에이션 멤버 참가 등 다방면으로 활동. impress.js를 간단하게 조작 가능한 [Impress.js design] 등을 오픈 소스로 공개.
역자 : 김대희
2003년 강남대학교 컴퓨터 공학 졸업. 2006년 ~ 2009년 株ラック 개발부 대리 근무.
2010년 ~ 2011년 CSLAC 개발부 과장 근무. 2011년 ~ ㈜인포섹 관제사업본부 차장 근무 중.
2010년 ~ 2011년 CSLAC 개발부 과장 근무. 2011년 ~ ㈜인포섹 관제사업본부 차장 근무 중.
품목정보
- 발행일
- 2013년 08월 21일
- 쪽수, 무게, 크기
- 296쪽 | 536g | 175*230*20mm
- ISBN13
- 9788994774442
출판사 리뷰
|
이 책은 스마트폰, 태블릿, PC 등의 갖가지 디바이스에 대응하는 사이트를 원 소스(1개의 HTML 파일)에서 구현하는 제작 방법인 “반응형 웹 디자인”의 설명서입니다. 이 책에서는 “반응형 web이란 어떠한 제작 방법인가?” “어떻게 구현할 것인가?”라는 기본적인 것부터 샘플 사이트의 제작을 통한 구체적인 코딩 방법에 이르기까지, 반응형 웹 디자인에 관한 여러 내용을 상세하게 설명하고 있습니다.
디자인 제작을 위한 [헤더], [글로벌 내비게이션], [푸터] 등의 페이지를 구성하는 주요한 요소나 [상품 일람 페이지]나 [문의 게시판] 등 주요한 페이지마다 실질적 예와 샘플을 가지고 디자인 시의 사고방식이나 코딩 방법을 친절하게 설명하고 있습니다. 또한 이 책 후반부에서는 제작한 사이트를 테스트하는 방법에 대하여 상세하게 설명하고 있습니다. 반응형 웹 디자인 사이트는 그 특징상 이제까지의 PC 사이트와는 다른 시점의 테스트가 필요하며 독자적인 노하우가 요구됩니다. 이 책에서는 이러한 것들도 친절하게 설명하므로 PC 사이트 제작 경험자들에게도 읽을 만할 가치가 있는 책이라고 생각합니다. 또한 이 책의 마지막에는 인기가 높은 CMS(contents management system)인 [WordPress]로 반응형 웹 디자인을 구축하는 방법에 대해서도 간단히 언급하고 있습니다. 반응형 웹 디자인이란? 화면 사이즈가 다른 각 디바이스(PC, 태블릿, 스마트폰)에 대하여 최적화된 사이트를 구현하기 위한 제작 방법입니다. 미국의 디자이너인 Ethan Marcotte가 고안하여 2010년 5월에 발표한 것이 그 시작입니다. 반응형 웹 디자인의 최대 특징은 다음의 두 가지입니다. - 각 디바이스에 최적화된 페이지를 1개의 HTML로 구현함. - 화면 사이즈를 표준으로 하여 사이트의 전환을 실행함. 멀티 디바이스 대응이란? 웹 사이트의 멀티 디바이스 대응을 한마디로 말하면 다음과 같이 정의할 수 있습니다. “여러 디바이스(기기)에서 정확하게 표시, 이용 가능한 사이트를 제작하는 것” 즉, 사용자가 사용하고 있는 디바이스마다 웹 사이트의 표시 방법을 최적화하는 것이 멀티 디바이스 대응이라고 할 수 있습니다. 현재는 PC뿐만이 아니라 스마트폰, 태블릿, 게임기, 텔레비전 등 여러 디바이스에 브라우저가 탑재되어 있어, 이러한 다양한 디바이스로부터 웹 사이트나 서비스(Facebook이나 Twitter 등)에 접근하는 유저가 급증하고 있습니다. 그 때문에, 웹 사이트 제공자는 각 디바이스에서 정확히 표현하고, 이용할 수 있는 사이트를 제작하는 것이 필요합니다. “멀티 디바이스 대응”이라는 말은 수년 전에는 그다지 통용되는 말이 아니었지만, 최근 급속히 인식되고 중요시되고 있습니다. 현재의 웹 사이트로는 충분하지 않은가? 스마트폰이나 태블릿에는 통상 풀 브라우저가 탑재되어 있기 때문에, 일부의 기능을 제외하고 거의 모든 웹 사이트를 조회할 수 있습니다. 하지만 현재의 웹 사이트의 대부분은 PC에서의 조회를 전제로 제작되고 있기 때문에 주로 아래의 문제 및 과제가 발생합니다. - 페이지 로딩에 시간이 소요됨 - 페이지 디자인이 크게 작성되어 있어 조회하기 어려움 - 비대응 플러그인이 존재함 독자대상 초중급 예제코드 다운로드 http://www.bjpublic.co.kr 〉 도서자료 〉 소스코드 다운로드 |
