'2014/01'에 해당되는 글 2건

  1. 2014.01.12 HTML5 강좌 1
  2. 2014.01.10 웹앱 만들기 1

 

 

HTML5에 대해 차근차근 알아보도록 하겠습니다. 이전에 HTML하면 어느정도 알 수 있었는데 HTML5는 바뀌어도 한참 바뀌었네요. 그래봤자 HTML아닌가 하고 스스로 위안하며 강좌를 시작하도록 하겠습니다. 아무쪼록 도움도 드리고 도움도 주시고 하면서 함께 배워가도록 하지요. 그리고 속성이니까 가급적 핵심 위주로 살펴보도록 하겠습니다.

 

HTML < HTML2 < CSS1, JavaScript < HTML4 < CSS2 < XHTML1 < AJAX < HTML5 이렇게 HTML5가 나오기까지 많은 변화가 있었는데 이러한 역사적인 부분도 과감히 생략하고 실습 위주로 하겠습니다.

 

HTML5의 새로운 특성으로는 자바스크립트로 구현했던 기능들이 포함되었다는 것인데요. 카렌더, 스크롤바, 웹사이트목록, 이메일, 색상표 등이 추가되었고 유효성 검증기능도 지원하며 정규식 표현의 사용도 가능합니다. 그리고 다양한 API를 제공하고 있습니다.

 

HTML은 마크업 언어입니다. 마크업은 여러분이 시험 공부할 때 책에 형광펜으로 표시를 하게 되면 다음에 그부분이 다른부분과 뚜렷히 구분히 되는 것과 동일한 개념입니다. 내용을 써놓고 앞뒤에 표시(태그)를 하는 언어라고 생각하면 쉽습니다.

 

실습하기 전에 꼭 알아야 할 사항이 있죠.

 1) HTML은 대소문자를 구분하지 않는다.

 2) 대부분 태그로 시작해서 태그로 끝난다.

 3) 주석은 <!-- --> 이다.

 

 

 

구조가 있으니 이제 이 구조에 맞춰 하나씩 끼워 넣으면 될 것 같습니다.

일단 구조에 대한 설명이 있어야 되겠네요.

 1) header

    - 여러번 사용할 수 있으며 <body>안에서 사용할 수 있습니다.

 2) hgroup

    - 제목과 그와 관련된 부제목을 묶어주는 역할을 하며 header는 페이지를 구성하기 위한 구분단위라면

       이 태그는 페이지 전체 구조에 대한 개념으로 쉽게 눈에 들어오도록 하는 역할을 합니다.

 3) nav

     - 네비게이션 태그로 본문 위치에 영향을 받지 않습니다. <body>안에서 사용할 수 있습니다.

 4) article

     - 웹페이지 상에서의 실제 내용을 의미하며 다른 곳에 배포하거나 재사용할 수 있습니다.

 5) section

     - 웹컨텐츠들을 그룹으로 묶어주는 역할을 하며 재배포할 수 없습니다.

 6) aside

     - 주내용이 아닌 왼쪽이나 오른쪽에 위치하는 부수적인 내용이 들어가는 부분입니다.

 7) footer

     - 웹사이트의 저작권 정보나 저작권표기와 같은 내용이 들어가는 부분입니다.

 

구글링을 하다보니까 급변하는 모바일 환경 속에서 다양한 플랫폼에 통일된 개발환경을 제공하며, 특히 Flash, ActiveX가 설치되지 않아도 기능을 구현 할 수 있어 다양한 브라우저에서 동일한 웹 환경을 제공 할 수 있다는 말이 있네요. 그리고 HTML5는 HTML을 기본으로 CSS와 JavaScript를 포함한다는 말도 있고요. HTML5 는 익스플로러는 버전 9부터 지원한다고 그러네요.

 

 

저작자 표시 비영리 변경 금지
신고

'컴퓨터 활용 > HTML5' 카테고리의 다른 글

HTML5 강좌 1  (0) 2014.01.12
Posted by 천왕지짐

 

관련 파일.zip

 

안드로이드용 웹앱을 만들어 보겠습니다. 물론 Phonegap을 사용합니다.

 

1. Phonegap.com에서 최신버전을 구합니다.

    너무 최신버전인 경우에는 cordova.js와 cordova.jar파일일 있어야 하는데 cordova.jar 파일이 없기도 합니다.

    압축을 풀어 놓습니다.

 

2. 이클립스로 프로젝트를 하나 만들고 아래와 같이 준비를 합니다.

    - libs 폴더 밑에 cordova.jar 파일 복사해 넣기

    - xml폴더를 res 폴더 밑에 복사해 넣기

    - assets/www 폴더를 만들고 cordova.js 파일을 넣고 index.html 파일 만들어 넣기

 

3. index.html은 다음과 같을 수 있음

 

   <!DOCTYPE HTML>
   <html>
     <head>
       <title>Cordova</title>
       <script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
     </head>
     <body>
       <h1>Hello World</h1>
     </body>
   </html>

 

4. AndroidManifest.xml 수정하기

                            :

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="15" />

    <!-- PhoneGap 을 위한 추가 - start -->
    <supports-screens
      android:largeScreens="true"
      android:normalScreens="true"
      android:smallScreens="true"
      android:resizeable="true"
      android:anyDensity="true" />
 
      <uses-permission android:name="android.permission.VIBRATE" />
      <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
      <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
      <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
      <uses-permission android:name="android.permission.READ_PHONE_STATE" />
      <uses-permission android:name="android.permission.INTERNET" />
      <uses-permission android:name="android.permission.RECEIVE_SMS" />
      <uses-permission android:name="android.permission.RECORD_AUDIO" />
      <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
      <uses-permission android:name="android.permission.READ_CONTACTS" />
      <uses-permission android:name="android.permission.WRITE_CONTACTS" />
      <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
      <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 
      <uses-permission android:name="android.permission.GET_ACCOUNTS" />
      <uses-permission android:name="android.permission.BROADCAST_STICKY" />
     <!-- PhoneGap 을 위한 추가 - end -->
 
    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/title_activity_main" 
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale">
            <intent-filter>
                    :

 

5. MainActivity.java 수정

   - 아래 public은 처음에 protected로 되어 있었다.

 

   import org.apache.cordova.*;

 

   public class MainActivity extends DroidGap {

      @Override
      public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          super.loadUrl("file:///android_asset/www/index.html");
      }
   }

 

6. 여기까지만 해도 되겠지만 jQuery Mobile라이브러리 파일을 추가하자.

   - http://jquerymobile.com/download에서 파일(jquery.mobile-1.4.0)을 다운로드 받고 아래 3개의 파일을 /assets/www안에 다음파일들을 복사해 넣자.

      - jquery.mobile-1.4.0.min.css

      - jquery-1.10.1.min.js

      - jquery.mobile-1.4.0.min.js

 

그리고 아래처럼 사용하면 되겠다.

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.0.min.css" />
<script src="jquery-1.10.1.min.js"></script>
<script src="jquery.mobile-1.4.0.min.js"></script>

</head>
<body>

     :

 

 

 

 

 

 

저작자 표시 비영리 변경 금지
신고

'안드로이드 > 안드로이드 강좌' 카테고리의 다른 글

웹앱 만들기 1  (0) 2014.01.10
안드로이드 개발 시작하기  (0) 2013.12.18
이클립스 단축키 (모든 단축키 모음)  (0) 2011.12.07
안드로이드 앱 개발 - 스토리보드  (0) 2011.11.14
Text Align  (0) 2011.10.26
이클립스 사용하기  (0) 2011.10.12
Posted by 천왕지짐