크롬과, FF3, Opera, Safari에서 HTML5를 지원하고 정말 빠르게 우리에게 다가오고
있다. 넓게 퍼져있는 HTML5에 대한 내용에 대해서 준비하는데 도움을 줄 수 있는
몇가지 제안을 하려고 한다.
1. 다른 사람들이 작업해놓은것을 보아야한다.
- 당신이 준비할 수 있는 첫번째 일은 다른 사람들이 작업해 놓은 HTML5에 관련된
내용을 보는 것이다. HTML 5 gallery(http://html5gallery.com/) 에서
새로운 HTML5 요소를 사용한 몇가지 사이트들을 볼 수 있을 것이다.
2. 지금 바로 시작해라.
이곳(A Preview of HTML 5 - http://www.alistapart.com/articles/previewofhtml5/)이나
이곳(http://html5doctor.com/)들의 글을 읽거나, 사이트들을 볼 수 있다.
혹은 HTML5명세서(http://www.whatwg.org/specs/web-apps/current-work/)도 있다.
하지만 위에 내용보다도 새로운 요소들을 사용해보게 HTML5를 이해하는데 도움이
될 것이다. 현재 보고 있는 사이트의 내용을 수정해보거나, 새로운 페이지를
만들어 보는 경험을 해볼 수도 있다.
내가 경험한 여행에 대한 내용을 만들어 보았다.(http://langintro.com/hamburg5/index.html)
이렇게 직접 작업을 하며녀서 새로운 것을 발견하게 되었다. 예를들어
FF3.5에서는 article, section요소에 대해서 display:inline속성으로 되어 있었다.
그래서 내가 생각했던 대로 이 요소들을 display:block속성으로 변경시켜주었다.
3. X표시에 대한 궁금점
대부분의 디자이너들은 마크업을 작성할때 모든 내용을 손으로 작업하는걸 싫어할
것이다. HTML5를 빠르게 이해하고 싶다라면, 손으로 작성하는 만큼 배우게 될
것이다. 그리고 HTML5, XHTML1.0/1.1 and XHTML5의 사이에서 관계에서 조그마한
혼동을 느낄 것이다. 이제부터 차이점에 대해 해결해 보고자 한다.
HTML4.0(우리가 현재 사용하는)은 SGML이라 불려지는것에 의해 규칙이 기초되어 있다.
SGML규칙은 별도의 closing tag(<img>)를 사용하지 않아도 되고, 속성의 값을 정의 해줄때에는
quotation마크들 없이도 작성 할 수 있다.
하지만 XHTML1.0과 1.1은 XML이라 불려지는 규칙에 의해 기초되어 있다.
XML규칙에 따르면 요소 속성에서 quotation마크들은 반드시 붙어야 하고 closing tag 또한 반드시 필요하다.
HTML5는 위의 두 규칙에 기초되어 정의되지 않았고, HTML form(serilization 또는 스펙을 HTML form이라고 불렀다.)
또는 XHTML form에 의해 기초되었다. HTML form에서 마크업을 작성할때, 몇가지 태그들에서는 closing(and opening)를
사용하지 않고, 속성값에 quote를 가지지 않아도 된다. 또한 몇가지 XML마크업 을 사용할 수 있고, <img />, <hr />를 사용할 수 있다.
XHTML serilization사용할 때, 언급되어진 XML 규칙을 따를 수도 있다.
XHTML5를 작성하거나 HTML5를 사용할때 XHTML로서 사용하면 된다.
또한 XML 표준을 유지하면 마크업시 시간을 절약할 수 있다. 또한 속성값의
quote값을 사용한다면 더 나을 수 있다. 게다가 이러한 결정을 하는데
시간을 낭비하지 않느다면 마크업의 일관성을 유지할 수 있다.
HTML5이 아닌 XHTML5로 마크업한다면 그 문서는 여러곳에서 활용가능한 문서로서
다양한 마크업을 구성할 수 있다.(예:RDFa, MathML , HTML5의 SVG - http://www.w3.org/Style/XSL/).
또한 XML에 기초되어진 XPath, XSLT, XQuery과 같은 툴에서도 사용가능하다.
또한, XHTML5로 작성한다면 MIME type은 Application/xhtml+xml or text/xml로 정의된다.
이러한 MIME type의 정의는 서버관리자와의 조율이 필요할것이다.
4. 정규표현식
HTML5는 Input요소를 확장시켰다. (날짜만 입력가능하게하는 속성과
최소, 최대값(numeric range설정)을 포함하는 속성과 type의 새로운 값을
설정 할 수 있도록 제공한다.(url,email,date,time등)
이러한 속성들이 필요없다면 input type속성에 "text"라고 입력하면 된다.
또한 pattern속성은 정규표현식(ECMAScript-http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf)
또는 자바스크립트로 정의되어진)을 입력할 수 있다.
정규표현식은 간결하고 문자의 패턴을 명확한 방법으로 암호화하여준다.
예를들어 우편번호코드의 match를 원한다면 가능하다.
/^\d{3}-?\d{3}$/
만약 당신의 브라우져가 HTML5의 확장폼기능을 지원하지 않는다면
Google's Web Form2(http://code.google.com/p/webforms2/)를 사용하면 된다.
태그의 사용내역
Enter a date: <input type="date" name="day" required="required" title="Use format yyyy-mm-dd" />
Enter a Postal Code: <input type="text" name="postCode" required="required" pattern="/^\d{3}-?\d{3}$/" title="123-123" />
정규표현식을 잘 알고 있다면 시간을 단축 시킬 수 있다.
많은 텍스트 에디터들이 정규표현식으로 찾고 변경시키는 기능을 제공하고 있다.
5. SVG를 이용한 정적인 디자인
- 정의:XML 그래픽표준으로 XML의개방성 상호운용성 등의 장점을 수용하여 그래픽의 활용범위 확대할 수 있도록
만든 벡터 그래픽 (W3C)
-특징
1) 선,텟스트, 이미지 등 모든 그래픽 요소에 쉽게 접근 가능하여 DB와 연동하여 웹 그래픽 문서를 동적생성하고
2) 그래픽이 많이 사용되고 동적이며 상호운용적 인테페이스가 강조되는 분야에 활발한 기술개발 이뤄짐
예) DOM을 통해 SVG그래픽 요소에 접근하는 지리정보시비스
3) 플래시 형식의 모든 이점을 제공, 일반적으로 사용하는 글꼴 및 트루타입 글꼴(확장자가 ‘ttc’나 ‘ttf’로
윈도우즈에서 사용하는 글꼴), XML, CSS, 동적 HTML 애니메이션과 같은 기능도 지원
4) 텍스트로 기술되는 그래픽이기 때문에 그래픽을 텍스트처럼 검색하고 인덱스 기능을 활용할
- 문제점 : 표준부재( App개발, 배포,호환에 많은 비용 발생)
vector를 이용한 그래픽으로 동그란 도형을 만들기 원한다면 HTML5에 포함되어 있는 내장 SVG(Scalable Vector Graphics) - http://www.w3.org/Graphics/SVG/ 를 문서내에 포함 시킬 수 있다.
SVG를 포함시킨다면 FF, Safari, Opera에서 실행된다.(http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers)
이미 FF3.5에서는 SVG를 사용할 수 있다.
(http://www.alistapart.com/d/get-ready-for-html-5/simple.svg
http://www.alistapart.com/d/get-ready-for-html-5/gatto02.svg)
다음은 SVG를 이용한 간단한 색상의 네모들을 만드는 예제이다.
<svg xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 100"
width="200px" height="100px">
<circle cx="50" cy="50" r="30"
style="stroke:none; fill:#ff0000;"/>
<g transform="translate(100, 20) scale(1.65)">
<polygon points="36 25, 25 36, 11 36, 0 25,
0 11, 11 0, 25 0, 36 11"
style="stroke:none; fill:#0000ff;" />
</g>
<rect x="60" y="20" height="60" width="60"
style="stroke:none; fill:#00ff00;
fill-opacity: 0.5;" />
</svg>
SVG graphic의 동적인 수정은 자바스크립트로 가능하고, HTML5에서는 더 나은 방법을 제공한다.
6. Canvas
canvas요소는 HTML5의 가장 흥분되는 특징중의 하나이다. FF,Safari,Opera,Chrome에서 지원하고
IE에서는 아직 지원하지 않는다. Canvas요소는 앞서가는 특징이다. 자바스크립트로 무엇이든지 그리기를 원한다면
canvas요소가 필요할 것이다.
다음과 같이 자바스크립트 코드를 만들었다.
function drawSimpleCanvas() {
var canvas =
document.getElementById("simpleCanvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.beginPath(); // the circle
ctx.fillStyle = "#ff0000";
ctx.arc(50, 50, 30, 0, 2*Math.PI, true);
ctx.closePath();
ctx.fill();
ctx.save();
// move and resize the octagon
ctx.translate(100, 20);
ctx.scale(1.65, 1.65);
ctx.fillStyle = "#0000ff";
ctx.beginPath();
ctx.moveTo(36, 25); ctx.lineTo(25, 36);
ctx.lineTo(11, 36); ctx.lineTo(0, 25);
ctx.lineTo(0, 11); ctx.lineTo(11, 0);
ctx.lineTo(25, 0); ctx.lineTo(36, 11);
ctx.closePath();
ctx.fill();
// restore graphics as they
// were before move and resize
ctx.restore();
ctx.fillStyle = "#00ff00";
ctx.globalAlpha = 0.5;
ctx.beginPath();
ctx.rect(60, 20, 60, 60);
ctx.closePath();
ctx.fill();
}
}
canvas요소를 사용하려면 자바스크립트를 연동할 수 있어야한다.
Mozilla's Canvas tutorial로 Canvas와 관련된 소개와 예제를 볼 수 있다.
(https://developer.mozilla.org/ko/Canvas_tutorial)
이번 글로벌 웹 기술의 미래 포럼(http://webappscon.com/fwf/2009/program.html)에서도
FF, Opera, Chrome, Safari(이 두곳은 참석을 하지 않았지만)에서는 HTML5에 대한 지원에 대해서
굉장히 역설하셨었고, Mobile 또한 뜨거운 화두가 되어 가는것 같았다.(MS제외 ;;)
HTML5에 대해서 알면 알수록 도움이 되지 않을까?ㅋㅋㅋ
PS : SVG,VML과 Canvas 특징 (http://ppako.tistory.com/4?srchid=BR1http%3A%2F%2Fppako.tistory.com%2F4)
SVG,VML과 Canvas의 성능 비교 (http://enzine.tistory.com/450?srchid=BR1http%3A%2F%2Fenzine.tistory.com%2F450)
원문 - http://www.alistapart.com/articles/get-ready-for-html-5/
Translated with the permission of A List Apart Magazine and the author[s].”
최근 덧글