나만의 모바일 포트폴리오 앱 만들기(뚝딱!)(퍼플북 14)

웹 관련 기술은 최근 모바일 환경의 변화와 관련하여 보다 다양해지고 강력해지고 있으나, 그에 비해 초심자가 웹 기술을 배우고 익히기에는 광범위하고 복잡해서 상당한 시간과 노력을 기울여야 한다.

이 책은 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

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