1. HTML5 와 CSS3 를 사용한 기본 레이아웃 예제 2. 박스를 활용하여 구성한 HTML5 & CSS3 예제 3. 웹 폼을 이용한 회원가입 페이지 4. 안드로이드 웹 앱.

Presentation on theme: "1. HTML5 와 CSS3 를 사용한 기본 레이아웃 예제 2. 박스를 활용하여 구성한 HTML5 & CSS3 예제 3. 웹 폼을 이용한 회원가입 페이지 4. 안드로이드 웹 앱."— Presentation transcript:

1 1. HTML5 와 CSS3 를 사용한 기본 레이아웃 예제 2. 박스를 활용하여 구성한 HTML5 & CSS3 예제 3. 웹 폼을 이용한 회원가입 페이지 4. 안드로이드 웹 앱

2 1. HTML5 와 CSS3 를 사용한 기본 레이아웃 예제 다음은 HTML5 & CSS3 로 제작한 간단한 홈 페이지의 초기 화면을 그림이다. 제목이 맨 위로 나오고, 그 아래로 간단한 메뉴가 나오며, 오른쪽에는 리스트 형태의 메뉴가 제공된다. 가운데에는 2 단 형태로 메인 글이 표시되며, 텍스트 아래에 그림이 표시되는 화면 구조이다.

3 1. HTML5 와 CSS3 를 사용한 기본 레이아웃 예제 시작화면의 HTML 코드의 구조는 다음 과 같다. HTML5 가 정의한 기본 레이아웃을 그 대로 지원한다. 사용되는 언어로 영어를 지정했으며, 타이틀, 헤더, 네비게이션, 사이드바, 푸 터에 대한 부분까지 사용하였다.

4 1. HTML5 와 CSS3 를 사용한 기본 레이아웃 예제 헤더 태그는 다음과 같이 정의할 수 있다. 네비게이션 영역은 다음과 같이 정의되었다. 4 개의 항목인 'Home‘, 'About Us', 'Feedback', 'Contact' 를 리스트 형태로 지원한다.

5 1. HTML5 와 CSS3 를 사용한 기본 레이아웃 예제 네비게이션 메뉴에서 둥근 타원형 곡선 은 CSS3 를 사용하여 사용자가 지정한 스타일 (10px 의 값으로 지원 ) 로 변형시 켰다.

6 1. HTML5 와 CSS3 를 사용한 기본 레이아웃 예제 HTML5 에서 태그는 별도의 CSS 없이 사이드바의 역할을 수행한다.

7 1. HTML5 와 CSS3 를 사용한 기본 레이아웃 예제 푸터 (Footer) 의 정의는 다음과 같이 되었다. 푸터 섹션에 원하는 글이나 링 크를 추가할 수 있다. 푸터를 구성하는 박스의 백그라운드 색을 회색톤으로 설정하고, 패딩 값을 10px 로 하며, 둥근 테두리 정도를 5px 로 지정하고, 텍스트 배열을 중앙으로 하였다. 텍스트의 색상은 흰색으로 지정하였다.

8 2. 박스를 활용하여 구성한 HTML5 & CSS3 예제 두 번째 예제 (http://tutorialzine.com/2010/02/HTML5-css3-website-template/) 도 간단한 레이아웃을 가지며 첫 번째 예제처럼 사이드바에서 중요 메뉴를 제공하지만, 오른쪽에서 다시 메뉴를 제공하지는 않는다. 전체적은 화면 구 성은 다음 그림과 같다.

9 2. 박스를 활용하여 구성한 HTML5 & CSS3 예제 하나의 주제에 대해서 박스 안에서 설명을 하고 오른쪽 그림의 링크를 통해 서 해당 페이지로 이동할 수 있게 되어 있다. 이를 위해서 개발자는 먼저 홈페이지의 디자인을 포토샵으로 결정할 수 있다. 어떻게 만들지를 머리로 구상하고 이 구상된 결과를 포토샵으로 일단 그려본 후에 본격적인 구현은 HTML5 와 CSS3 로 직접 코딩하여 시작하도록 한다.

10 2. 박스를 활용하여 구성한 HTML5 & CSS3 예제 브라우저 상단의 타이틀 내용을 지정하고 문자 세트로 UTF-8 을 지정한 후 사 용자가 인터넷 익스플로러를 사용할 경우를 대비하였다.

11 2. 박스를 활용하여 구성한 HTML5 & CSS3 예제 바디 영역은 섹션 태그 를 사용하여, 하나의 페이지를 영 역별로 구분하였다. 오른쪽 상단에 링크로 연결된 메뉴로 'Photoshoot‘, 'Sweet Tabs', 'Navigation Menu' 를 제공한다.

12 2. 박스를 활용하여 구성한 HTML5 & CSS3 예제 두 번째 섹션으로 다음과 같이 구성한다. 첫 번째로 아티클 (article) 의 ID 를 로 설정하고, 오른쪽 그림의 폭과 높이를 과 같이 설정하고 링크를 설정하였다.

13 2. 박스를 활용하여 구성한 HTML5 & CSS3 예제 다음은 맨 아래의 마지막을 구성하는 푸터 영역이다. 저작권을 나타내는 Copyright 를 가운데로 위치시키고, 왼쪽과 오른쪽 박스로 링크를 제공한다.

14 2. 박스를 활용하여 구성한 HTML5 & CSS3 예제 HTML5 로 구성된 내용을 스타일을 입히기 위해서는 CSS3 의 힘이 필요하다. 이는 다음과 같이 작성하도록 한다.

15 2. 박스를 활용하여 구성한 HTML5 & CSS3 예제 우선 기본적인 텍스트 색상, 크기, 페이지 백 그라운드 색상, 폰트 설정을 정의하였다.

16 2. 박스를 활용하여 구성한 HTML5 & CSS3 예제 다음은 하이퍼링크의 스타일을 정의하는 부 분이다. 헤딩, 네비게이션, 아티클, 푸터 영역 스타일 부분 정의는 370~374 페이지 소스코드 참조

17 2. 박스를 활용하여 구성한 HTML5 & CSS3 예제 템플릿에 보다 보기 좋은 효과를 추가하기 위해 네비게이션 링크가 클릭되었 을 때 부드럽게 스크롤링되는 효과를 다음과 같이 jQuery plug-in 을 추가하여 얻도록 한다. 실질적인 효과를 제공하는 부분은 함수 'scrollTo()' 이다.

18 3. 웹 폼을 이용한 회원가입 페이지 웹 폼을 활용하여 회원가입 양식 페이지를 작성해보자. HTML5 에서는 다양한 속성을 지원하기 때문에 손쉽게 필드를 만들 수 있고, 해당 필드의 유효성 검사 또한 간단하게 처리 가능하다. 회원가입 웹 페이지는 총 7 가지 필드를 문서 속성으로 갖는다. 376~380 페이지 소스코드 참조

19 3. 웹 폼을 이용한 회원가입 페이지 웹 폼을 구현하는 html 코드를 각각 살펴보도록 하자. HTML5 문서에서 페이지 하단의 "Register" 버튼을 누르면, 각각의 태 그의 지정된 속성에 대해 유효성 검사를 진행하여 오류 메시지를 보인다. ① 위 태그는 email 속성으로 정의된 태그이다. 태그의 type 속성이 "email" 로 정의되었으므로 페이지 하단 “Register" 버튼을 통해 웹 페이지를 서버로 전송하기 직전 유효성 검사를 진행한다.

20 3. 웹 폼을 이용한 회원가입 페이지 ② 위 코드의 결과는 아래와 같은 password 필드를 생성한다. ③ 위 코드를 크롬 브라우저에서 실행하게 되면 마우스로 날짜를 입력할 수 있 조절바를 포함하는 필드가 생성된다. ④ 위 코드는 여러 줄의 텍스트를 입력할 수 있는 태그의 구현이다.

21 3. 웹 폼을 이용한 회원가입 페이지 ⑤ 위 코드는 전화번호를 입력하는 텍스트 상자에 대한 구현이다. ⑥ url 속성은 웹 사이트의 주소를 입력받는 폼을 생성한다. ⑦ 위 코드는 신용카드 정보를 입력받기 위한 텍스트 상자이다.

22 4. 안드로이드 웹 앱 4.1 개발 환경 세팅 안드로이드는 자바 기반 언어이므로 최신 버전의 JDK 가 설치되어 있어야 하 며, 개발자 툴로 사용되는 대표 IDE 인 이클립스와 안드로이드 SDK 를 이클립 스에서 사용하기 위한 플러그인인 ADT Plugin 이 같이 설치되어야 한다. JDK 설치 사이트 (http://www.oracle.com/technetwork/java/javase/downloads/index.html)http://www.oracle.com/technetwork/java/javase/downloads/index.html 이클립스 설치 사이트 (http://www.eclipse.org/downloads/)http://www.eclipse.org/downloads/

23 4. 안드로이드 웹 앱 4.1 개발 환경 세팅 JDK 와 이클립스를 설치 완료하였다면, 그 다음으로 ADT Plugin 을 설치한다. 플러그인 설치는 아래의 절차를 따른다. 1. 이클립스를 실행하여 Help > Install New Software.. 메뉴를 선택한다. 2. Add 버튼을 선택하고, Repository 다이얼로그에 ADT Plugin 이름을 설정하고 아래 주소를 입력한다. https://dl-ssl.google.com/android/eclipse/ 3. OK 를 선택한다. 이후 동의 및 설치 절차는 다이얼로그에서 지시하는 대 로 Next 와 OK 버튼을 선택하면 된다.

24 4. 안드로이드 웹 앱 4.1 개발 환경 세팅 준비를 마쳤으면 안드로이드 SDK 를 다운로드 받아 설치하면 된다. 참고로 안드로이드 SDK 는 윈도우즈와 리눅스 계열에서 둘 다 설치 가능하며 아래 사이트에서 OS 별로 SDK 를 다운로드 받을 수 있다.

25 4. 안드로이드 웹 앱 4.1 개발 환경 세팅 SDK 를 설치한 후 안드로이드 에뮬레이터를 실행하기 위해 AVD 를 생성해야 하는데, AVD 생성을 위한 GUI 툴을 실행하는 방법은 아래와 같다. Eclipse ADT Plugin 설치 후 Window > Android SDK and AVD Manager 메뉴 선택 Windows 환경에서 안드로이드 SDK 설치 폴더로 이동 후 SDK Manager.exe 실행 MAC 혹은 Linux 환경에서 안드로이드 SDK 설치 폴더로 이동 후 tools/android 실행

26 4. 안드로이드 웹 앱 4.1 개발 환경 세팅 Android SDK and AVD Manager 를 실행하였으면, 관련된 API 들을 먼저 다운 로드 받아야 한다. 아래와 같이 Available Packages 메뉴를 통해 현재 제공되는 API 들을 모두 다운로드 받을 수 있다.

27 4. 안드로이드 웹 앱 4.1 개발 환경 세팅 윈도우 개발 환경이라면 이 과정에서 디바이스 연결을 위한 USB 드라이버들 을 다운로드 받게 된다. 실제 디바이스를 연결하여 개발할 예정이라면 아래를 참고하여 드라이버를 등록해주도록 한다.

28 4. 안드로이드 웹 앱 4.1 개발 환경 세팅 관련된 API 들을 모두 다운로드 받았으면 New 버튼을 선택하여 원하는 API 레벨의 AVD 를 생성해준다. 여기에서는 이름과 API 레벨 (Target) 정보를 기본으로 입력하면 된다.

29 4. 안드로이드 웹 앱 4.1 개발 환경 세팅 조금 전에 생성한 AVD 를 지정해주면 해당 버전의 에뮬레이터가 실행된다.

30 4. 안드로이드 웹 앱 4.2 웹 앱 (Web App) 구현 개념 웹 뷰 (WebView) 웹 페이지의 뷰 (View) 이다. 실제로 안드로이드 웹브라우저의 화면을 보여주 는 기능을 담당한다. AddJavascriptInterface 자바 객체가 자바스크립트객체를 바인드하여 사용할 수 있는 방법을 제공해 주는 인터페이스이다. 인텐트 (Intent) 인텐트 (Intent) 를 사용하여 실제로 여러 가지 어플리케이션 간의 데이터 통신 이 이루어진다. 액티비티 (Activity) 안드로이드 앱의 화면을 구성하는 페이지로 이해하면 된다.

31 4. 안드로이드 웹 앱 4.2 웹 앱 (Web App) 구현 개념 웹 뷰 컴포넌트를 안드로이드 어플리케이션에서 사용하기 위해서는 아래와 같이 정의하면 된다. 화면을 구성하는 액티비티 클래스에서 웹 뷰를 읽는 방법은 아래와 같다.

32 4. 안드로이드 웹 앱 4.2 웹 앱 (Web App) 구현 개념 웹 페이지를 로드하기 위해서는 애플리케이션에서 인터넷 접속이 가능해야 하는데 이와 같은 권한 설정을 위해서는 안드로이드 앱 설정 파일인 매니페 스트 파일에 아래와 같은 설정을 추가해주어야 한다.

33 4. 안드로이드 웹 앱 4.2 웹 앱 (Web App) 구현 개념 자바스크립트와 페이지 이 동을 구현하는 함수에 대한 설명이다.

34 4. 안드로이드 웹 앱 4.2 웹 앱 (Web App) 구현 개념 웹 뷰에서 링크를 실행했을 때의 기능을 구현한 예이다.

35 4. 안드로이드 웹 앱 4.2 웹 앱 (Web App) 구현 개념 기본적으로 웹 뷰 클래스는 내장된 WebViewClient 클래스를 등록하고 있 기 때문에 위와 같이 새로 구현한 MyWebViewClient 클래스를 웹 뷰에 WebClient 로 등록해주어야 한다.

36 4. 안드로이드 웹 앱 4.3 웹 앱 (Web App) 개발하기 안드로이드 브라우저에서 해당 웹 폼 기반 웹 페이지를 로딩하는 코드를 구현하고, 해당 웹 페이지는 asset 폴더 아래 html, css 로 저장하여 로드한 다. 웹 페이지를 포함하는 웹 앱을 개발하기 위해서는 아래와 같은 절차가 필요하다.

37 4. 안드로이드 웹 앱 4.3 웹 앱 (Web App) 개발하기 웹 뷰 태그의 id 는 html_view 로 정의하였으므로 추후 소스코드에서 다음과 같이 id 를 가져와 사용하면 된다.

38 4. 안드로이드 웹 앱 4.3 웹 앱 (Web App) 개발하기

39 4. 안드로이드 웹 앱 4.3 웹 앱 (Web App) 개발하기 example_3.html 저장 3 장에서 작성한 예제 파일을 'example_3.html' 이름으로 하여 아래와 같이 'assets' 폴더 아래 저장한다. 'assets' 폴더에 저장된 웹 문서는 아래와 같은 URI 로 웹 앱 내에서 접근 및 로드 가능하다.

40 4. 안드로이드 웹 앱 4.3 웹 앱 (Web App) 개발하기 'mWebView.loadUrl()' 함수 안에 "file:///android_asset/example_3.html" 과 같이 파일명에 "file:///android_asset/" 접두어를 붙인 URI 를 생성하여 전달하면 해당 웹 페이지를 로드할 수 있다.

41 4. 안드로이드 웹 앱 4.3 웹 앱 (Web App) 개발하기 안드로이드로 에뮬레이터에서 실행한 결과 화면

42 4. 안드로이드 웹 앱 4.3 웹 앱 (Web App) 개발하기 안드로이드는 다른 화면으로 전환하기 위해 인텐트를 사용하는데, 웹 뷰 내에 서의 태그와 특정 인텐트는 매핑 관계가 있다. 따로 링크에 대한 인텐트를 구현해주지 않아도, 특정 링크에 대해서는 해당 인텐트가 실행되도록 할 수 있다. 태그의 접두어에 대해 웹 뷰에서 실행되는 인텐트 'http://', 'https://' : 웹 페이지로 이동 'mailto:' : 이메일 페이지로 이동 'tel:' : 전화 Dialer 페이지로 이동 'geo:' : 구글 맵 페이지로 이동 예제 소스코드 397~400 페이지 참조

43 4. 안드로이드 웹 앱 4.3 웹 앱 (Web App) 개발하기 예제를 실행한 결과는 다음과 같다.