웹 관련 기술은 최근 모바일 환경의 변화와 관련하여 보다 다양해지고 강력해지고 있으나, 그에 비해 초심자가 웹 기술을 배우고 익히기에는 광범위하고 복잡해서 상당한 시간과 노력을 기울여야 한다. 이 책은 IT 전문가가 아닌 일반인, 학생 누구나 쉽게 모바일 웹 페이지를 만들 수 있도록 설명하였다. 특히 모바일 제작 툴을 사용하지 않더라도 웹의 기본 개념과 기초 기술을 익힘으로써 아무것도 모르는 초보자라도 빠르게 모바일 앱을 개발할 수 있도록 하였다. 모바일 앱에 관심을 갖는 개인이나 포트폴리오를 준비하는 많은 학생들, 또는 취업 준비생들이 활용하기에 유용하리라 생각한다. 모바일 웹 개발 경험이 없거나 자신만의 앱을 직접 만들고 싶은 다양한 독자들에게 이 책을 추천한다.

머리말 ㆍ 6 01 웹은 진화 중이다 ㆍ 15 우리 곁 생활 깊숙이 들어온 웹 ㆍ 17 웹이란? ㆍ 19 웹은 누가 만들었을까? ㆍ 21 또 다시 전쟁 중(?)인 웹 ㆍ 23 웹 브라우저 시장의 동향 ㆍ 24 자동차만 엔진이 있나? 웹 브라우저도 엔진이 있다! ㆍ 26 웹은 끊임없이 발전 중이다 ㆍ 29 웹 환경의 변화 : 데스크톱 웹에서 모바일 웹으로 ㆍ 30 모바일 앱의 등장 ㆍ 32 정보 소비자에서 정보 생산자로 변신해보자 ㆍ 34 02 웹 소통의 언어, HTML5 ㆍ 37 웹과 소통해보자 ㆍ 39 HTML과 HTML5 ㆍ 42 HTML5 언어의 구조는 어떻게 생겼나? ㆍ 44 HTML5 언어로 문서를 직접 만들어보자 ㆍ 45 HTML5 문서를 분해해 보자 ㆍ 49 HTML5 엘리먼트 구성 요소 ㆍ 50 HTML5 마크업을 명세하는 규칙은 무엇일까? ㆍ 53 HTML5 핵심 마크업 태그는 무엇일까? ㆍ 54 03 모바일 포트폴리오를 구상해보자 ㆍ 57 포트폴리오란? ㆍ 59 스토리보드 만들기 ㆍ 59 나의 모바일 포트폴리오 myportfolio 개요 ㆍ 60 포트폴리오 앱의 구조를 살펴보자 ㆍ 61 페이지 레이아웃 구조 ㆍ 63 04 시작 페이지 만들기 ㆍ 65 myportfolio 앱의 ‘대문’, 시작 페이지 ㆍ 67 DOCTYPE html 문서 선언하기 ㆍ 68 [html] 웹 문서 정의하기 ㆍ 68 [img] 이미지를 포함하기 ㆍ 71 [a] 다른 페이지로의 링크 설정하기 ㆍ 71 주석문 달기 ㆍ 74 data-role="page" 페이지 정의하기 ㆍ 75 [head] 페이지 부가정보 명세하기 ㆍ 75 [meta/] 인코딩 설정하기 ㆍ 76 [meta/] 뷰포트 설정하기 ㆍ 77 [title] 웹 문서의 제목 설정하기 ㆍ 79 제이쿼리 모바일 연동하기 ㆍ 79 05 메뉴 페이지 만들기 ㆍ 83 myportfolio 앱의 ‘지도’, 메뉴 페이지 ㆍ 85 [div] 영역 정의하기 ㆍ 87 [br] 빈 줄 삽입하기 ㆍ 87 [img] 로고 이미지 넣기 ㆍ 88 data-role:listview 리스트뷰 사용하기 ㆍ 89 listdivider 리스트 구분자 사용하기 ㆍ 92 ui-li-icon 리스트 아이콘 추가하기 ㆍ 93 06 자기 소개 페이지 만들기 ㆍ 95 myportfolio 앱의 ‘기본’, 자기 소개 페이지 ㆍ 97 모바일 페이지 생성하기 ㆍ 99 모바일 페이지 구조 ㆍ 99 data-role="header" 헤더바 구성하기 ㆍ 102 data-position="fixed" 헤더바와 푸터바의 고정 배치 ㆍ 102 data-theme 테마 색상 적용하기 ㆍ 104 [a] 헤더바 링크 버튼 생성 ㆍ 106 data-icon 버튼 아이콘 적용하기 ㆍ 106 data-direction="reverse" 페이지 전환 역방향 효과 ㆍ 108 [h1] 헤더바 제목 표시하기 ㆍ 108 콘텐츠 구성하기 ㆍ 109 [img] 로고 이미지 포함하기 ㆍ 109 [img] 사진 포함하기 ㆍ 110 [style] 스타일 추가하기 ㆍ 110 푸터바 구성하기 ㆍ 114 navbar 네비게이션바 적용하기 ㆍ 115 07 신상 정보 페이지 만들기 ㆍ 119 myportfolio 앱의 ‘이력’, 신상 정보 페이지 ㆍ 121 비순서화 목록 표시하기 ㆍ 124 테이블 표시하기 ㆍ 125 [table] 표 만들기 ㆍ 125 [tr] 표 행 추가하기 ㆍ 129 opacity 투명 이미지 추가하기 ㆍ 130 테이블 헤더 색상 지정하기 ㆍ 132 [a][img] 이미지 링크 설정하기 ㆍ 132 08 스타일 적용하기 I ㆍ 133 스타일이란? ㆍ 135 CSS3 ㆍ 136 CSS3 스타일 선언 ㆍ 137 스타일 속성 선언의 중첩과 상속 ㆍ 139 선택자 이해하기 ㆍ 140 스타일 속성 이해하기 ㆍ 145 글자 스타일 속성 ㆍ 145 색상(배경) 스타일 속성 ㆍ 147 09 스타일 적용하기 II ㆍ 151 박스 모델 이해하기 ㆍ 153 박스 모델 구조 ㆍ 153 박스 모델 스타일 속성 ㆍ 155 영역 스타일 속성 ㆍ 155 경계선 스타일 속성 ㆍ 159 표현 효과 스타일 속성 ㆍ 160 CSS3 레이아웃 ㆍ 161 컨테이너 ㆍ 162 화면 배치 스타일 속성 ㆍ 163 float 모드 관련 스타일 속성 ㆍ 167 10 학술 정보 페이지 만들기 ㆍ 171 myportfolio 앱의 학술 정보 페이지 ㆍ 173 collapsible 접이식 패널 적용하기 ㆍ 176 패널 제목과 내용 ㆍ 176 [video] 비디오 포함하기 ㆍ 178 [style] 비디오 스타일 적용하기 ㆍ 181 11 경력 정보 페이지 만들기 ㆍ 185 myportfolio 앱의 경력 정보 페이지 ㆍ 187 collapsible-set 그룹 접이식 패널 적용하기 ㆍ 190 [style] 이미지 스타일 적용하기 ㆍ 191 [ol] 순서 목록 표시하기 ㆍ 192 항목의 머리 기호 유형 지정하기 ㆍ 193 글자 태그 사용하기 ㆍ 195 data-role="button" 버튼 생성하기 ㆍ 197 링크 버튼 ㆍ 198 12 대화상자 페이지 추가하기 ㆍ 201 myportfolio 앱의 독서 항목 대화상자 ㆍ 203 data-role=”dialog” 대화상자 생성하기 ㆍ 204 data-inset 둥근 리스트뷰 생성하기 ㆍ 206 myportfolio 앱의 독서 기록 대화상자 ㆍ 207 바/블록 레이아웃 적용하기 ㆍ 208 13 활동 정보 페이지 만들기 ㆍ 211 myportfolio 앱의 활동 정보 페이지 ㆍ 213 썸네일 리스트뷰 생성하기 ㆍ 216 listdivider 리스트 구분자 사용하기 ㆍ 218 ui-li-aside 추가 정보 표시하기 ㆍ 219 여러 줄 리스트뷰 사용하기 ㆍ 219 ui-li-count 카운트 버블 적용하기 ㆍ 221 myportfolio 앱의 여행 사진 페이지 ㆍ 223 myportfolio 앱의 연수 지역 지도 페이지 ㆍ 224 myportfolio 앱의 탐방 동영상 대화상자 ㆍ 225 14 웹앱을 웹 서버에 올리기 ㆍ 229 myportfolio 앱을 웹 서버에 올리자 ㆍ 231 무료 웹 호스팅 서비스 사이트 ㆍ 231 웹 호스팅 서비스 사이트 등록하기 ㆍ 232 무료 웹 호스팅 서비스 신청하기 ㆍ 233 알드라이브 다운로드하기 ㆍ 236 myportfolio 앱 업로드하기 ㆍ 237 15 QR 코드 추가하기 ㆍ 241 QR 코드 ㆍ 243 네이버 QR 코드 만들기 ㆍ 244 16 전체 실행 화면과 코드 보기 ㆍ 249 [부록] 앱타나 스튜디오 설치하기 ㆍ 267 1. 앱타나 스튜디오 설치 ㆍ 269 2. 앱타나 스튜디오 실행 ㆍ 271 3. 앱타나 기본 브라우저 설정 ㆍ 274 4. 앱타나 웹 서버 실행 ㆍ 275