모바일 웹+웹앱+하이브리드앱 입문 (한 권으로 끝내는 모바일 웹 기술의 모든 것 | 개정판)

박성진

저자박성진은고려대학교에서학사,석사,박사학위를취득하고한국전자통신연구원선임연구원을거쳐2000년부터한신대학교컴퓨터공학부에서교수로재직중이며웹프로그래밍과데이터베이스관련교과목을강의하고있다.저서로는《데이터베이스시스템》과《데이터웨어하우스》등이있다.

첫째마당HTML5와CSS3를이용한모바일웹

Chapter01모바일웹환경
1.웹의진화
1.1웹환경의변화
1.2웹기술의발전
2.HTML5
2.1HTML5의등장
2.2HTML5의특징
3.플랫폼이된웹브라우저
3.1웹브라우저
3.2웹브라우저엔진
4.모바일웹환경
4.1데스크톱웹과모바일웹
4.2모바일앱
4.3모바일앱프레임워크
연습문제

Chapter02HTML5기초다지기
1.HTML5개요
1.1HTML5문서
1.2HTML5의기본요소
1.3HTML5마크업명세규칙
2.HTML5태그
2.1기본태그
2.2글자태그
2.3목록태그
2.4링크태그
2.5테이블태그
3.HTML5미디어태그
3.1이미지관련태그
3.2오디오관련태그
3.3비디오관련태그
4.HTML5공간분할태그와시맨틱태그
4.1공간분할태그
4.2시맨틱태그
4.3HTML5레이아웃의변화
4.4시맨틱레이아웃작성하기
연습문제

Chapter03CSS3기초다지기
1.CSS3개요
1.1스타일시트기초
1.2CSS3스타일선언방법
2.선택자
2.1기본선택자유형
2.2확장선택자유형
3.스타일시트선언방식
3.1스타일시트선언방식
3.2스타일시트선언방식적용예
4.스타일속성
4.1CSS3의글자스타일속성
4.2CSS3의색상(배경)스타일속성
4.3CSS3의목록스타일속성
4.4CSS3의테이블스타일속성
5.박스모델
5.1박스모델구조
5.2박스모델스타일속성
6.CSS3레이아웃
6.1컨테이너
6.2화면배치스타일속성
6.3float모드관련스타일속성
7.확장폰트
7.1웹폰트
7.2사용자정의폰트
연습문제

Chapter04모바일웹개발
1.뷰포트
1.1뷰포트
1.2뷰포트메타태그
2.미디어유형
2.1미디어유형
2.2미디어유형종류
3.미디어쿼리
3.1미디어쿼리속성
3.2미디어쿼리적용예
4.[실습]모바일웹개발
4.1개인포트폴리오모바일웹:mportpolio
4.2실습예제코드
연습문제

둘째마당제이쿼리모바일을이용한웹앱

Chapter05제이쿼리모바일기초다지기
1.제이쿼리모바일개요
1.1모바일웹앱개발
1.2프레임워크연결방식
1.3프레임워크기본구성형식
2.화면구성및페이지연결
2.1웹앱화면구성
2.2페이지연결방식
2.3페이지도메인링크방식
3.페이지전환
3.1페이지전환효과
3.2외부프로그램링크
연습문제

Chapter06제이쿼리모바일헤더바와푸터바
1.헤더바
1.1툴바
1.2헤더바
2.푸터바
3.네비게이션바와툴바
3.1네비게이션바
3.2툴바위치설정
연습문제

Chapter07제이쿼리모바일버튼과리스트뷰
1.버튼
1.1버튼생성
1.2기본버튼종류
1.3아이콘버튼의변형
1.4확장버튼종류
2.리스트뷰기초
2.1기본리스트뷰
2.2연결리스트뷰
2.3순서리스트뷰
2.4인셋리스트뷰
2.5분할리스트뷰
3.리스트뷰고급
3.1카운트버블
3.2리스트구분자
3.3썸네일리스트뷰
3.4아이콘리스트뷰
3.5여러줄리스트뷰
3.6검색필터리스트
3.7제이쿼리리스트뷰활용예
4.제이쿼리모바일위젯
4.1페이지탭
4.2컬럼토글테이블
4.3숨김패널
연습문제

Chapter08제이쿼리모바일대화상자와폼
1.대화상자
1.1대화상자
1.2페이지테마
2.콘텐츠영역의레이아웃
2.1기본레이아웃형식
2.2그리드레이아웃형식
3.접이식패널레이아웃
3.1기본접이식패널
3.2중첩접이식패널
3.3그룹접이식패널
4.폼요소
4.1HTML5표준폼태그
4.2네이티브폼컨트롤
4.3모바일폼컨트롤:입력상자
4.4모바일폼컨트롤:선택메뉴
5.[실습]독도소개웹앱개발
5.1독도소개웹앱:dokdoApp
5.2실습예제코드
연습문제

셋째마당제이쿼리를이용한동적인웹앱

Chapter09제이쿼리기초다지기
1.제이쿼리개요
1.1제이쿼리
1.2자바스크립트
1.3제이쿼리연동
1.4DOM
2.제이쿼리함수
2.1제이쿼리의기본기능
2.2jQuery()함수
3.제이쿼리선택자
3.1제이쿼리선택자
3.2제이쿼리선택자유형
연습문제

Chapter10제이쿼리응용다지기
1.제이쿼리메소드
1.1제이쿼리스타일관련메소드
1.2DOM트리관련메소드
1.3기타메소드
2.제이쿼리이벤트
2.1제이쿼리이벤트
2.2이벤트핸들러연결및해제
2.3이벤트메소드
2.4이벤트활용예
3.제이쿼리효과
3.1제이쿼리효과
3.2사용자정의효과생성하기
3.3제이쿼리효과활용
4.제이쿼리플러그인
4.1jqPlot
4.2라인차트생성하기
4.3바차트생성하기
4.4파이차트생성하기
4.5버블차트생성하기
연습문제

Chapter11XML,Ajax,제이쿼리활용
1.XML개요
1.1XML
1.2HTML5와XML
1.3XML의특성
2.XML문서작성
2.1XML문서구조
2.2XML코딩규칙
2.3XML기본요소
2.4XML문서작성
3.네임스페이스
3.1네임스페이스
3.2네임스페이스선언방법
4.XML문서의CSS적용
5.제이쿼리Ajax
5.1제이쿼리Ajax
5.2$.ajax()메소드의XML문서적용예
5.3$.getJSON()메소드의JSON형식데이터적용예
5.4$.load()메소드의HTML문서적용예
6.제이쿼리활용예제
6.1관광지안내앱:tourApp
6.2예제코드
연습문제

Chapter12데이터베이스와제이쿼리활용
1.[실습]도서관리웹앱개발
1.1로컬DB기반의도서관리앱:bookApp
1.2UI화면구성
1.3내부스크립트함수구성
1.4데이터베이스관련함수정의
1.5실습예제코드
연습문제

넷째마당코르도바(폰갭)을이용한하이브리드앱

Chapter13하이브리드앱과코르도바(폰갭)
1.하이브리드앱개요
1.1하이브리드앱
1.2하이브리드프레임워크
2.코르도바개요
2.1코르도바와폰갭
2.2코르도바개발절차
3.코르도바안드로이드개발환경
3.1개발방식의변화
3.2안드로이드개발환경구축
3.3코르도바프로젝트개발환경구축
4.코르도바프로젝트생성및실행
4.1코르도바기본프로젝트생성하기
4.2코르도바패키징
4.3안드로이드플랫폼추가
4.4코르도바프로젝트실행하기
연습문제

Chapter14코르도바API를활용한앱만들기I
1.코르도바API
1.1코르도바API개요
2.장치관리하이브리드앱개발
2.1장치관리앱:deviceApp
2.2단말기정보확인하기
2.3진동시키기
2.4방위각정보확인하기
2.5배터리정보확인하기
2.6네트워크연결정보확인하기
2.7위치정보확인하기
2.8코르도바프로젝트생성및실행
2.9실습예제코드
3.사진관리하이브리드앱개발
3.1사진관리앱:cameraApp
3.2사진촬영하기
3.3사진불러오기
3.4코르도바프로젝트생성및실행
3.5실습예제코드
연습문제

Chapter15코르도바API를활용한앱만들기II
1.[실습]연락처관리하이브리드앱개발
1.1연락처관리앱:contactApp
1.2연락처정보검색하기
1.3연락처리스트뷰표시하기
1.4연락처상세정보표시하기
1.5연락처추가하기
1.6코르도바프로젝트생성및실행
1.7실습예제코드
2.[실습]지도(맵)활용하이브리드앱개발
2.1jquery-ui-map플러그인
2.2구글맵지도활용앱:mapApp
2.3현위치지도표시하기
2.4검색위치지도표시하기
2.5검색경로지도표시하기
2.6코르도바프로젝트생성및실행
2.7실습예제코드
연습문제

Chapter16실전프로젝트:맛집앱만들기
1.맛집관리하이브리드앱개발
1.1맛집앱:matzipApp
1.2맛집앱시작하기
1.3맛집정보등록하기
1.4맛집정보수정하기
1.5맛집목록조회하기
1.6맛집상세정보조회하기
1.7맛집추가정보조회하기
1.8코르도바프로젝트생성및실행
1.9실습예제코드
연습문제

부록실습소프트웨어설치하기
부록A크롬브라우저준비하기
부록B앱타나스튜디오설치하기
부록C코르도바(폰갭)안드로이드개발환경구축하기
부록D코르도바(폰갭)CLI설치하기
부록E안드로이드코르도바앱만들기

프로그래밍에지식이없는초보자도쉽게앱을만들수있다.

웹기술은초보자도빠른시간에쉽게습득할수있는기술이며다양한응용환경에편리한인터페이스로활용할수있다.때문에이제는컴퓨터비전공자라도누구나알아야하는기본기술이되어가고있다.

그럼에도불구하고아무런맥락없이공부해나가기에는그접근이쉽지않은것도사실이다.초심자가웹기술을배우고익히기에기술들이너무나광범위하고복잡해서상당한시간과노력을기울여야만하는점들을고려하여,이책은누구나쉽고간단하고빠르게앱을만드는핵심방법들에대해설명하고있다.

실습을통해실제앱을만들고판매할수있다.

핵심기술에대한소개와설명에그치지않고실제적용할수있는다양한구체적예제를통해웹활용능력을충분히습득할수있도록구성하였다.이해를돕는간단한예제코드수준에그치지않고실제활용가능한소규모의프로젝트코드를제공하였습니다.포트폴리오모바일웹,도서관리웹앱,지도관리하이브리드앱,맛집관리하이브리드앱등실제로사용가능한수준의다양한예제와전체코드를제공하고있다.

이책을통해서누구나웹기반의앱을개발하고다양한플랫폼환경에서동작하도록패키징함으로써앱마켓이나스토어를통해배포할수있다.

다양한웹기술을빠르고간단하게배울수있다.

HTML5,CSS3,JavaScript,jQuery,Ajax,XML,JSON,Database,jQueryMobile,PhoneGap등현시점에서반드시알아야하는필수웹기술요소들에대해핵심적인내용들을예제를통해학습할수있도록하였습니다.방대한내용이지만핵심적인개념과다양한마크업과스타일,메소드,API함수에대한간결한설명,그리고이를적용한다양한예제를적용하고만들어가다보면초보자라도빠르게전문가가될수있을것이다.

하이브리드앱을위한폰갭,제이쿼리,제이쿼리모바일활용

모바일웹앱의등장으로웹과네이티브앱의경계가무너지고있고다수의네이티브앱들은모바일웹앱으로도충분히개발할수있다.이책은모바일웹앱과이에기반한하이브리드앱을쉽고빠르게개발하도록지원해주는프레임워크의활용방법에대해알기쉽게설명하였다.특히,안드로이드플랫폼기반의웹앱과하이브드리앱에초점을맞추고있다.손쉽게모바일사용자경험(UX)를제공하는가장인기있는프레임워크인제이쿼리모바일과다양한플랫폼기반의애플리케이션개발을위한가장강력한프레임워크인폰갭의활용방법과이에기반한앱개발과정을배울수있다.

개정판주요변경내용

첫째마당의내용과관련해서모바일웹환경과관련한각종통계와수치정보들이최신정보로갱신되었다.

둘째마당과셋째마당의내용들은최신의제이쿼리모바일라이브러리와제이쿼리라이브러리버전을적용한예제와실행결과들로전면수정되었다.

넷째마당의하이브리드앱내용들은폰갭보다는코르도바관점에서내용이기술되었으며변경된CLI기반의앱개발방식을적용한예제와설명으로대폭변경되었다.부록에는변경된CLI방식의개발환경구축을위한각종소프트웨어설치와상세한개발절차와방법들이기술되었다.

이외에도각장마다연습문제가추가되었으며새롭게제이쿼리모바일위젯과jqPlot차트제이쿼리플러그인활용예제들이추가되는등전체적으로초판의내용과흐름을유지하는범위안에서개정판의내용이구성되었다.

주요내용

이책은첫째마당에서부록까지크게5개영역으로구성되어있으며,각영역에서다루는내용은다음과같다.

첫째마당에서는HTML5와CSS3를이용한모바일웹에대한핵심내용과예제들을다루고있으며,개인포트폴리오모바일웹실습을하게된다.

둘째마당에서는제이쿼리모바일의주요기능과함께독도소개앱을만들어보는실습을하게된다.

셋째마당에서는제이쿼리를이용한동적인웹앱전반의내용을익히게되며관광지안내웹앱과도서관리웹앱을실습한다.

넷째마당에서는폰갭을이용하여하이브리드앱을제작하는내용에대해배우며,장치관리앱,사진관리앱,연락처관리앱,구글맵지도활용앱등을실습한다.그리고최종적으로지금까지배운모든기능들을종합해맛집앱만들기를실습한다.

부록에서는실습에필요한크롬브라우저,앱타나스튜디오,안드로이드개발환경설치,폰갭설치에대한내용을다루고있다.

이책이필요한독자
·웹기초부터활용까지체계적으로공부하고자하는경우
·웹관련기술들의개념과상호관계를빠른시간에습득하고자하는경우
·IT기본기술로서의웹을이해하고활용능력을얻고자하는경우
·웹기초는이해하고있으나모바일활용방법을알고자하는경우
·단순한예제코드가아닌실제활용가능한다양한응용예제를필요로하는경우

이책에다루는주요내용
·HTML5기본마크업의의미와사용방법에관한설명과예제
·CSS3의스타일명세방법과적용예제
·jQuery의핵심API활용방법과예제
·XML,Ajax,JSON,SQLite웹관련기술의이해와활용예제
·jQueryMobile프레임워크를활용한UI생성및예제
·Cordova(PhoneGap)프레임워크를활용한하이브리드앱변환과예제

이책의핵심예제
·HTML5+CSS3를활용한모바일웹
개인포트폴리오모바일웹:mportpolio(4장4.1)
·jQueryMobile을활용한웹앱
독도소개웹앱:dokdoApp(8장5.1)
·jQueryMobile+jQuery를활용한웹앱
관광지안내웹앱:tourApp(11장6.1)
도서관리웹앱:bookApp(12장1.1)
·CordovaAPI를활용한하이브리드앱
장치관리앱:deviceApp(14장2.1)
사진관리앱:cameraApp(14장3.1)
연락처관리앱:contactApp(15장1.1)
구글맵지도활용앱:mapApp(15장2.2)
·jQueryMobile+jQuery+CordovaAPI를활용한하이브리드앱
맛집앱:matzipApp(16장1.1)