모바일 웹+웹앱+하이브리드앱 입문 jQuery Mobile Cordova를
활용한,한 권으로 끝내는 모바일 웹 기술의 모든 것

 

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

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

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

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

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

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

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

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

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

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

개정판 주요 변경 내용

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

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

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

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

주요 내용

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

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

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

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

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

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

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

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

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

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

[홈페이지제작]을 위한 html5과 css3 예제


html과 css 에 대하여
현재의 웹 페이지 제작 기술들 중에서 가장 큰 화두는 HTML5입니다.
10여년간 꾸준히 사용 되어오던 XHTML+CSS2의 웹페이지 제작기술은 그래픽적인 요소를 표현하기 위해서 이미지를 사용하는 것 외에는 다른 대안이 없었으며 인터렉티브한 요소를 사용하기 위해서는 플래쉬나 다른 ActiveX와 같은 요소를 사용해야 했으며, 무엇보다 표준화 되지 않은 제작기술의 범람으로 크로스 브라우징이라는 당연히 적용되어야 하는 주제를 무척이나 까다로운 이슈로 남겨놓았습니다.
새롭게 등장한 HTML5는 이러한 웹 페이지 제작의 어려움들을 해소하기 위해서 고안되었습니다.
기존에 사용하던 XHTML + CSS2의 표준화된 요소들 위에 더욱 시맨틱해진 태그 요소들과, 그래픽적인 부분을 보완하기 위한 다양한 효과들, 멀티미디어를 HTML 자체에서 지원하기 위한 방법을 제공하는 등 HTML5로 제작된 웹 페이지는 기존의 XHTML 기반의 웹 페이지보다 더욱더 인터렉티브해 집니다.
특히 CSS3에서 추가된 “미디어 쿼리”기능은 한 번의 작업으로 다양한 해상도에 따라 각기 다른 UI 형태를 제공할 수 있도록 하여 PC + 테블릿 + 스마트 폰을 한번에 지원하는 “반응형 웹”이라는 새로운 제작 기법을 탄생 시켰습니다
html5의 간단한 예시블 보도록 하겠습니다.
<!doctype html>:Html을 알리는 태그
<html (lang="ko")>:시작과 끝
<head>:브라우저에게 정보를 주는 태그
<body>: 몸통과 같은 존재(내용)
<meta>: <meta charset="utf-8">
html5에서 한국어뿐만아니라 모든언어를 사용할수있는 문자세트
<div> 전체를 감싸는 요소
<title>
<br>:줄바꿈
<img>,<video>,<audio>
<header>: 머리말
/<nav>: 문서 +사이트 연결 내비게이션 역할
<ul>,<ol>,<li>: 목록 /
<p>:텍스트
<hn>:크기별 제목
<article>:콘텐츠
<aside>:사이드바
<footer>: 저작권표시
<table>,<tr>,<td>,<th>:표
◈<form>,<fieldset>,<legnd>,<label>,<button>,<input> 등: 폼만들기◈
css3의 간단한 예시블 보도록 하겠습니다.
 
<style>, .class , #id : 스타일 정의하고 적용!
font-size,wieght,align,shadow,height,style: 텍스트 꾸미기
color, background(배경)
margin(박스 바깥 여백)/ padding(박스안쪽 바깥 여백)
border(테두리) -radius(둥글게)
transform(웹요소변형)
transition(애니메이션효과),animation(애니메이션)
@media(반응형웹디자인)
 
 
웹문서의 기본적인 스타일을 미리 지정해둔 스타일시트. html로는 웹문서를 다양하게 설계하고 수식하는데 한계가 있기 때문에 이를 보완하기 위해 만들어진 것으로, 문서의 일관성을 유지하고 이용하기 편리하다는 특징이 있다.html이 웹문서의 뼈대를 잡기 위한 도구라면, CSS(스타일시트)는 그 뼈대를 더 예쁘게 꾸미는데 필요한 도구라고 설명할 수 있다.
 
◈ CSS(스타일시트)의 선택자
- 태그 : 선택한 태그가 사용된 모든 내용에 대해 스타일을 적용하는 것 / ex) a 태그의 기본 기능인 파란글씨/밑줄을 없애는 것
- 클래스 : 비슷한 계열의 내용에 같은 스타일을 적용하는 것 / 같은 이름의 클래스가 존재할 수 있음
- 아이디 : 한 '화면'에서 유일한 값으로 특정 범위에만 스타일을 적용하는 것 / 같은 이름의 아이디가 존재할 수 없음
 
 
◈ CSS(스타일시트)의 문법
태그명 { 속성명:값; 속성명2:값2; }
#아이디명 { 속성명:값; 속성명2:값2; } /* 설명을 써주세요 */
.클래스명 { 속성명:값; 속성명2:값2; }
CSS(스타일시트)는 html과 다르게 () 대신 {}중괄호를, = 대신 :(콜론)를 사용하며, 값 뒤에는 반드시;(세미콜론)을 붙여야 한다.
또한 스타일시트에서는 '/* */'를 주석으로 쓰며, /* 와 */ 사이에 내용을 입력하면 된다.
 
2. font 태그(글자)와 관련된 CSS 속성
1) color : 색상값 ; - 글자 색상
2) font-size : 사이즈값 ; - 글자 크기
3) font-family : 폰트명 ; - 글자 폰트(폰트명이 길어 띄어쓰기된 경우 작은따옴표로 묶어줘야 함 / ex) 'time new roman'
4) font-style : (italic/normal) ; - 글자 기울임꼴 지정 / 태그 자체에 글자 기울임꼴이 지정되어 있는 경우가 있어 바꾸기 위한 기능
5) font-weight : (bold/normal) ; - 굵은 글꼴 / 태그 자체에 굵은 글꼴이 지정되어 있는 경우 바꾸기 위한 기능 / ex) th 태그
6) text-align : (left/center/right) ; - 글자의 가로 정렬 / 컨트롤에서 많이 쓰임 / ex) 버튼 위 글씨라서 가운데 정렬이 필요할 때
7) test-decoration : (underline/none) ; - 글자의 밑줄 / ex) a 태그에서 밑줄 지울 때
 
+ 사이즈를 나타내는 단위
절대크기 - pt, mm, cm, inch
상대크기 - px(해상도에 따라 달라짐), %, em
 
CSS(스타일시트)를 적용해볼 예시
◈ 태그에 CSS(스타일시트) 적용하기
<p> 태그에 스타일시트로 속성을 변경한 경우
  
 

 
위의 예시에서 <body> 부분은 전혀 건드리지 않고, p 태그에 스타일시트를 이용해 오렌지색 / 10pt / 기울임꼴 / 가운데 정렬을 속성으로 설정한 결과 아래와 같이 내용의 스타일이 변경되었다.
+ 참고로 스타일시트는 <head><body> 사이에 작성하며 <style> ........ </style>의 형태로 내용을 쓴다
◈ 클래스에 CSS(스타일시트) 적용하기
 
 
클래스에 스타일시트를 적용하는 것이기 때문에 .(점)을 클래스명 앞에 붙인 후 중괄호로 속성을 적용한다.
빨간색 / 20pt / 글자 밑줄을 "testA"라는 클래스에 적용한 예시이며, "testA"클래스를 제외한 나머지 내용에는 직전에 적용한 p태그의 스타일시트가 그대로 남아있음을 알 수 있다.

 

 

직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면  

아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)

 

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,