실무에서 자주 쓰는 11개 모바일 웹 페이지로 배우는 모바일 웹 만들기
스마트폰의 등장과 함께 웹 개발 환경이 변하고 있습니다. 기존의 PC가 아닌, 스마트폰에 최적화된 웹 페이지를 만들어야 할 필요성이 생겼기 때문. 이렇게 모바일 환경에 최적화된 웹을 모바일 웹이라고 부른다. 이러한 모바일 웹을 만들기 위해서는 스마트폰과 통신 환경의 이해, 모바일 환경에 맞는 기획과 디자인, 그리고 새롭게 등장한 HTML5와 CSS3를 이해하는 것이 필요하다. 『어비의 모바일 웹』은 실무에서 자주 쓰는 11개 모바일 웹 페이지를 실제로 만들면서 누구나 쉽게 스마트폰과 모바일 웹을 이해하면서 창조적인 모바일 웹 퍼블리셔가 될 수 있도록 하는 지름길을 소개한다.
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 예제 코드 소개
찾아보기
