Ch 01. 시작하기

1.1 웹앱 vs. 네이티브앱 1.1.1 웹앱 (Web app) 1.1.2 네이티브앱 (native app) 스마트 폰에 특화된 웹사이트 평범한 홍보 사이트 대부분 포함 특징 웹 표준 기술을 사용한 UI 적용 – HTML, CSS, JavaScript, jQuery, jQTouch 안드로이드폰에 따로 설치하거나 안드로이드 마켓을 꼭 이용할 필요 없음 꼭 Java로 만들지 않아도 됨 일반적으로 URL(로그인 절차를 밟은 후) 통해 접속 모바일 기기 특성을 반영해 최적화 가능 1.1.2 네이티브앱 (native app) Java로 작성하며, 안드로이드 폰에 설치함 스피커, 가속도계, 카메라 같은 다양한 하드웨어 주변장치 사용 가능 안드로이드 마켓을 통해서만 이용 가능

1.1 웹앱 vs. 네이티브앱 1.1.3 각 방식의 장단점 네이티브앱 개발의 장점 네이티브앱 개발의 단점 1.1.3 각 방식의 장단점 네이티브앱 개발의 장점 신용카드 사용자가 쉽게 구매할 수 있슴 다양한 하드웨어 주변장치를 제어 가능 네이티브앱 개발의 단점 안드로이드 개발방법을 숙지해야 개발 가능 안드로이드폰에서만 사용 가능 Java 언어로 작성해야 함 개발, 컴파일, 배포, 재개발 등을 포함해 개발 주기가 긴 편

1.1 웹앱 vs. 네이티브앱 1.1.3 각 방식의 장단점 웹앱 개발의 장점 웹앱 개발의 단점 1.1.3 각 방식의 장단점 웹앱 개발의 장점 웹 개발자가 현재 사용하고 있는 툴, 웹 디자인, 기술 활용 가능 웹 브라우저만 있으면 어떤 장치에서도 실행 가능 실시간 버그 수정 가능 개발 주기 빠름 웹앱 개발의 단점 카메라, 스피커 등 폰 주변장치에 접근 불가 결제 기능을 제공하지 못하므로, 다른 결제 수단 (PC나 모바일 뱅킹 등)을 사용해야 함 세밀한 UI 구성 어려움

1.1 웹앱 vs. 네이티브앱 1.1.4 어떤 방법을 사용해야 할까? 온라인 상태인 안드로이드 폰에서 웹앱과 네이티브앱의 경계 모호 안드로이드 웹브라우저는 오프라인 상태에서도 웹앱 이용 지원 폰갭 PhoneGap 웹 개발자는 웹앱을 안드로이드나 다른 모바일 기기의 네이티브앱처럼 패킹가능 - 기술의 혼합 익숙한 언어로 코드를 작성해 순수한 웹앱으로 제작·배포 가능 같은 코드 기반 수많은 하드웨어에서 액세스할 수 있는 다양한 네이티브 버전 작성 안드로이드 마켓에서 판매 가능 Freemium – freeware이지만 고급 기능만 유료로 판매하는 방식

폰갭을 이용한 앱 개발 작업 폰갭은 모바일에 특화된 자바스크립트 라이브러리를 제공하며 HTML5의 기본 자바스크립트와 폰갭의 자바스크립트를 혼용해서 웹 페이지를 구성합니다. 웹 페이지를 구성할 때 디자인 문제를 해결하기 위해 드림위버와 jQuery Mobile을 사용할 수 있으며, 이렇게 구성된 웹 페이지를 플랫폼별로 SDK로 가져와 프로젝트를 생성합니다.

1.2 웹 프로그래밍 집중 코스 HTML, CSS, JavaScript 1.2.1 HTML 소개 브라우징해서 보는 웹페이지 누군가의 컴퓨터에 깔린 텍스트 문서 웹페이지 텍스트 - 문서의 구성에 맞게 HTML 태그로 적절히 포장 e.g., http://comedudb6.knue.ac.kr/tykim HTML 태그 브라우저에 문서의 구조를 알려주는 역할 브라우저는 이 정보를 토대로 정보를 어떻게 보여줄지 논리적 결정 HTML & XML

1.2 웹 프로그래밍 집중 코스 1.2.1 HTML 소개 [예제 1-1] 첫 번째 줄 ‘Hi there!’ 문자열은 h1 태그 쌍으로 둘러싸임 끝 태그에는 슬래시가 있고 시작 태그에는 슬래시가 없음 h1 태그로 둘러싸인 텍스트 – 요소(element) 브라우저에 ‘둘러싸인 단어는 제목’이라고 알려줌 브라우저는 크고 굵은 글자로 출력 h1 태그 외에도 h2, h3, h4, h5, h6 태그 숫자가 작을수록 텍스트 더 크게 표기 두 줄은 p 태그 단락(paragraph) 태그 브라우저는 이를 통해 각 문단 구분 문단이 길어 브라우저가 제공하는 너비를 벗어나면 텍스트를 아래로 내려 다음 줄에 표시 문단과 문단 사이에는 빈 줄 삽입

1.2 웹 프로그래밍 집중 코스 1.2.1 HTML 소개

1.2 웹 프로그래밍 집중 코스 1.2.1 HTML 소개 [예제 1-2] HTML 태그는 중첩(nested) 가능 세 아이템(li)을 가진 정렬되지 않은 리스트(ul) 태그 브라우저는 각 아이템을 불릿 리스트로 표현 태그를 다른 태그 안에 넣을 때 안에 넣은 태그를 자식 엘리먼트 또는 자식 이 예제에서 li 태그는 ul 부모 태그의 자식

1.2 웹 프로그래밍 집중 코스 1.2.1 HTML 소개 블록 태그 인라인 태그 왼쪽이나 오른쪽에 다른 엘리먼트를 포함하지 않음 – 아래에 위치 Ex) 제목, 단락, 리스트 아이템 <hn></hn>, <blockquote></blockquote>, <p></p> e.g.,<h1> The kangaroo</h1> kick the koala. [실행결과] 인라인 태그 이름에서도 알 수 있듯 내용이 한 줄 안에 표시 강조 태그(em) 인라인 태그의 일종 다음 예에서 really가 이탤릭으로 강조되어 한 줄 안에 표시 <q></q>, <a></a>, <em></em>, <br>, <img>

1.2 웹 프로그래밍 집중 코스 1.2.1 HTML 소개 인라인 태그 중 가장 중요한 것은 a 태그 ‘a’는 앵커(anchor)의 약자 - 링크나 하이퍼링크를 적용하기 위해 사용 a 태그로 둘러싸인 텍스트는 새로운 HTML 페이지 로드 속성은 “시작” 태그<a>에서 지정 a 태그에는 타겟 페이지의 위치를 지정하기 위해 href 속성 사용 구글 홈페이지를 링크로 지정한 예 World Wide Web

1.2 웹 프로그래밍 집중 코스 1.2.1 HTML 소개 HTML 요소는 head와 body 두 요소로 구성 [예제 1-3] head 엘리먼트는 title 엘리먼트 포함 브라우저에게 윈도우 타이틀 바에 표시할 텍스트 알려줌

1.2 웹 프로그래밍 집중 코스

1.2 웹 프로그래밍 집중 코스 1.2.1 HTML 소개 Text Editor 고르기 맥 OS - TextMate(http://macromates.com/) 윈도우 - 클론 버전인 E TextEditor (http://www.e-texteditor.com/) 권장 무료 제품 맥 OS - Text Wrangler(http://www.barebones.com/products/TextWrangler/) 윈도우 - Notepad2(http://www.flos-freeware.ch/notepad2.html)나 Notepad++(http://notepad-plus-plus.org/) 리눅스 - vi, nano, emacs, gedit

1.2 웹 프로그래밍 집중 코스 1.2.2 CSS (Cascading Style Sheets) 소개 CSS는 HTML 문서를 비주얼하게 꾸밀 수 있는 스타일시트 언어 CSS를 이용해 텍스트의 색상과 크기, 스타일(굵기, 이탤릭 처리 등), 페이지 레이아웃과 그레이디언트, 투명도 이상의 복잡한 양식까지 구현 가능 [예제 1-4] body 엘리먼트에서 특정 텍스트를 빨간색으로 보여주도록 브라우저에 알려주는 CSS 룰 예제 body는 셀렉터(룰에 따른 효과 규정)이며, 중괄호로 선언부 감쌈 선언부는 속성 세트와 값을 포함 이 예제에서 color는 속성이고, red는 color 속성의 값

1.2 웹 프로그래밍 집중 코스 1.2.2 CSS 소개 속성명은 CSS 규약에서 미리 정의 - 임의로 속성명 만들 수 없음 각 속성에는 주어진 속성을 위한 적절한 값, 포맷이 정해져 있음 red와 같은 설정된 키워드나 HTML 컬러 코드 표기법을 사용해 컬러 지정 HTML 컬러 코드 표기법은 16진법 사용 해시 기호(#)는 (좌측에서 우측으로) red(#FF0000), green, blue 값을 보여주는 세 쌍의 16진수(0–F)로 구성 [예제 1-5]는 일반적 선언부 background-color에 지정된 컬러 코드는 CSS에서 ‘gray’와 일치 font-family : font-name [폰트 서체를 지정] font-style : normal | italic [폰트의 스타일을 지정] font-weight : normal | bold [폰트의 굵기를 지정] font-size : num | x-small | small | medium | large | x-large | xx-large

1.2 웹 프로그래밍 집중 코스 [실행 결과] [예제 1-5] CSS 적용 <html> <head> <title>My Awesome Page</title> <link rel="stylesheet" href="screen.css" type="text/css" /> </head> <body> <h1>Hi there!</h1> <p>Thanks for visiting my web page.</p> <p>I hope you like it.</p> <ul> <li>Pizza</li> <li>Beer</li> <li>Dogs</li> </ul> </body> </html>

1.2 웹 프로그래밍 집중 코스 1.2.2 CSS 소개 모든 하이퍼링크를 이탤릭으로 나타내고 싶다면? a {font-style: italic; }; } h1 태그로 둘러싸인 하이퍼링크만 이탤릭으로 보여주고 싶다면? h1 a {font-style: italic; }; } HTML 태그에 id 또는 class 속성을 추가해 고유의 셀렉터 정의 가능 CSS에 .loud { font-style: italic; }를 추가하면? ‘Hi there!’와 ‘Pizza’만 이탤릭체 ‘Hi there!’와 ‘Pizza’가 loud 클래스(.loud)를 갖기 때문

1.2 웹 프로그래밍 집중 코스 1.2.2 CSS 소개 highlight ID를 가진 단락 태그에만 노란색 배경을 채우도록 추가 #highlight { background-color: yellow; } # 기호는 CSS에 ID highlight를 가진 HTML 태그를 찾으라고 통보합 태그 네임(body, h1, p 등), 클래스 네임(.loud, .subtle, .error 등) 혹은 ID(#highlight, #login, #promo)로 엘리먼트를 선택 가능 h1 a, body ul .loud 등의 셀렉터를 연결해 hierarchy 지정 가능 -> DOM (Document Object Model) class와 id 한 페이지에서 한 개 이상의 요소에 같은 값을 지정(grouping)할 경우 - class 속성 그렇지 않다면 id 값 사용 - id 값은 한 페이지에서 유일, 빠른 속도 class 셀렉터의 과다 사용은 앱의 속도를 느리게 할 수 있음 결과 [html] <div class="loud">[class]Hi there!</div> <div id="highlight">[id]Hi there!</div> [css] #highlight {background-color: yellow;} .loud {font-style: italic;}

1.2 웹 프로그래밍 집중 코스 1.2.2 CSS 적용 HTML 페이지에 스타일시트를 적용하는 법 [예제 1-6]처럼 HTML 문서의 head 부분에서 스타일시트에 링크: <link> 예제에서 href 속성은 HTML 페이지와 같은 디렉터리에 있는 screen.css라는 텍스트 파일을 가리키는 상대적 경로 절대 경로로 지정하려면 http://example.com/screen.css - 상대 경로 지정이 더 편리

1.2 웹 프로그래밍 집중 코스 1.2.2 CSS 적용 [예제 1-7] - screen.css

1.2 웹 프로그래밍 집중 코스 1.2.3 Javascript 소개 편리하고 쌍방향적 HTML 페이지를 구성할 수 있는 스크립트 언어 폼에 입력한 값이 유효한 것인지 확인 가능 사용자가 클릭한 위치 따라 페이지의 요소를 보여주거나 감출 수 있음 현재 페이지를 리프레시하지 않고 데이터베이스를 변경하도록 웹서버에 요청 가능 최신의 스크립트 언어: 변수, 배열, 오브젝트, 모든 전형적인 제어문(if, while, for 등)을 갖고 있음 동적(dynamic) HTML 페이지 작성: 동적 웹 프로그래밍

1.2 웹 프로그래밍 집중 코스 1.2.3 Javascript 소개 [예제 1-8] ➊ 세 가지 엘리먼트를 가진 foods라는 하나의 array(값의 리스트) 정의 ➋ i를 0으로 초기화. 이어서 i가 foods 배열의 길이보다 같거나 크다면 루 프를 빠져나감. 그리고 루프를 돌며 매회 i+1만큼 증가 ➌ 배열의 현재 엘리먼트가 ‘Apples’와 같은지 검사 ➍ 배열의 현재 엘리먼트가 Apples와 같으면 출력 ➎ 배열의 현재 엘리먼트가 Apples와 같지 않으면 출력

1.2 웹 프로그래밍 집중 코스 1.2.3 Javascript 소개 간단한 자바스크립트 문법 문장은 세미콜론(;)으로 끝남 코드 블록은 중괄호({ })로 끝남 변수는 var 키워드로 선언 배열 엘리먼트는 꺽쇠괄호([ ])로 액세스 가능 배열 키는 0부터 할당 하나의 등호(=)는 대입 연산자(하나의 변수에 어떤 값을 할당함) 두 개의 등호(==)는 동등 논리 연산자(두 가지 값이 같은지 비교함) 더하기(+)는 문자 연결 연산자(두 개의 문자열을 더함) PL: Chater 15

1.2 웹 프로그래밍 집중 코스 1.2.3 Javascript 소개 가장 중요한 특징은 HTML 페이지 요소와 상호작용 가능한 것 DOM 요소를 프로그램으로 제어 가능 문서 객체 모델 DOM(Document Object Model) HTML 문서에 대한 프로그래밍 인터페이스 브라우저가 HTML 문서를 체계적으로 파악하도록 구조(hierarchy) 정보를 제공 http://en.wikipedia.org/wiki/Document_Object_Model

1.2 웹 프로그래밍 집중 코스 1.2.3 Javascript 소개 [예제 1-9] 사용자가 h1에서 클릭했을 때 페이지의 몇몇 텍스트가 바뀜

1.2 웹 프로그래밍 집중 코스 1.2.3 Javascript 소개 jQuery 자바스크립트에 비해 상대적으로 작은 자바스크립트 라이브러리 다양한 브라우저에서 범용적으로 사용가능한 자바스크립트 코드 작성 다수의 일반적 웹 개발 업무를 단순화하는 장점 [예제 1-10] - [예제 1-9]를 jQuery로 재작성:

1.2 웹 프로그래밍 집중 코스 1.2.3 Javascript 소개 [예제 1-10] 코드 분석 ➊ jquery.js 라이브러리를 포함한다는 의미 페이지와 동일한 디렉터리에 있는 파일을 의미하는 상대적인 경로 ➋ 텍스트를 대신하기 위해 써야만 했던 많은 코드를 줄임 h1 엘리먼트에서 확인

jQuery 내려 받기 (http://jquery.com) 튜토리얼과 문서도 참고 가능 내려 받은 jQuery의 이름을 jquery.js로 바꾼 다음, HTML 문서와 동일 디렉 터리에 복사 jquery.js 파일을 로컬에 두지않고 구글(Google)서버에서 사용하기 <script type=“text/JavaScript” src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js> </script> http://code.jquery.com/jquery-1.7.1.min.js JavaScript Online Book