어비의 모바일 웹

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 예제 코드 소개

찾아보기