모바일웹2011. 5. 10. 20:38

★ html5 모바일웹 ★ HTML 5로 모바일 웹 애플리케이션 작성하기, Part 5: HTML 5에서 새로운 시각적 UI 기능 개발

예제 파일은 DOM을 이용한 것으로 script를 만들때 유용한 견본이 될것이다.


출처 : http://www.ibm.com/developerworks/kr/library/x-html5mobile5/index.html


이 시리즈의 정보

이 시리즈의 다른 기사

HTML 5는 매우 과대 포장된 기술이지만 그럴만한 충분한 이유가 있다. HTML 5는 데스크탑 애플리케이션 기능을 브라우저로 가져오는 기술적인 정점이 될 것이다. 기존의 브라우저에서도 전망이 밝지만 모바일 브라우저에서는 잠재력이 더 크다. 게다가 가장 유명한 모바일 브라우저에 HTML 5 스펙의 여러 중요한 부분이 이미 채택 및 구현되어 있다. 5편의 기사로 구성된 이 시리즈에서는 HTML 5의 일부이며 모바일 웹 애플리케이션 개발에 많은 영향을 미칠 수 있는 여러 새로운 기술에 대해 자세히 살펴본다. 각 부분에서는 iPhone 및 Android 기반 장치에 있는 것과 같은 최신 모바일 웹 브라우저에서 사용할 수 있는 HTML 5 기능을 소개하는 실용적인 모바일 웹 애플리케이션을 개발한다.

위로

선수조건

이 기사에서는 최신 웹 기술을 사용하여 웹 애플리케이션을 개발한다. 이 기사에 있는 코드는 대부분 웹 개발자들이 주로 사용하는 HTML, JavaScript 및 CSS로 구성되어 있다. 필요한 가장 중요한 항목은 테스트를 수행할 브라우저이다. 이 기사의 코드는 언급된 일부 예외를 제외하고는 대부분 최신 데스크탑 브라우저에서 실행된다. 물론 모바일 브라우저에서도 테스트를 수행해야 하므로 최신 iPhone 및 Android SDK도 있어야 한다. 이 기사에서는 iPhone SDK 3.1.3 및 Android SDK 2.1을 사용했다. 링크는 참고자료를 참조한다.

위로

Canvas로 그래픽화하기

자주 사용하는 약어

  • Ajax: Asynchronous JavaScript + XML
  • API: Application Programming Interface
  • CSS: Cascading stylesheet
  • DOM: Document Object Model
  • HTML: Hypertext Markup Language
  • SDK: Software Developer Kit
  • UI: User Interface
  • XML: Extensible Markup Language

수 년 동안 웹 개발자는 Canvas에 불만을 갖고 있었다. 이제 누가 왜 브라우저의 기본 그리기 API에 대해 불평할 것인가? 다른 것은 특정한 종류의 브라우저 플러그인 종류가 필요한 반면에, 결과적으로 이를 통해 그래픽의 인터페이스 종류를 작성할 수 있다.(그리고 모든 모바일 웹 개발자가 아는 바와 같이 플러그인은 때로는 가장 인기 있는 모바일 브라우저에서 사용할 수 없는 경우도 있다.) 웹 개발자가 Canvas에 대해 불평하는 이유는 이 제품이 지금까지 수 년 동안 Firefox와 Safari에서 사용 가능했지만 가장 인기 있는 데스크탑 브라우저인 Microsoft®Internet Explorer®에서는 지원되지 않았다는 점이다. 심지어 Internet Explorer 9의 초기 버전은 Canvas를 지원하지 않는다. 따라서 수 년 동안 Canvas는 궁극적인 기술 자극제였다. 인터넷 전체에서 이 훌륭한 Canvas 샘플을 찾을 수 있지만, Internet Explorer가 이를 지원하지 않기 때문에 대부분의 웹 애플리케이션에 대해 사용할 수는 없다. 다행히도 모바일 웹 개발자에게 Canvas는 이러한 한계가 없다. 대상이 되는 모든 Webkit 기반 브라우저는 Canvas를 구현할 수 있고 그 성능을 강력하게 최적화할 수 있다.

Canvas API는 그리기를 위한 하위 레벨 API이다. 이를 통해 선, 곡선, 다각형 및 원형을 만들고, 그 안을 색상, 경사도 등으로 채울 수 있다. Canvas에서 텍스트를 작성하고 수많은 유형의 기하학적 변형을 수행할 수 있다. 상상하는 것처럼 이러한 API는 무수하게 사용된다. Canvas를 사용하여 그래픽의 보고서를 작성하는 애플리케이션을 한 번 살펴보자. 그림 1에서는 연간 결과의 막대 그래프가 있는 애플리케이션의 화면 캡처를 보여준다.


그림 1. Android 브라우저에서 실행되는 Canvas 기반 보고서 애플리케이션
 

그림 1에서 보는 것은 브라우저에서 정적 이미지가 아니다. 보고서 그래픽은 Canvas API를 사용하여 그때 그때 봐가며 생성된다.Listing 1에서는 이 보고서를 작성하는 HTML을 보여 준다.


Listing 1. 보고서 HTML




    
    
        maximum-scale=1.0; user-scalable=0;"/>
    
    
    <script type="text/javascript"></script>
        function init(){
            var data = [{year : "2007",sales : 49},
                {year : "2008",sales : 131},
                {year : "2009",sales : 294}, 
                {year : "2010",sales : 405}];
            var report = {x : "year",
                    y : "sales",
                    values : data};
            graph(report, 350, 300);
        }

이는 기본 HTML 구조를 보여준다. 문서의 본문에는 하나의 canvas 태그가 있다. init 함수에서 문서의 본문이 로드될 때 호출되면 정적 데이터(보고서 데이터)를 정의하고 graph 함수에 전달한다. 여기에서 보고서를 정적 데이터로 정의하면 Ajax를 사용하여 네트워크를 넘어 동적으로 다운로드되는 것을 상상하기 쉽다. report 함수에 모든 흥미로운 코드들이 포함되어 있으므로 이를 Listing 2에서 살펴보자.


Listing 2. graph 함수

function graph(report, maxWidth, maxHeight){
    var data = report.values;
    var canvas = document.getElementById("graph");
    var axisBuffer = 20;
    canvas.height = maxHeight + 100;
    canvas.width = maxWidth;
    var ctx = canvas.getContext("2d");

    var width = 50;
    var buffer = 20;
    var i = 0;
    var x = buffer + axisBuffer;
    ctx.font = "bold 12px sans-serif";
    ctx.textAlign = "start";
    for (i=0;i
        ctx.fillStyle = "rgba(0, 0, 200, 0.9)";
        ctx.fillRect(x, maxHeight - (data[i][report.y] / 2), 
                 width, (data[i][report.y] / 2));
        ctx.fillStyle = "rgba(0, 0, 0, 0.9)";
        ctx.fillText(data[i][report.x], x + (width / 4), maxHeight + 15);
        x += width + buffer;
    }

    // draw the horizontal axis
    ctx.moveTo(axisBuffer, maxHeight);
    ctx.lineTo(axisBuffer+maxWidth, maxHeight);
    ctx.strokeStyle = "black";
    ctx.stroke();

    // draw the vertical axis
    ctx.moveTo(axisBuffer,0);
    ctx.lineTo(axisBuffer,maxHeight);
    ctx.stroke();

    // draw gridlines
    var lineSpacing = 50;
    var numLines = maxHeight/lineSpacing;
    var y = lineSpacing;
    ctx.font = "10px sans-serif";
    ctx.textBaseline = "middle";
    for (i=0;i
        ctx.strokeStyle = "rgba(0,0,0,0.25)";
        ctx.moveTo(axisBuffer, y);
        ctx.lineTo(axisBuffer + maxWidth,y);
        ctx.stroke();
        ctx.fillStyle = "rgba(0,0,0, 0.75)";
        ctx.fillText(""+(2*(maxHeight -y)), 0, y);
        y += lineSpacing; 
    }
}

이 함수의 첫 번째 섹션에서 canvas의 너비 및 높이와 채우기 변수와 같이 보고서를 작성하는 데 필요한 오브젝트를 설정한다. 또한 canvas 컨텍스트 오브젝트를 작성하는데, 이는 모든 실제 그리기를 하기 위해 사용하는 오브젝트이다. 그 다음에 보고서 데이터를 계속 반복하여 그림 1에서 본 막대 그래프를 그린다. 먼저 fillStyle 특성을 설정한다. 이는 CSS를 사용하기 위해 하는 것과 같이 색상을 설정하는 것처럼 간단할 수 있다. 이 경우에 rgba 기호를 사용하여 색상을 설정하는 것만이 아니라 알파 값도 설정한다. (이는 색상의 투명성이며, 나중에 HTML 5에서 CSS 3.0 기능에서 논의할 때에 다시 볼 것이다.) fillStyle 특성을 설정한 후에 fillRect API를 사용하여 데이터 지점의 막대 그래프를 작성한다. 여기에서 직사각형의 (x,y) 시작 지점 및 그 높이와 너비를 지정한다. 그 다음에는 일부 텍스트를 보고서의 부분으로서 인쇄하려고 하기 때문에 fillStyle을 재정의한다. canvas에서 텍스트를 그리기 위해fillText API를 사용한다. 이 API는 (x,y) 시작 지점과 텍스트를 받는다. 각 데이터 지점에 대해 이를 수행하여, 아래 레이블로 각각의 막대 그래프를 작성한다.

그 다음으로는 그래프의 다른 부분을 그려야 한다.—축과 격자선이다. 먼저 수평과 수직의 축을 그린다. 각각에 대해 moveTo API를 사용하여 선을 그리기 시작하는 지점을 설정한다. 그 다음에 lineTo API를 사용하여 시작 지점으로부터 lineTo 호출이 전달된 종료 지점까지를 그린다. 이는 실제로 선을 그리는 것이 아니라 선을 그리기 위해 stroke API를 호출하는 것이라는 것에 유의하자. 양 축을 그린 후에 공간을 정확하게 반으로 나눈 다음에 moveTo, lineTo 및 stroke의 동일한 조합을 사용하여 선을 그려서 레이블을 따라 격자선을 그린다.

이는 프로그램상으로 보고서 그래픽을 작성하는 데 필요한 모든 코드이다. 이 예제에서 가장 중요하고 가장 일반적으로 사용되는 많은 canvas API를 봤지만 몇 가지의 다른 API(예: 곡선 그리기용)가 있다. 이러한 API로 매우 굉장한 작업을 할 수 있고 시중의 아무 Webkit 기반 브라우저에서 이를 할 수도 있다. 그래픽을 좋아하지 않는 경우에 HTML 5는 여전히 Cascading Style Sheets(CSS) 3.0의 형태로 이목을 끄는 새 요소가 많이 있다.

위로

CSS3의 놀라운 세상

HTML 5에 대해 논하면 즉시 HTML 태그에 대해 생각할 것이다. 물론 HTML 5는 당연히 새 태그를 포함하여, 다음 섹션에서 이 일부를 살펴볼 것이다. 이전 섹션에서는 DOM 내에서 canvas 오브젝트를 작성하기 위해  태그를 사용하는 방법을 확인했다. 하지만 코드의 대다수가 JavaScript이었다. HTML은 HTML 5의 일부이다.—JavaScript와 CSS는 동일하게 중요한 부분이다. HTML 5에서 새 사용자 인터페이스 요소의 많은 수가 CSS 표준인 CSS 3.0의 최신 개정판으로 제공된다. 그림 2에서는 몇 가지 새로운 CSS 3.0 기술을 사용하는 웹 페이지가 Android 기반 전화기와 iPhone에 나타난다.


그림 2. 모바일 장치의 새 CSS 기능
 

그림 2에서는 Android 기반 장치 및 iPhone 둘 다에서 많은 새 CSS 기능을 보여준다. 왼쪽의 이미지는 Android 기반 장치로부터 나온 것이다. 크기가 더 큰 이유는 오른쪽의 이미지에 사용된 iPhone 3GS보다 Motorola Droid의 화면의 해상도가 더 높기 때문이다. 따라서 Droid에서 더 많은 페이지를 보게 된다. 그러나 "The Gettysburg Address" 표제는 iPhone에서 반사가 사라지지만, Droid에서는 사라지지 않고 다음 표제를 모호하게 만들어 버리는 것을 볼 수 있다. 이는 Android 기반 장치와 iPhone이 둘 다 Webkit 기반 브라우저를 갖는다 하더라도 그 사이에 미묘한 차이가 있음을 조심스럽게 알려주므로, 테스트할 때에는 성실하게 진행해야 한다. 이제 이 훌륭한 페이지를 생성한 코드(Listing 3에 있음)를 페이지의 맨 위에서부터 시작하여 살펴보자.


Listing 3. 페이지의 위 절반에 대한 코드




    <script type="text/javascript"></script>
        function $(id){
            return document.getElementById(id);
        }
        function init(){
            var i=0;
            var row = {};
            var cell = {};
            var topics = ["nth-child", "gradients", "alpha", "text effects", 
                          "reflections", "transformations"];
            for (i=0;i
                row = document.createElement("tr");
                cell = document.createElement("td");
                cell.appendChild(document.createTextNode(topics[i]));
                row.appendChild(cell);
                $("dtable").appendChild(row);
            }
        }
    
    
        header > h1{
            color: yellow;
            background: -webkit-gradient(linear, left top, left bottom, 
                             from(blue), to(white))
        }
        tr:nth-child(4n+1) { color: navy; }
        tr:nth-child(4n+2) { color: green; }
        tr:nth-child(4n+3) { color: maroon; }
        tr:nth-child(4n+4) { color: purple; }

        input[type="text"]{
            background: rgba(150, 30, 30, 0.5);
        }

The World of CSS3
What kind of CSS3 does your browser support?



<input id="name" type="text" />

Listing 3에서의 코드는 "Gettysburg Address" 표제 위의 모든 UI를 그린다. 페이지의 아래 절반에 대한 코드를 곧 살펴볼 것이다.

가장 먼저 봐야 할 부분은 페이지의 머리글이다. 목록의 맨 아래 근처에서 HTML 페이지의 본문을 보는 경우에 이 머리글은 말 그대로header 태그에서 볼 수 있다.—이는 HTML 5에서 새로운 HTML 요소 중 하나이다.

이제 style 요소를 살펴보자(Listing 3에서 위의 HTML 본문). 텍스트는 선택기 header > h1로 CSS를 사용하여 스타일화된다. 이 규칙은 노란색 텍스트를 만들지만 파란색과 흰색 배경도 제공한다. 이 배경은 적용되는 경사도가 있다. 이는 -webkit의 접두부가 있는 CSS 기능을 보여주는 첫 번째 예제이다. 예상한 대로 이를 통해 Webkit 기반 브라우저가 이 CSS의 소유가 된다. 그러나 대부분의 경우에 이는 CSS 3.0 표준의 일부이지만 표준이 여전히 약간씩 변하는 영역으로 들어가게 된다. 대부분의 경우에 Webkit 브라우저와 Mozilla Firefox 기반 브라우저는 둘 다 이러한 기능이 구현되어 있다. Mozilla 브라우저(예: Firefox의 모바일 버전인 Fennec은 유럽의 Nokia 스마트폰에서 빠르게 인기를 얻고 있다)도 대상으로 해야 한다면 대개 -webkit 접두부를 -moz로 변경할 수 있다.

다음으로 할 일은 dtable이라는 표를 사용하여 주제의 목록을 표시하는 것이다. 그림 2에서 볼 수 있는 것처럼 이 표의 내용을 표시하는 대로 색상이 선마다 변경된다. 이는 CSS의 다음 섹션인 tr:nth-child 선언을 사용하여 수행한다. 반복되는 모든 요소에서 nth-child 선언을 사용할 수 있다. 조건부로 사용된 공식을 전달하여 요소에 유효한 규칙인지 확인한다. 이 경우에 양식 4n+1의 행 숫자(1, 5, 9 등등)가 남색이고, 양식 4n+2의 행 숫자(2, 6, 10 등등)가 녹색이며 이와 유사하게 자주색과 보라색을 명시한다. 유사한 시각적 처리를 과거에 표, 목록 및 다른 것에 구현해야 했지만 이러한 작업을 대개는 지루한 JavaScript로 했을 가능성이 높다.

마지막 시각적 요소는 What's your name? 레이블로 된 빨간 색상의 텍스트 필드이고 Rotate라고 쓰여 있는 단추이다. 텍스트 필드의 빨간 색상은 유형별 입력 선택기를 사용하여 완성된다. 다시 말해 이는 그 유형이 text인 요소를 입력하기 위해 적용하기만 하는 CSS 규칙이다. 이제 Rotate 단추가 무엇을 하는지 궁금할 것이다. Listing 4에서 rotate라는 함수를 호출하는 코드에서 알아볼 수 있다.


Listing 4. CSS를 사용하는 JavaScript rotation 함수

function rotate(){
    $("formSection").style["-webkit-transform"] = "rotateZ(-5deg)";
    $("formSection").style["-webkit-transition"] = 
          "-webkit-transform 2s ease-in-out";
    $("rtBtn").innerHTML = "Undo";
    $("rtBtn").onclick = function() {
        $("formSection").style["-webkit-transform"] = "";
        $("rtBtn").innerHTML = "Rotate";
        $("rtBtn").setAttribute("onclick", "rotate()");
    }
}

이 rotation 함수는 JavaScript를 사용하여 formSection이라는 div에 적용되는 CSS를 변경한다.(참고: 여기에서는document.getElementById()에 대한 별명으로 $()를 사용 중이다.) div를 회전하려면 -webkit-transform 스타일을rotateZ(-5deg)로 설정하여 시계 반대 방향으로 5도 회전한다. 다음에 -webkit-transform 스타일을 -webkit-transform 2s ease-in-out으로 설정한다. 이를 통해 회전은 2초가 걸리며 천천히 시작하여 가속한 다음에 끝에 다시 느려진다. 그림 3에서 왼쪽에 초기의 회전되지 않은 위치의 What's your name? 필드를 보여준다. 오른쪽에는 부분적으로 회전된 필드의 시각적 효과를 보여주는데, 이는 Undo 단추이다.


그림 3. HTML 요소 회전하기
 

Chrome, Safari 4 및 Opera와 같이 HTML 5를 준수하는 브라우저에서 작동 중인 이 효과를 확인하려면 참고자료에서 링크를 참조한다.

이제 그림 2에서 페이지의 아래 절반으로 이동하자. 여기에서 이미지와 텍스트 효과 뿐만 아니라 레이아웃의 흥미로운 몇 가지 예제를 알아볼 수 있다. 이에 대한 코드는 Listing 5에 있다.


Listing 5. 그림 2의 아래 절반에 대한 코드




    
        h2 {
            -webkit-text-fill-color: blue;
            -webkit-text-stroke-color: yellow;
            -webkit-text-stroke-width: 1.5px;
            background: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), 
to(#000));
            -webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left 
bottom, from(transparent), color-stop(0.5, transparent), to(white));
        }
        h3{
            color: rgba(0,0,255,0.75);
            background: rgba(255,255,0,0.5);
        }
        .xyz{
            text-shadow: #6374AB 4px -4px 2px;
            white-space: nowrap;
            width: 14em; 
            height: 2em; 
            overflow: hidden;
            text-overflow: ellipsis; 
            border: 1px solid #bbb; 
            border-radius: 9px;             
            background-color: #fff;
        }
        .abc {
            border: 1px solid #000;
            border-radius: 9px;        
            -webkit-column-count:4;
            -webkit-column-rule: 1px solid #a00;
            -webkit-column-gap: 0.75em;
        }

The Gettysburg Address

Abraham Lincoln, Gettysburg, PA. November 19, 1863 


    


        Four score and seven years ago our fathers brought forth on this 
        continent a new nation, conceived in liberty, and dedicated to 
            the proposition that all men are created equal.
    
    


        Now we are engaged in a great civil war, testing whether that 
            nation, or any nation, so conceived and so dedicated, can long 
            endure. We are met on a great battle-field of that war. We have 
            come to dedicate a portion of that field, as a final resting 
            place for those who here gave their lives that that nation might 
            live. It is altogether fitting and proper that we should do this.

이 코드를 통해 요소를 하나씩 살펴보자. 먼저 "The Gettysburg Address"의 표제를 작성하고 다양한 방식으로 이를 스타일화한다.

  1. -webkit-text-fill-color, -webkit-text-stroke-color 및 -webkit-text-stroke-width 스타일을 사용하여 파란색 안에 노란색 효과를 작성한다.
  2. 빨간색과 검은색 배경은 -webkit-gradient 배경 스타일을 설정하여 텍스트 뒤로 놓는다. 이는 방사형의 경사도인 반면, 이전에 본 것은 선형 경사도이다. 둘 다 스마트폰에서 동등하게 효과적으로 작업한다.
  3. -webkit-box-reflect 스타일을 설정하여 반사를 표제에 적용한다. 이 스타일은 반사에 적용되는 경사도 효과를 사용하여 5개 픽셀 아래로 표제를 반사하도록 설정된다. 여기에서 경사도 효과는 반사가 사라지는 것처럼 보인다. 그림 2로 다시 돌아가면, Android 브라우저가 하지 않는 반사로 경사도를 적용하는 이 조합을 볼 것이다. 대신에 이는 경사도 없이 반사를 렌더링하기만 한다.

다음 표제로 넘어가서 매우 간단한 스타일링을 이에 적용한다. 단지 텍스트를 위한 색상이 있고 배경을 위해서는 별도의 색상이 있다. 이러한 색상은 둘 다 rgba 함수를 사용하여 빨간색-초록색-파란색 값에 추가로 알파 투명성 값을 지정한다. 1.0의 값은 완전 불투명이고, 0.0의 값은 투명이다.

Listing 5에서 다음은 단락의 첫 번째 문단에 대한 코드이다. 이 텍스트는 주변에 경계가 있고, 새 border-radius 스타일을 사용하여 아우르는 모서리를 완성한다. 이러한 모서리가 사용된 것을 오늘날 웹 전체에서 볼 수 있으며 대개는 이미지를 사용하여 완성된다. 이는 CSS 3.0으로 얼마나 쉽게 수행되는지 비교해보면 완전한 프리미티브처럼 보인다. text-shadow 스타일을 사용하여 문단의 텍스트에 그림자를 적용한다. 마지막으로 문단의 영역이 상위 div의 높이와 너비로 설정되어 제한되고 텍스트가 너무 큰 것을 확인하자. 이전 브라우저에서 보았던 것처럼 텍스트를 잘라내는 것이 아니라 훌륭한 생략 부호(...)가 생겼다. text-overflow 스타일을 설정한 효과이다.

마침내 텍스트의 마지막 섹션에 들어왔다. 이는 주변에 경계도 있지만, 열 구분자가 있는 네 개의 열에서 나타나는 것에 주목한다. 이렇게 하려면 -webkit-column-count 스타일을 설정하고 동반되는 -webkit-column-rule 스타일을 설정하여 구분자를 얻는다. 이러한 새 CSS 3.0 기능이 없이 텍스트를 이와 같은 형식으로 만드는 것이 얼마나 지루한지 상상만 해볼 수 있다. 이는 간단한 머리글과 바닥글을 작성할 때에 유용한 기능이 될 수 있다. 둘 다 HTML 5의 새로운 요소이다. 이를 살펴보고 HTML 5에서 소개하는 다른 새 마크업의 일부를 살펴보자.

위로

새 시맨틱

HTML 5는 HTML 마크업 수프에 새 요소를 많이 추가했다. 이러한 요소 중 일부는 브라우저가 새로운 렌더링 처리를 제공하는 원인이 된다. 다른 일부는 JavaScript를 통해 사용 가능하게 되는 추가 기능을 추가할 것이다. 하지만 다른 일부는 둘 중 아무 것도 하지 않을 것이다. 이들은 동일한 모습이고 ,

및

와 동일한 프로그램의 인터페이스를 가진다. 하지만 이들은 추가 시맨틱 의미를 추가할 것이다. 이러한 새 시맨틱은 페이지의 비시각적 사용자들(화면 판독기와 같은 보조 기술을 사용하는 사람 포함) 뿐만 아니라 검색 엔진 크롤러와 같은 컴퓨터 프로그램에도 중요하다. 또한 이러한 새 태그는 개발자에게 더 표현력이 강한 CSS 선택기를 쓰기 위한 후크를 제공한다.

 그림 4에서 새 시맨틱 요소의 일부를 사용하는 웹 페이지를 보여준다.
그림 4. iPhone에서의 새 HTML 5 요소
 

그림 4의 이 예제는 header 요소 뿐만 아니라 nav 요소, article, section 및 aside가 있다. 이러한 요소는 특별한 렌더링의 원인이 되지 않는다. 이들이 시맨틱 값을 추가하기만 하면 해당 시맨틱 값과 일치하는 시각적 처리를 부여하는 CSS를 쓰기 위해 사용할 수 있다. 그림 4에서 보여주는 페이지의 코드는 Listing 6에 있다.


Listing 6. HTML 5에서 새 시맨틱 요소





    
        maximum-scale=1.0; user-scalable=0;"/>
    
Get the latest markup

Real documents have headers

Even if they don't say so 


        
        
        
            CSS3

            Canvas

            Markup

There are a lot of new markup elements in HTML5 


       Sunday, May 16
       Did you notice that we just had two H1's? 
       But it's cool!
       
            If this page was really popular, I'd put an ad here and make some
            serious cash

이전에 언급한 새 요소를 많이 볼 수 있다. 또한 header 주변을 감싸는 모서리로 상자를 작성하고 nav의 구분자를 작성하기 위해 새 CSS 스타일의 일부를 적용했다는 것에 유의하자. 또한 aside에 텍스트 오버플로우 스타일링을 사용했다. 여기에서의 요점은 추가 작업 없이도 훨씬 더 의미있는 마크업을 작성할 수 있어서 마치

와 을 사용한 것처럼 보이게 만들 수 있다는 것이다. 더 시각적이고 프로그램에 영향을 주는 새 HTML 5 요소의 예제를 보려면
 그림 5를 살펴보자. (그림 5의 텍스트 전용 버전 보기)
그림 5. iPhone에서 HTML 5로 작성된 양식
 

그림 5의 화면은 HTML 5에서 사용 가능한 많은 새 양식 요소를 사용한다. 대부분의 경우에 이들은 기존 요소와 같이 보이지만 브라우저에 이렇게 더 풍부한 양식 요소의 더 나은 시각적 표현을 추가하는 것을 예상할 수 있다. 간단히 보려면 그림 6의 Opera 데스크탑 브라우저의 위를 보자. (그림 6의 텍스트 전용 버전 보기)


그림 6. Opera에서 HTML 5 양식 요소
 

Opera는 HTML 5 기능 구현 면에서 선두 자리를 지켜왔고 이는 특히 새 양식 요소에 적용된다. 이제 Listing 4와 Listing 5에서 제작한 코드를 보면 왜 Opera가 그와 같은 방식으로 렌더링했는지 더 잘 이해할 수 있다. Listing 7에서는 이 코드를 보여 준다.


Listing 7. 코드에서 HTML 5 양식 요소

<form id="settings"></form>



    Settings
    
    <input id="name" name="name" required="" autofocus="" type="text" />

    
    <input id="name" name="name" type="text" />
          placeholder="First and last name" required />

    
    <input id="email" name="email" type="email" />
           placeholder="example@domain.com" required />

    
    <input id="phone" name="phone" type="tel" />
          placeholder="Eg. +447500000000" required />

    
    <input id="dob" name="dob" required="" type="date" />
    


        Preferred Contact Method
        


            


                <input id="emailMeth" name="contactMethod" />
                            type="radio">
                
            
            


                <input id="phoneMeth" name="contactMethod" />
                            type="radio">
                
            
        
    
    
    <input id="climate" name="climate" min="50" type="range" />
          max="100" step="5" value="70"/>

    
    <input id="color" name="color" type="color" />

    
    <input name="refUrl" id="referrer" list="urls" type="url" />
    
        ">">http://www.techcrunch.com/">
        ">">http://www.readwriteweb.com/">
        ">">http://www.engadget.com/">
        ">">http://www.ajaxian.com/">

Listing 7에서 form 요소는 HTML 5의 많은 새로운 기능을 보여준다. 두 가지의 새로운 속성인 required와 autofocus에 유의하자.required 속성은 양식 유효성 검증 동안에 사용되고(더 자세한 내용은 below에 있음) autofocus 속성을 통해 집중되도록 페이지에서 요소를 고를 수 있다. 또한 몇 가지 요소는 placeholder 텍스트가 있음을 유의하자. 이는 많은 웹 사이트가 수 년 동안 보유한 패턴이다.—텍스트 상자 내에 일부 예제 또는 설명 텍스트 넣기—그러나 개발자는 항상 코드를 해킹해야 했다. 그림 4에서 iPhone이 얼마나 깔끔하게 이를 구현했는지 볼 수 있다.

다음에 email, phone, date, range, color, 및 url과 같은 입력 요소에 허용된 새로운 유형의 일부를 보게 된다. 이는 모두 오늘날 iPhone과 Android 브라우저에서 텍스트 필드로 렌더링되지만, 시맨틱적으로 정확도가 덜한 HTML 4.0을 사용하여 작성된 것처럼 보일 것이다. 그림 5에서 앞으로 예상되는 모습을 볼 수 있다. date 입력은 새 UI(팝업 달력)를 Opera에서 자랑하기 전에 주목을 끌어야 한다. 이는 또한 그림 7에서의 url 입력에 해당되지만 url 입력이 원인은 아니다. 그 원인은 list 속성을 가지는 것이다. 이는 해당 필드에 허용되는 값이 들어 있는 datalist 요소를 가리킨다. 필드에 주목할 때에는 유명한 Ajax 스타일 자동 추천 필드와 유사한 datalist로부터 가능한 값(이 경우에 몇 가지의 URL)을 보게 된다. 그림 7에서 날짜와 데이터 목록 기능을 둘 다 볼 수 있다.


그림 7. 날짜와 데이터 목록이 있는 HTML 5 입력
 

Webkit이 빠르게 계속 진화할수록 많은 입력 유형이 더 유용한 시각적 표현에 허용될 것이라고 예상할 수 있다. Opera는 미래에 대한 훌륭한 시각을 제시해준다. 이러한 많은 입력 필드는 유효성 검증도 제공하며, HTML 5는 새 유효성 검증 API의 전체적인 세트를 가지고 있다. 이러한 기능은 iPhone이나 Android 기반 장치에서는 아직 작동하지 않지만 상응하는 데스크탑에서는 작동한다. 따라서 이를 모바일 브라우저에서 조만간 구입하는 것을 예상할 수 있다. Listing 8에서 새 유효성 검증 API를 사용하여 살펴보자.


Listing 8. 작동 중인 HTML 5 유효성 검증 API

function checkInputs(){
    var inputs = document.getElementById("inputs").childNodes;
    var len = inputs.length;
    var i = 0;
    var input = null;
    var errors = [];
    for (i=0;i
        input = inputs.item(i);
        if (input.nodeName == "INPUT"){
            if (input.validity){
                if (!input.checkValidity()){
                    errors.push(input.validationMessage);
                }
            }
        }
    }
    var errMsg = "There are " + errors.length + " errors";
    var notify = function(){
        var notification = 
            webkitNotifications.createNotification(null, "Errors!", errMsg);
        notification.show();
    };
    if (window.webkitNotifications){
        if (webkitNotifications.checkPermission()){
            webkitNotifications.requestPermission(notify);
        } else {
            notify();
        }
    } else {
        alert(errMsg);
    }
}

각 입력 요소는 validity 특성을 가진다. 이를 사용하거나 true나 false를 리턴하는 checkValidity() 함수 또는 현지화된 오류 메시지를 받는 validationMessage 특성을 사용할 수도 있다. 이 기사를 쓸 때에 가장 최신의 데스크탑 브라우저는 일관성있는 어떤 것이나 validationMessage의 표준을 리턴하지 않았기 때문에 제한적으로만 사용된다. 유효성 오브젝트는 valueMissing,rangeOverflow, rangeUnderflow, patternMismatch 및 tooLong과 같이 다른 유형의 오류를 확인하는 데 사용될 수 있다. 예를 들어 요소에 필수 속성이 있지만 사용자가 공백으로 남겨 두면 validity.valueMissing이 true일 것이다.

마침내 모든 유효성 검증 오류를 파악한 후에 Listing 8에 주목한 다음에 webkitNotifications를 사용하도록 시도한다. 이는 데스크탑 컴퓨터에서 시스템 알림과도 같고 Chrome의 최신 버전에서 사용 가능하다. 따라서 한 번 더 iPhone과 Android 브라우저에 곧 채택될 것이라고 기대할 수 있다. API를 사용하는 것은 간단하다. 유일하게 어려운 부분은 사용자가 이 API를 사용하도록 사이트 권한을 부여할 것인지의 여부를 확인해야 한다는 것이다. 그렇지 않으면 사용자가 권한을 부여하면 호출이 되도록 하는 함수에 전달하는 권한을 요청해야 한다.

위로

요약

이 시리즈의 다른 기사

이 기사에서는 HTML 5의 많은 새 UI 관련 기능을 canvas로 그림을 그리기 위한 새 요소에서부터 새 스타일에 이르기까지 정신없이 진행하면서 둘러보았다. 이러한 기능은(마지막에 몇 가지의 주목할 만한 예외를 제외하고) iPhone과 Android 기반 장치에서 찾아볼 수 있는 Webkit 기반 브라우저에서 사용하도록 모두 사용 가능하다. Blackberry와 Nokia 스마트폰과 같이 다른 인기있는 플랫폼도 이 기사에서 살펴본 것과 동일한 기술을 활용하는 더 강력한 브라우저를 채택하고 있다. 모바일 웹 개발자로서 데스크탑 브라우저에서 HTML, CSS 및 JavaScript로 액세스 권한을 보유했던 그 어느 것보다 더 강력한 시각적 기능을 통해 광범위한 사용자를 대상으로 하는 기회를 갖게 된다. 이 시리즈의 이전 네 가지의 Part에서 이 훌륭한 새 모바일 브라우저에서 사용 가능한 다른 많은 새 기술에(geolocation 및 Web Workers) 대해 배웠다. 모바일 웹은 수 년 동안 프로그래밍한 웹의 약한 버전이 아니다. 이는 가능성으로 가득 찬 더 강력한 버전이다.


위로

다운로드 하십시오

설명 이름 크기 다운로드 방식
Article source code ui.zip 5KB HTTP

다운로드 방식에 대한 정보


참고자료

교육

제품 및 기술 얻기

토론

필자소개

Michael Galpin은 1998년부터 소프트웨어 개발에 종사해왔다. 그는 캘리포니아 공과대학교에서 수학을 전공했으며 현재 캘리포니아 주 산 호세 시에 있는 eBay 사에서 엔지니어로 일한다.


'모바일웹' 카테고리의 다른 글

★ html5 모바일웹 ★ 모바일OK 시범사업이 모바일 웹 세상을 이끈다.HTML5 모바일 웹 2.0시대  (0) 2011.05.10
★ html5 모바일웹 ★ [HTML5] HTML 5로 모바일 웹 애플리케이션 작성하기  (0) 2011.05.10
★ html5 모바일웹 ★ 모바일웹-HTML5 하이브리드 앱, 뜬다  (0) 2011.05.10
★ html5 모바일웹 ★ 다가오는 HTML5의 첫번째 무대, 모바일 웹  (0) 2011.05.10
★ html5 모바일웹 ★ HTML5 및 모바일 웹 개발 교육  (0) 2011.05.10
Posted by 아이맥스

티스토리툴바