Part 1 모바일 웹 시작하기
1장 | 모바일 웹
모바일 웹의 등장
스마트폰과 태블릿 PC
모바일 웹 브라우저
표준화된 통신 환경
모바일 웹 기술
모바일 웹의 종류
모바일 웹
웹 앱
하이브리드 앱
모바일 웹의 미래
2장 | 모바일 웹의 특성 이해하기
모바일 웹에 사용되는 기술
HTML5
CSS3
자바스크립트
모바일 프레임워크
jQuery Mobile
PhoneGap
모바일 웹을 위한 HTML 기본
모바일 웹을 위한 CSS 기본
모바일 웹 제작 기초
모바일 웹을 위한 HTML 마크업 방법
해상도
HTML5에서 사용되지 않을 태그
HTML5에서 사용되지 않을 속성
CSS 적용
모바일 웹을 위한 DTD
모바일 웹을 위한 CSS 디자인
모바일 웹을 위한 텍스트 크기 설정
320px, 480px, 640px 해상도 최적화
CSS3 미디어 쿼리
3장 | 모바일 웹에 꼭 필요한 기술
페이지 크기 제어
브라우저 주소 입력창 감추기
모바일 웹 바로가기 아이콘
iOS 상태 바에 색상 설정
iOS 웹 앱을 위한 인트로 화면 설정
해상도에 따라 모바일 웹 디자인 변경
모바일 웹 내부에 스크롤 만들기
PART 2 실전! 모바일 웹 사이트 만들기
4장 | 메인 페이지 만들기 1
레이아웃 구성하기
레이아웃을 위한 HTML 마크업
레이아웃을 위한 CSS 코드
로고 만들기
header 영역을 위한 HTML 마크업
로고를 위한 HTML 마크업
로고를 위한 CSS 코드
검색 버튼 만들기
검색 버튼을 위한 HTML 마크업
검색 버튼을 위한 CSS 코드
숨겨진 검색창 만들기
숨겨진 검색창을 위한 HTML 마크업
숨겨진 검색창을 위한 CSS 코드
숨겨진 검색창을 위한 자바스크립트 코드
내비게이션 메뉴 만들기
내비게이션 메뉴를 위한 HTML 마크업
내비게이션 메뉴를 위한 CSS 코드
5장 | 메인 페이지 만들기 2
뉴스 리스트 만들기
텍스트 리스트를 위한 HTML 마크업
텍스트 리스트를 위한 CSS 코드
이미지 섬네일이 포함된 리스트를 위한 HTML 마크업
이미지 섬네일이 포함된 리스트를 위한 CSS 코드
6장 | 메인 페이지 만들기 3
공지사항 만들기
공지사항을 위한 HTML 마크업
공지사항을 위한 CSS 코드
배너 만들기
배너를 위한 HTML 마크업
배너를 위한 CSS 코드
푸터 메뉴 만들기
푸터 메뉴를 위한 HTML 마크업
푸터 메뉴를 위한 CSS 코드
상단 바로가기 만들기
상단 바로가기를 위한 HTML 마크업
상단 바로가기를 위한 CSS 코드
7장 | ABOUT US 페이지 만들기
서브 메뉴 만들기
서브 메뉴를 위한 HTML 마크업
서브 메뉴를 위한 CSS 코드
회사 소개 만들기
회사 소개를 위한 HTML 마크업
회사 소개를 위한 CSS 코드
8장 | OUR STORY 페이지 만들기
동영상 재생 페이지 만들기
동영상 재생을 위한 HTML 마크업
동영상 재생을 위한 CSS 코드
9장 | LOCATION 페이지 만들기
지도 페이지 만들기
지도 페이지를 위한 HTML 마크업
지도 페이지를 위한 CSS 코드
연락처 페이지 만들기
연락처 페이지를 위한 HTML 마크업
연락처 페이지를 위한 CSS 코드
10장 | 구글 지도 페이지 연결하기
구글 지도 페이지 만들기
구글 지도 페이지를 위한 HTML 마크업
구글 지도 페이지를 위한 자바스크립트 코드
11장 | PROJECT 페이지 만들기 1
유동성 있는 섬네일 리스트 만들기
유동성있는 섬네일 리스트를 위한 HTML 마크업
유동성있는 섬네일 리스트를 위한 CSS 코드
12장 | PROJECT 페이지 만들기 2
가로 플리킹과 인디케이터 만들기
가로 플리킹과 인디케이터를 위한 HTML 마크업
가로 플리킹과 인디케이터를 위한 자바스크립트 코드
가로 플리킹과 인디케이터를 위한 CSS 코드
13장 | RECRUIT 페이지 만들기
하위 항목이 구분되는 리스트 만들기
하위 항목이 구분되는 리스트를 위한 HTML 마크업
하위 항목이 구분되는 리스트를 위한 CSS 코드
14장 | REQUEST 페이지 만들기
< table > 태그를 활용한 REQUEST 페이지 만들기
REQUEST 페이지를 위한 HTML 마크업
REQUEST 페이지를 위한 CSS 코드
15장 | NOTICE 페이지 만들기
게시판 리스트 만들기
게시판 리스트를 위한 HTML 마크업
게시판 리스트를 위한 CSS 코드
페이지 번호 만들기
페이지 번호를 위한 HTML 마크업
페이지 번호를 위한 CSS 코드
16장 | 게시판 본문 페이지 만들기
게시판 본문 만들기
게시판 본문을 위한 HTML 마크업
게시판 본문을 위한 CSS 코드
PART 3 모바일 웹표준 확인하기
17장 | 마무리에 필요한 작업
CSS 코드를 파일로 만들기
모바일 웹표준 검사
자동으로 m.도메인.com에 접속하기
모바일 웹 페이지 테스트
User Agent Switcher
iBBDemo2
사파리 브라우저를 이용한 테스트
아이폰/아이패드 테스트
자바스크립트를 이용한 테스트
Appendix 1 실무를 위한 드림위버 환경 설정하기
Appendix 2 IE Tester로 웹 페이지 확인하기
Appendix 3 Firebug로 웹 페이지 수정하기
Appendix 4 Web Developer로 웹 접근성 확인하기
Appendix 5 모바일 웹과 앱 디자인 Tip & Tech
Appendix 6 예제 코드 소개
찾아보기
실무에서 자주 쓰는 11개 모바일 웹 페이지로 배우는 모바일 웹 만들기
스마트폰의 등장과 함께 웹 개발 환경이 변하고 있습니다. 기존의 PC가 아닌, 스마트폰에 최적화된 웹 페이지를 만들어야 할 필요성이 생겼기 때문입니다. 이렇게 모바일 환경에 최적화된 웹을 모바일 웹이라고 부릅니다. 이러한 모바일 웹을 만들기 위해서는 스마트폰과 통신 환경의 이해, 모바일 환경에 맞는 기획과 디자인, 그리고 새롭게 등장한 HTML5와 CSS3를 이해하는 것이 필요합니다. [어비의 모바일 웹]은 실무에서 자주 쓰는 11개 모바일 웹 페이지를 실제로 만들면서 누구나 쉽게 스마트폰과 모바일 웹을 이해하면서 창조적인 모바일 웹 퍼블리셔가 될 수 있도록 하는 지름길을 소개합니다.
PC 기반의 웹과 모바일 웹에 꼭 필요한 웹 퍼블리싱 방법을 소개한다!
앞으로 웹 페이지를 만들 때는 PC 기반의 웹과 모바일 웹을 함께 고려한 웹 페이지 만들기가 필요합니다. 이를 위해서는 PC 기반의 웹과 모바일 웹의 차이가 있는지를 확인하고 그에 맞는 웹 개발 기술을 습득할 필요가 있습니다. [어비의 모바일 웹]의 Part I은 모바일 웹이 왜 생겨났는지에 대한 배경을 소개하고 모바일 웹에 꼭 필요한 웹 퍼블리싱 환경을 자세하게 소개합니다. 또한, 기존의 웹 퍼블리셔라면 단시간에 확인할 수 있는, 웹 퍼블리셔를 지망하는 입문자에게는 웹 개발에 꼭 필요한 HTML과 CSS의 핵심 요소만을 따로 소개하여 빠르게 웹 퍼블리셔가 될 수 있도록 노하우를 습득할 수 있도록 구성하였습니다.
포털 등에서 실제로 자주 접하는 11개의 모바일 웹 페이지 만들기!
[어비의 모바일 웹]의 Part II는 실전 모바일 웹 페이지 만들기 구성입니다. 실제로 정부기관이나 포털 등에서 접하는 모바일 웹 페이지를 분석하고 자주 사용하는 11개 패턴을 골라서 모바일 웹 페이지를 만들어 볼 수 있습니다. 또한 이 모바일 웹 페이지들이 모여 실제로 하나의 모바일 웹 사이트가 될 수 있도록 구성하여 실무에 바로 적응할 수 있는 현실감을 높였습니다. 이 중에서도 ‘Chapter 10. 구글 지도 페이지 연결하기’에서 배우는 구글 지도 연동하기, ‘Chapter 14. REQUEST 페이지 만들기’에서 배우는 스마트폰 키보드 레이아웃 설정하기 등은 스마트폰을 정확하게 이해하고 그에 맞는 모바일 웹을 만들 수 있는 백미입니다. 마지막으로 현재 가장 사용자가 많은 아이폰 4S와 갤럭시 S2, 최신 안드로이드 스마트폰으로 주목받고 있는 갤럭시 넥서스 등에서 예제로 사용된 모바일 웹 페이지에 대한 테스트를 마쳐 스마트폰 기기에 대한 이해도를 함께 높일 수 있습니다.
모바일 웹표준을 지키기 위한 실무 노하우를 함께 알려준다!
모바일 웹 페이지를 만들었다고 해서 끝이 아닙니다. 여러분이 만든 모바일 웹 페이지가 웹표준을 정확히 지키고 있는지를 확인하는 것은 여러분이 실력 있는 웹 퍼블리셔가 되기 위한 관문입니다. [어비의 모바일 웹]의 Part III에서는 이러한 모바일 웹표준을 확인하고 웹표준에 맞는 웹 페이지를 만들기 위한 노하우를 제공합니다. 또한 실제로 사용하는 다양한 스마트폰 기기 없이도 PC 환경에서 모바일 웹 페이지의 디자인을 확인할 수 있는 다양한 시뮬레이터를 소개하여 여러분이 만드는 모바일 웹 페이지의 완성도를 높이는 방법을 자세히 소개합니다.
중고단행본
멀티플라이어
