박종명의 아름다운 개발 since 2010.06

CSS 는 Cascading Style Sheets 의 약자로 글자체, 줄간격, 배경색, 위치 지정과 같은 웹 페이지의 전반적인 스타일을 지정하는데 이용되는 문법 규칙이다

엄밀히 말하자면 HTML과 CSS는 그 역할이 서로 다르다고 할 수 있다
그러나 HTML 의 차세대 버전인 HTML5 제안과 함께 CSS3라는 이름으로 새로운 스타일도 개발되고 있다. 즉 HTML5 와 CSS3 둘 다 차세대 웹 개발을 위한 새로운 표준인 것이다
그래서 HTML5를 다루는 많은 자료들에서 이 둘을 같이 설명하는 경우가 많다

어쨋든 CSS3 는 웹 개발자 보다는 웹 퍼블리셔 혹은 코더라고 불리우는 직군에 더 친숙한 언어이다
(뭐.. 이 역할이 명확히 구분되지 않는 경우도 있지만...)

나 역시 개발자라써, 디자인 영역에 더 가까운 스타일을 다루는 데는 익숙하지 않으며 직접적인 영향을 받지 않는 기술이긴 하지만 흥미로운 몇 가지 CSS3 기능을 알아 둬서 나쁠 건 없어 보인다

이 글에서는 CSS3의 새로운 기능 중 일부를 소개하고자 한다

다중 컬럼 레이아웃(Multiple column layout)
CSS3 의 새 스타일 중 제일 처음 눈에 띄는 것이었다
다중 컬럼 레이아웃 스타일을 사용하면 다수의 컬럼(세로단)에 텍스트를 배치 할 수 있어 마치 신문과 같은 레이아웃을 구성할 수 있다

다중 컬럼 레이아웃의 가장 기본적인 적용법은 컬럼 갯수를 정의하는 것이다
컬럼 갯수 정의는 column-count, column-width 두 가지 중 하나의 방식을 이용할 수 있다

column-count : 컬럼의 갯수를 직접적으로 지정한다. 직관적으로 수를 지정할 수 있어 주로 사용된다
                      컬럼의 너비는 컬럼 갯수를 기반으로 (사용 가능한 공간에 따라)자동으로 결정된다
column-width : 각 컬럼의 너비를 지정함으로써 컬럼의 갯수는 자동으로 결정되도록 한다

그리고 컬럼의 레이아웃을 좀 더 세밀하게 조정할 수 있다
column-gap : 컬럼 간 띄워질 공간을 지정한다
column-rule : 컬럼 구분 막대의 Border Style(두께, 색상 등)을 지정한다

브라우저에 따른 구현 규칙
현재 다중 컬럼 레이아웃은 Mozilla 와 WebKit 브라우저에서만 지원된다. 즉 파이어폭스, 크롬, 사파리에서 지원된다. 다중 컬럼 레이아웃을 위한 특성은 각 브라우저의 접두사를 같이 사용해야 하는데 이는 스펙이 완료되기 전에 임시 특성을 이용하는 것이다. 스펙이 완성되면 접두사 없이 특성이름만으로도 적용가능하게 될 것이다

웹킷 브라우저 임시 특성 예: -webkit-column-count
모질라 브라우저 임시 특성 예: -moz-column-count

보통 다중 컬럼 레이아웃을 지정할 때 모질라, 웹킷, 그리고 표준 모두를 다 적용해 두는 것이 좋다
이제 다중 컬럼 레이아웃을 지정한 예를 보도록 하자
뉴스를 div로 감싸고 div에 다중컬럼레이아웃을 적용한다. 웹킷 및 모질라 모두 구현하였으며 향후 표준 완성을 위해 접두어을 뺀 특성도 정의해 두었다. 이렇게 하는 것이 좋은 습관이다

실행 화면(크롬)

다양한 텍스트 효과
웹 페이지의 텍스트에 다양한 효과를 줄 수 있어 기존 이미지로 표현해야 했던 것을 간단한 스타일로 대신할 수 있다

Text-Stroke
웹킷 기반 브라우저에서 텍스트 윤곽에 대한 스타일을 지정할 수 있다
Stroke 의 두께와 색상을 지정할 수 있다

<style>
  div {
    font-size: 50px;  
    -webkit-text-fill-color: black;
    -webkit-text-stroke: 1.5px red;          
  }         
</style>

참고> http://www.quirksmode.org/css/stroke.html

Text-Shadow
텍스트에 그림자 효과를 줄 수 있다. 현재 IE를 제외한 사파리, 크롬, 파이어폭스, 오페라에서 모두 지원 된다. 그림자의 색상, 수평위치, 수직위치, 그림자 선명도를 지정할 수 있다
text-shadow: 색상 수평위치 수직위치 선명도

<style>
  div {
    font-size:30px;
    text-shadow: rgba(64, 64, 64, 0.5) 10px 5px 2px;
  }     
</style>

참고> http://www.quirksmode.org/css/textshadow.html


Text-Overflow
텍스트 랩핑(Wrapping)과 관련되는 스타일이다
영역을 벗어나는 텍스트를 오버플러된 텍스트라 하는데 이렇게 오버플러된 텍스트를 '생략 부호(…)' 로 처리할 수 있도록 한다. 현재 IE 6 이상, 크롬, 사파리에서 지원된다

아래 그림을 보면 텍스트 길이가 div 사각영역을 벗어 나고 있다(텍스트가 오버플러 되었다)
이 그림은 텍스트 랩핑을 하지 않았을 때(white-space: nowrap)의 모습이다

그리고 텍스트 랩핑을 하면 아래와 같다(white-space: wrap)

이렇게 오버플로된 텍스트는 보기 싫기 때문에 보통 overflow: hidden 으로 영역을 넘어가는 텍스트를 숨기도록 처리한다. 이렇게 하면 보기 싫게 벗어난 텍스트를 숨길 수 있다

하지만 가장 적합한 선택은 Text-Overflow 의 생략기호(...)를 사용하는 것이다
text-overflow: ellipsis 로 처리하면 아래 그림과 같이 숨겨진 텍스트는 생략기호(...)으로 대체되어
보기 싫지도 않으며 사용자에게 추가 텍스트가 있다는 의미를 직관적으로 알리 수 있다

<div>
  CSS3 텍스트 효과, 텍스트 오버플러
</div>
.....
<style>
  div {   
    padding: 10px 10px;  
    border: 1px solid #000000;           
    height: 1.1em;    
    overflow: hidden; 
    white-space: nowrap;     
    width:20%;
    text-overflow: ellipsis;   
  }     
</style>

참고> http://www.quirksmode.org/css/textoverflow.html


Opacity
텍스트의 투명도를 조절할 수 있다. IE를 제외한 파이어폭스,크롬,사파리,오페라에서 모두 지원한다
(IE이 경우 filter 로 유사한 효과를 줄 수 있다)
투명도는 0.0 ~ 1.0 사이의 값을 가진다. 0(완전 투명) ~ 1(완전 불투명)

코드에서는 opacity 와 더불어 IE8과 IE5~7을 위한 각각의 필터 특성도 정의 해 두었다

<div>
  CSS3 텍스트 효과, 투명도 조절
</div>
<div id="op">
  CSS3 텍스트 효과, 투명도 조절
</div>
.....
<style>
  div{
    font-size: 30px;
    font-weight: bold;
    color: blue;
  } 
  #op{       
    opacity: 0.2;
    filter: alpha(opacity=20);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  }     
</style>

참고> http://www.quirksmode.org/css/opacity.html


다양한 테두리 및 백그라운드 효과
테두리와 백그라운드에 다양한 스타일을 적용할 수 있다
이전에 이미지로 가능했던 많은 부분이 간단한 스타일 적용으로 가능하게 된 것이다

Border-Radius
테두리의 각을 조절할 수 있다. 테두리의 양 끝의 각을 0 ~ 50 px까지 조절하여 모서리의 각을 조절한다. IE 9 이전 버전을 제외한 파이어폭스, 크롬, 사파리, 오페라에세 지원된다

<style>
  div{
    font-size: 20px;
    padding: 20px 20px;
    text-align: center;
    border: 1px solid #bbb;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
  }      
</style>

참고> http://www.quirksmode.org/css/borderradius.html


Box-Shadow
텍스트 뿐만 아니라 테두리에도 그림자 효과를 줄 수 있다
IE9 이전과 오페라를 제외한 파이어폭스, 사파리, 크롬에서 지원된다
box-shadow: 수평위치 수직위치 선명도 색상

<style>
  div{
    border: 1px solid black;
   padding: 10px;
   -webkit-box-shadow: 10px 10px 5px gray;
   -moz-box-shadow: 10px 10px 5px gray;
  }      
</style>

참고> http://www.quirksmode.org/css/boxshadow.html

Gradient
백그라운드에 그라디에이션 효과를 줄 수 있다. 직선 형태(linear) 효과 또는 방사형 형태(radial) 효과를 줄 수 있다. 파이어폭스, 사파리, 크롬에서 지원된다. IE의 경우 filter 로 유사한 효과를 줄 수 있다

<style>
  div{
    border: 1px solid black;
   padding: 10px;
   background: -webkit-gradient(linear, left bottom, right top, from(orange), to(white));  
   background: -moz-linear-gradient(left,  orange,  white);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='orange', endColorstr='white');
  }      
</style>

참고> http://www.quirksmode.org/css/gradient.html

Border-Image
테두리에도 이미지를 깔 수 있게 되었다. 웹킷 기반인 사파리, 크롬과 파이어폭스(-moz-)에서 지원된다

<style>
  div{     
    width:15em;
    height:2em;
    -webkit-border-image: url(mk.gif) 50 25 50 25 repeat stretch;
    -moz-border-image: url(mk.gif) 50 25 50 25 repeat stretch;  
    border: solid 25px #f00;   
  }      
</style>

참고> http://css-infos.net/property/border-image
         http://www.css3.info/preview/border-image/

Multiple Background Images
다중 이미지 백그라운드가 가능하다. 즉 백그라운드에 둘 이상의 이미지를 깔 수 있다
이미지의 위치를 조절하여 여러개의 백그라운드 이미지를 처리할 수 있다
IE8 이전 버전을 제외하고 모두 지원된다

두개의 이미지를 백그라운드에 깔고 수직 반복처리 및 각 이미지의 위치를 좌상단,우상단으로 하였다

<style>
  div{
    border: 1px solid black;   
    width: 20em;
    height: 30em;  
    background-image: url(son1.jpg), url(son3.bmp);
    background-repeat: repeat-y;
    background-position: top left, top right;     
  }      
</style>

참고> http://www.quirksmode.org/css/background.html#multiple


Background-Size
백그라운드에 깔린 이미지의 사이징을 조절 할 수 있다
div 나 textarea의 크기가 변경될 때 백그라운드가 어떻게 반응해야 하는지를 결정할 수 있다
IE8 이전 버전을 제외한 크롬, 사파리, 파이어폭스(-moz), 오페라에서 지원된다
background-size 의 값으로는 다음 중 하나로 지정할 수 있다

- 기본 값(auto): 원본 이미지 크기 그대로 표시된다, background-size: auto;
- 가로,세로 길이 지정: 지정된 크기로 이미지가 조정 된다, background-size: 250px 20px;
- 퍼센트 지정: 개체의 크기가 변경될 때 같은 비율로 확대/축소 된다, background-size: 50% 70%   
- contain: 개체의 가로,세로 크기에 맞춰 이미지 사이즈가 변경된다
                개체의 가로,세로의 같은 변화에만 반응한다
                (ex: 가로만 늘리면 이미지 크기는 확대 되지 않음)

- cover: contain과 유사히지만 개체의 한 방향(가로 혹은 세로) 크기 변화에도 이미지가 조절된다
          (ex: 가로만 늘리면 이미지의 크기도 같이 확대 된다)

아래의 코드로 브라우저에서 직접 테스트 해 보기 바란다
참고로 div 에 resize를 가능하도록 하여 div의 크기를 사용자가 확대 할 수 있도록 하였다
(resize 는 사파리, 크롬에서만 지원된다

<style>
  div{   
    border: 1px solid black;   
    width: 12em;
    height: 17em;  
    background: url(son1.jpg) center center no-repeat;
    background-size: contain;
    resize: both;
    overflow: auto;    
  }      
</style>

참고> http://www.quirksmode.org/css/background.html#size

Box-Reflect
웹 페이지에 표시되는 개체에 대한 반사 효과를 줄 수 있다. 이 특성은 비단 테두리 및 백그라운드에 국한된 것이 아니라 텍스트, 테이블, 이미지, 비디오 등 웹 페이지에 표현되는 모든 개체가 대상이 된다.
웹킷 기반 브라우저인 사파리, 크롬에서 지원된다

-webkit-box-reflect: direction offset mask-box-image;

<style>
img{
  -webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.0, transparent), to(white)); 
  -webkit-border-radius: 30px;
   #border-radius: 3px;
   #border: 3px solid #777;        
}
</style>

참고> http://css-infos.net/property/-webkit-box-reflect

CSS3의 새로운 스타일을 적용하면 다양한 효과와 스타일을 줄 수 있어 웹 페이지를 보다 쉽고 편하게 스타일링 할 수 있게 되었다. 특히 UI를 개발하는 사람은 더욱 관심있게 봐야할 주제이다
CSS3와 관련된 더 자세하고 추가된 학습은 아래의 사이트를 확인하기 바란다
http://www.quirksmode.org/css/contents.html
http://css-infos.net/
http://www.css3.info/preview/

Modernizr 라이브러리는 HTML5 의 API 뿐만 아니라 CSS3 의 각종 새 기능과 SVG 등 새로운 웹 기술에 대한 전반적인 검사 코드를 포함하고 있다.

자세한 사용법은 다음의 URL을 참고하기 바란다 http://www.modernizr.com/docs/

Modernizr 를 이용하여 몇 가지 테스트 수행 코드를 작성해 보았다
O,X 표현을 위해 div 요소를 정의했는데 이 부분은 생략하고 스크립트 부분만 발췌한다

그리고 구글 크롬에서 실행한 결과 화면은 다음과 같다

HTML5Rock 에서 HTML5 개발 시 참고할 만한 유용한 자료를 공개했다

HTML5 와 CSS3 그리고 향상된 스크립트 등을 활용하여 보다 빠른 웹 어플리케이션을 개발하기 위한 실천적 지침을 제공해 주고 있다
Best Practices for a Faster Web App with HTML5

그리고 ETRI 에 근무하시면서 HTML5 관련 주요 활동을 많이 하시는 이원석님이 이 글을 번역해 주셨다. 매우 고마운 일이 아닐 수 없다 ^^;

아래는 이원석님의 번역본 이다
HTML5를 활용하여 빠른 웹 애플리케이션 개발하기

HTML5, CSS3, 자바스크립트 그리고 브라우저의 개선으로 확실히 웹은 향상되고 있다
이들 새로운 기능들을 활용하면 네트워크 대역폭의 효율적 사용은 물론 속도의 개선, 생산성 증가, 자원의 효율적 사용 등을 꾀할 수 있어 결국에는 웹 어플리케이션의 개발과 사용, 양 측면에서의 효과를 볼 수 있다. 번역된 위 블로그 글을 꼼꼼히 살펴 보기 바란다

아래는 위 글을 압축하여 지침과 결과만을 뽑아 본 것이다

페이지끼리 대화 하다
HTML5 에서는 웹 페이지끼리 메세지를 주고 받을 수 있는 커뮤니케이션 API가 제공된다
크로스 도큐먼트 메세징(Cross Document Messaging)이라는 기술을 이용하면
두 개의 웹 페이지가 서로 메세지를 주고 받을 수 있다.

메세지는 비동기로 송/수신 된다
두 페이지가 데이터를 주고 받는 것은 비동기로 진행된다
메시지 송/수신이 UI 흐름을 방해하지 않기 때문에 가치있는 장점이 되겠다

서로 다른 도메인간의 송/수신도 가능하다
'크로스 도큐먼트 메세징' 이라는 이름에서도 알 수 있듯이 서로 다른 도메인에 존재하는 페이지끼리도
메세징이 가능하다. 기존 웹 환경의 대부분의 기술이 '같은 도메인 정책' 이라는 보안 모델을 적용받는 것과는 상반되는 모델이다.

서로 다른 도메인 메세징이 가능하기 때문에 도메인을 넘나드는 연동 구조에 매우 적합하다.
다만 도메인을 넘나 든다는 것은 보안의 위험도 있다는 말이 되니 신경 쓸 부분이다
즉 허가 되지 않는 도메인으로부터의 메시지 수신이나 송신을 주의해야 한다

브라우저 지원 현황
크로스 도큐먼트 메세징은 그 어떤 HTML5 API 보다 브라우저 지원이 빵빵(?)하다
아래 표를 보면 거의 모든 브라우저가 이를 지원하고 있다. 심지어 IE8 조차도...

데이터 수신하기
데이터를 수신하는 측에서는 단순히 window 객체의 message 이벤트를 구현하면 된다

실행 화면(크롬)
co1 에서 send버턴을 클릭하면 co2 로 메시지를 전송하며 co2는 message이벤트를 수신하여
전달받은 데이터를 표시힌다

실행화면(크롬)
데모를 실행해 보면,
페이지 위에서 마우스를 움직이면 다른 페이지로 마우스 좌표를 전달해 주는 것이다

데모 간단 설명
데모의 소스가 복잡하지 않기 때문에 직접 보면 동작 방식을 이해할 수 있다
간단히 설명하면

컨테이너 역할을 하는 index.html 페이지에서 두개의 iframe (iframe1.html, iframe2.html)을 생성하고
이 두 페이지가 서로 메세지를 송/수신하게 된다

index.html 페이지에서는 우선 브라우저가 크로스 도큐먼트 메세징을 지원하는지 여부를
postMessage 함수의 유효성 여부로 체크하고 있다
if (typeof window.postMessage == 'undefined') { .. //브라우저가 지원하지 않음 .. }

그리고 두개의 iframe를 자신의 페이지에 추가한다
document.body.appendChild(iframe1);
document.body.appendChild(iframe2);

메세지를 주고 받는 두 개의 프레임 페이지에서는 각각,
마우스오버(onmouseover) 이벤트를 구현하여 마우수 X,Y 좌표 데이터를 서로에게 전송한다
window.document.onmousemove = function(e) {
    var x = (window.Event) ? e.pageX : window.event.clientX;
    var y = (window.Event) ? e.pageY : window.event.clientY;
    window.parent.frames[1].postMessage('x = ' + x + ' y = ' + y, '*');      
};

마지막으로 데이터 수신 이벤트인 message 이벤트를 구현하는데, 브라우저 호환성을 고려 해
다음과 같이 코드가 구성되어 있다

var onmessage = function(e) {
      var data = e.data;
      var origin = e.origin;
      document.getElementById('display').innerHTML = data;
    };

if (typeof window.addEventListener != 'undefined') {
    window.addEventListener('message', onmessage, false);
} else if (typeof window.attachEvent != 'undefined') {
    window.attachEvent('onmessage', onmessage);
}

이벤트를 등록하는 두 가지 방법(addEventListener , attachEvent)을 사용했는데,
이는 IE와 파이어폭스 그리고 기타 브라우저를 고려한 호환성을 위한 코드이다
따라서 이 데모를 IE8에서 실행해도 정상적으로 동작하게 된다

이 정도면 데모 동작 방식을 거의 다 이해한 것이다
전체 코드를 실제로 다운 받아서 테스트 해 보기 바란다

참고>
http://developer.apple.com/safari/library/documentation/appleapplications/Conceptual/SafariJSProgTopics/Articles/Cross-documentmessaging.html
http://virtuelvis.com/archives/2005/12/cross-document-messaging
https://developer.mozilla.org/en/DOM/window.postMessage
http://www.whatwg.org/specs/web-apps/current-work/#crossDocumentMessages

[HTML5] Video & Audio 글에서 HTML5의 비디오, 오디오 지원에 대해 알아 보았다
코덱의 비표준화 문제로 각 브라우저마다 지원되는 포맷이 상이한 문제도 다루었었다
자신의 브라우저가 어떤 오디오 포맷을 지원하는지 테스트 해 볼 수 있는 사이트를 소개한다

xguru 님 트위터에 소개된, 브라우저의 오디오 지원 테스트 페이지!http://textopia.org/androidsoundformats.html

이 사이트에서는 각 오디오 포맷별로 HTML5 의 <audio> 태그를 사용하여 정의해 두었다.
위 주소로 접속하면 현재 브라우저가 어떤 포맷을 지원하는지 시각적으로 확인 할 수 있다

현재 나의 데스크탑에 설치된 4대 브라우저를 테스트 해 봤다. 각 브라우저와 버전은 다음과 같다
1) 크롬, 버전 5.0
2) 사파리, 버전 5.0
3) 파이어폭스, 버전 3.6.8
4) 오페라, 버전 10.61

테스드 대상 오디오 포맷은 다음과 같이 총 7개이다
- ogg, mp3, 3gp, m4a, wav, amr, mp4

4대 브라우저에서 테스트를 해 보니 아래와 같은 결과가 나왔다

크롬	사파리
파이어폭스	오페라

그리고 아이폰 3 사파리로 테스트한 결과, 데스크탑 사파리와 동일한 결과가 나왔다

이제 모바일 환경에서도,
네이티브(Native) 어플 뿐만 아니라 웹(Web) 어플을 위한 마켓이 형성되었다

지난 달(7월) 오픈 한 오픈앱마켓(http://www.openappmkt.com/)이다
애플의 앱스토어가 네이티브 앱을 위한 장터라면 오픈앱마켓은 웹 앱을 위한 장터이다
그것도 전세계 고객을 대상으로 말이다

오픈앱마켓은 기존 웹구현의 한계를 뛰어 넘을 수 있는 HTML5 기반 모바일 웹 서비스를 모아 소개한다

대부분의 앱마켓과 유사한 기능을 제공한다
웹 앱들을 카테고리화 시키고 인기도와 유/무료를 구분하며 앱 실행화면과 설명, 리뷰 등을 제공한다
일반 앱스토어처럼 개발자 등록과정이 있으며 수익분배 모델고 가지고 있다
애플 앱스토어가 7:3 인 것에 비해 오픈앱마켓은 8:2 분배를 원칙으로 한다
비자,마스터 카드등 해외결제가 가능한 신용카드가 있어야 유료앱 결제가 가능하다

앱 설치도 네이티브 환경과 최대한 유사하게 보이려 노력했다
다만 웹 앱은 네이티브처럼 아이폰 OS에 설치되는 것이 아니라 웹 사이트 바로가기 형태로
바탕화면에 아이콘이 설치된다. 물론 고객은 네이티브 앱 설치와 유사한 느낌을 받는다

자세한 내용은 BLOTER.net 에 소개된 다음의 글을 참고하자
http://www.bloter.net/archives/36636

모바일 트랜드는 소프트웨어의 유통구조를 확연히 변화시키고 있는 듯 하다
참.. 세상은 흥미롭게 변하고 있다.
이런 세상에 개발자로써의 업적(?)을 하나 정도는 남겨야 하지 않을까?

웹 양식(Web Form)의 개선
웹 양식을 지원하는 태그를 폼 태그(Form Tag)라 한다
보통 회원가입이나 게시판 글쓰기 같은 UI를 만들 때 사용되는 태그로
input 박스, select 박스, button, checkbox , radio 버턴 등이 있다

이러한 폼 태그는 HTML 문서에서 사용자 입력을 위해 제공되는 양식 태그이다
물론 폼 태그는 HTML5 이전에도 제공되어 왔다. 다만, HTML5 에서는 기존 폼 태그와 더불어 대폭 개선된 형태를 새로 추가하였다

기존 폼 태그는 텍스트, 버턴, 선택박스, 체크박스 등 단순한 형태의 입력 양식만을 제공했지만 HTML5에서는 달력양식, Range 양식, email 등 새롭고 실용적인 양식이 추가 되었으며 입력 보조 수단이나 입력 값 검증 등 기존에는 스크립트에 의존할 수 밖에 없었던 기능적 요소도 폼 태그에 추가 되었다
이러한 향상된 웹 폼을 Web Forms 2.0 이라 한다

이러한 다양하고 실용적인 양식 태그들이 추가됨으로써 좀더 쉽고 빠르게 개발을 할 수 있게 된 것이다

브라우저 지원 현황
아직까지 대부분의 브라우저에서는 모든 폼 태그를 지원하지는 않는 것 같다
각 브라우저가 폼 태그의 부분적인 것을 지원하며 그 부분적인 것은 브라우저마다 조금씩 상이하다
예를 들어 range input 요소의 경우 크롬에서는 지원되지만 파이어폭스에서는 지원되지 않는다

일단 caniuse.com 에서 제공하는 지원표를 보도록 하자

다만 오페라는 모두 지원한다고 나와 있는데 확인해 볼 일이다

현재 시점에 브라우저 지원현황은 부분적이며 일관적이지도 않아 만족스럽지 못하기는 하다
(브라우저 호환성을 확보하기 힘드니 실 서비스 적용이 꺼려지는 것이다)
그러나 머지 않은 시기에  모든 요소가 지원되지 않을까 하고 기대 해 본다

Google's WebForms2 라이브러리
http://code.google.com/p/webforms2/

HTML5 의 Canvas를 지원하지 않는 IE8 이전 버전을 위해
ExplorerCanvas(http://code.google.com/p/explorercanvas/) 라이브러리가 제공되듯이
HTML5 확장 폼을 지원하지 않는 브라우저의 경우 WebForm2 라이브러리를 사용할만 하다

라이브러리를 다운받고 아래와 같이 라이브러리를 참조한다

<script type='text/javascript' src='webforms2.js'></script>

WebForms2 라이브러리는 HTML 폼 확장에 대해 각 브라우저마다 다르게 동작하는 문제점을 극복하기 위해 제공되며 Cross Broswer HTML5 Form 구현을 가능하도록 해 준다.
이와 관련한 다음의 글을 참고해 보기 바란다
http://nz.pe.kr/wordpress/programming/html5/번역-지금-바로-cross-browser-html5-form-만드는-방법

웹 양식 다루기
그럼 이제 HTML5 에서 추가되거나 개선된 웹 양식을 하나 씩 살펴보자
참고로 브라우저마다 웹 양식의 지원 범위가 다르기 때문에 각 요소를 설명할 때 지원되는 브라우저를 각각 달리하여 테스트 할 것이다(예제 실행 화면 옆에 브라우저를 명시한다)

새로운 입력 양식(새로 추가된 input 타입)
input 태그에 다양한 타입이 새로 추가되었다.
기존에 제공되었던 text, button,checkbox 등은 여전히 유효하며 다음과 같은 양식이 추가되었다

1) range
일정한 범위의 숫자를 입력 받기 위한 양식이다
min, max 속성에 범위의 최소, 최대값을 지정하고 step 으로 범위 이동 크기를 지정한다
아래 예는 0 ~ 10 까지의 범위를 가지는 2칸식 이동 가능한 Range 컨트롤이다(기본값은 2)

<input type="range" min=0 max=10 step=2 value=2>

참고: 새로운 입력(input) 양식에 대한 다음 글을 참고하기 바란다
http://www.w3schools.com/html5/html5_form_input_types.asp

개선된 폼 양식
새로운 양식의 추가는 물론이고 기존 양식의 기능적 요소들도 상당 부분 개선되었다
 
1) 입력 보조 수단
새로운 양식의 추가 이외에도 자동 포커싱이나 PlaceHolder 와 같은 입력 보조 수단도 제공된다
자동 포커싱은 페이지가 로딩될 때 특정 양식으로 포커스를 주는 것이며 PlaceHolder은 텍스트기반 입력양식이 비어있을 경우 표시하는 텍스트를 지정할 수 있도록 한다
중요한 것은 이전 환경에서 이들 기능을 구현하려면 자바스크립트에 의존했어야 했지만 HTML5는 양식태그의 속성만으로 해결해 준다

- 파일 필터링(accept 속성)
파일 선택 창에서 파일 형식을 제한할 수 있다
기본적으로 모든 파일 형식이지만 MIME 타입을 지정하여 특정 형식으로의 제한이 가능하다

- 파일 정보 액세스(files 속성)
선택된 파일(들)의 정보를 조회하려면 파일박스 DOM 객체의 files 속성을 이용하면 된다
files 속성은 선택된 파일(들)의 정보를 배열형태로 담아 두고 있다. 각 배열의 요서가 특정 한 파일의 정보가 되며 name 및 size 속성등으로 파일 정보를 액세스 할 수 있다

3) submit(폼 전송) 버턴의 개선
input 타입 중 submit , image 는 폼 전송을 수행하는 버턴이다
폼을 전송하기 위해 전송할 곳(action), 전송방식(get or post),enctype 등을 명시해야 하는데
이전 환경에서는 <form> 태그에 이들 속성을 지정하였다
HTML5 에서는 폼 전송 버턴인 submit, image 버턴에도 이들 속성을 지정할 수 있게 되었다

만일 <form> 과 submit 버턴 둘 다 action 이 지정되면 submit 에 지정된 action 값이 우선 적용 된다
(현재 오페라 브라우저에서만 정상 동작함)

 
추가된 폼 양식
input 타입에 새로운 양식이 추가된 것과 더불어 새로운 폼 요소들도 몇 가지 추가되었다

1) Progress 요소
진행 상태를 알려 주는 프로그레스 바를 나타낸다
max, value 를 이용하여 진행량의 최대값과 초기값을 지정할 수 있으며 position 속성을 참조하여 진행률을 계산할 수 있다. 현재 시점에 progress 요소를 지원하는 브라우저는 없다

2) Output 요소
새로 추가된 폼 출력요소이다. Input 요소가 폼 입력을 담당한다면 Output 요소는 폼 출력을 담당한다
보기에는 단순한 텍스트처럼 보이지만 실제로 폼 전송시 Output 요소의 값도 같이 전송된다. 이런 의미에서 눈에 보이는 히든 요소라는 표현도 있다. 읽기전용 폼 전송 요소를 정의한다고 보면 된다

3) DataList 요소
input (입력) 양식에 대한 옵션 리스트를 제공한다
즉 입력 양식에 들어갈 내용을 미리 제공하여 input 박스에 포커스가 오면 이 리스트를 보여준다
input 박스의 list 속성에 datalist id를 지정하여 둘을 매핑 시킨다

폼 유효성 검사(입력값 검증)
HTML5 의 폼은 자체적으로 입력 값 검증을 수행하도록 되어 있다
예를 들어 <input type=email>에 입력된 값이 이메일 패턴과 다를 경우 폼은 전송되지 않고 에러 메시지를 표시해 준다. 그리고 입력 양식에 required 속성을 부여하면 빈 값이 허용되지 않는다
또한 입력 양식에 pattern 속성으로 정규표현식으로 입력 패턴을 지정할 수 있다
지정한 패턴과 다른 형태의 값은 입력이 허용되지 않는다

ex) 우편번호 패턴
<input type="text" name="postCode" pattern="/^\d{3}-?\d{3}$/" title="123-123">

이전 환경에서는 이 모든 것을 스크립트 영역에서 별도로 처래해 줘야 했다

HTML5 가 웹 개발의 새로운 지평을 열어 놓은 것만은 분명한 것 같다

이러한 흐름을 반영이라도 하듯이,
양질의 HTML5 레퍼 사이트가 속속 등장하고 굉장히 좋은 정보를 제공하고 있다.
아래 소개되는 사이트들을 참고하면 HTML5 를 보다 빨리 그리고 정확하게 습득할 수 있다

HTML5 학습 참조 사이트

W3C HTML5
소개: HTML5 표준화 작업을 진행하는 주체인 W3C에서 제공하는 HTML5 스펙 소개
URL: http://www.w3.org/TR/html5/

WHATWG(Web Hypertext Application Technology Working Group) HTML5
소개: HTML5 스펙을 실질적으로 주도하고 있는 워킹그룹에서 제공하는 HMLT5 사양서
URL: http://www.whatwg.org/specs/web-apps/current-work/multipage/

HTML5 ROCKS (구글)
소개: 구글에서 제공하는 HTML5 관련 학습 및 데모 제공 사이트
URL: http://www.html5rocks.com/
       http://playground.html5rocks.com/ (실제 데모 실습을 해 볼 수 있음, so cool~) 


HTML5 Showcase (애플)
소개: 애플에서 제공하는 HTML5 관련 학습 및 데모 제공 사이트
URL: http://www.apple.com/html5/
        http://developer.apple.com/safaridemos/

Mozilla 개발자 센터(MDC) HTML5
소개: 모질라에서 제공하는 HTML5 학습 사이트
URL: https://developer.mozilla.org/en/HTML/HTML5
        https://developer.mozilla.org/ko/HTML/HTML5 (한국어버전)

Opera 개발자 센터(Dev.Opera) HTML5
소개: 오페라에서 제공하는 HTML5 학습 사이트
URL: http://dev.opera.com/articles/tags/open%20web/

w3schools
소개: HTML, CSS, HTML5, JavaScript 와 같은 클라이언트 기술은 물론 asp,php 와 같은
        서버스크립트, 웹서비스, SVG, Flash 등 거의 모든 웹 관련 레퍼런스를 제공하는 사이트
URL: http://www.w3schools.com/

Dive Into HTML5
소개: Oreilly 출판사의 HTML5 Up and Running 라는 책의 근간이 되는 사이트
URL: http://diveintohtml5.org/

<html>5 doctor
소개: 몇몇 개발자들이 모여서 만든 HTML5 학습 사이트
URL: http://html5doctor.com/

html5demoes
소개: FF(Full Frontal) 컨퍼런스 모임에서 제공하는 HTML5 데모 사이트
URL: http://html5demos.com/

Caniuse
소개: HTML5, CSS, SVG 등의 브라우저 호환성 테이블 제공 및 데모사이트로의 연결 제공
URL: http://caniuse.com/

       
 IBM Developer Works 에 실린 HTML5 컬럼
- HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기
http://www.ibm.com/developerworks/kr/library/tutorial/wa-html5/index.html

- HTML5를 사용하여 모바일 장치 웹 애플리케이션 작성하기
https://www.ibm.com/developerworks/kr/library/wa-offlineweb/

- HTML 5로 모바일 웹 애플리케이션 작성하기
https://www.ibm.com/developerworks/kr/library/x-html5mobile1/

- HTML5를 사용하여 웹 애플리케이션 빌드하기
http://www.ibm.com/developerworks/kr/library/wa-html5webapp/


HTML5 로 제작된 사이트 소개

HTML Games
소개: HTML5 로 개발된 온라인 게임을 모아놓은 사이트, 일면 HTML5 게임 포탈
URL: http://html5games.com/

<html>5 gallery
소개: HTML5 로 개발된 사이트를 소개하는 사이트
URL: http://html5gallery.com/

mr.doob
소개: HTML5 , Javascript Deom
URL: http://mrdoob.com/

js do.it
소개: HTML5, Javascript, CSS 공유 사이트(일본)
URL: http://jsdo.it/

Darkroom
소개: HTML5 로 제작된 그래픽 툴
URL: http://mugtug.com/darkroom/

littlecoogie
소개: HTML5 로 제작된 쇼핑몰
URL: http://www.littlecoogie.com/

9elements.com
소개: HTML5 Canvas로 제작, HTML5 관련 데모 링크 제공
URL: http://9elements.com/io/projects/html5/canvas/

마이크로소프트에서 자사의 차기 브라우저인
IE9 Preview 버전의 자바스크립트 실행 성능 결과를 제시했다

크롬이 빠른 것은 개발자들이라면 다들 경험해 보았을테구, 오페라, 파이어폭스, 사파리 역시
대동소이해 보인다. 지금 보니 IE8 은 참 느린 브라우저였구나 싶다

RIA 환경에서 자바스크립트의 중요성은 점점 증가하고 있다
브라우저의 성능 개선은 시간에 따라 제품이 업그레이드 되는 당연한 수순이지만,
특히 스크립트의 활용이 점점 증가해가는 추세에 더욱 의미가 있어 보인다