뚝딱! 나만의 모바일 포트폴리오 앱 만들기

머리말


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