'Web/HTML 5'에 해당되는 글 44건

  1. 2011.05.11 [HTML 5] 3. HTML4 vs HTML5 (2)
  2. 2011.05.09 [HTML 5] 1. HTML 5 의 개요 (2)
  3. 2011.05.08 [HTML 5] HTML 5 is... (2) (2)
  4. 2011.05.04 [HTML 5] HTML 5 is ...

HTML4 vs HTML5

마치 K1 에서 둘이 싸워야할 듯... ^^;


이번엔 두 버전 간의 차이점을 살펴보려 한다.
W3C 친절하게도? 두 버전간의 차이점에 대한 문서를 오픈해 놓았다.
http://www.w3.org/TR/2010/WD-html5-diff-20100304/
인데...
"친절하게도" 라고 쓴 이유는 HTML 4 인 경우 HTML 에 대한 GuideLine  아주 간단히 제공했었다고 한다.

솔직히 이 문서만 봐도 HTML 4 와 HTML 5 의 차이는 바로 알 수 있을듯? ^^;
한번 꼭 살펴보시길 (말도 안되는 나의 영어 실력에... 이 아티클의 오류를 위 문서로 채우시길... ㅡㅡ')

소개할 내용은 위 링크를 통해 살펴보게될 내용을 바탕으로 진행을 하도록 하겠다.

위 문서는 두 버전간의 차이점을 크게 세가지로 구분해 놓았다.

1. Syntax (구문)
2. Language (언어)
3. API

이 세가지는 다시 여러 항목으로 나뉘는 데 그 사항들은 후에 다시 자세히? 다룰 예정이니
이 글에서는 간단히 살펴보고 넘어가려한다.


1. Syntax

먼저 간단한 HTML 5 예제를 보자.

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML 5 예제</title>
  </head>  <body>
    <!-- 아시다시피 여기서부터 Body Contents 가 들어가겠죠? -->
    <p>안녕하시렵니까? HTML 5?</p>
  </body>
</html>

위에서부터 한번 쭈욱 훑어보면 알수 있으리라...

1-1. DOCTYPE

먼저 DOCTYPE 을 볼 수 있다.
너무도? 간결하지 않은가?
HTML 5 문서라면 최상단에(Enter-개행문자 도 들어가면 안된다.) 반드시 넣어줘야한다. ^^
DOCTYPE 은 "HTML" 과 "XHTML" 두가지가 있다.
HTML 5 문서를 작성할 때 HTML 로 작성할지, XHTML 로 작성할지 첫부분에 선언해 준다는 것으로 HTML 문법을 따르도록 할 것인가? 아니면 XML 문법을 따르게 할 것인가 를 결정하는 것이라고 보면 되겠다.
참고로 HTML 5 가 따르는 HTML 문법을 "HTML5", HTML 5 가 따르는 XML문법을 "XHTML5" 라 부른다.

위 문서는 "탁" 보면 "착" 알수 있듯이.
HTML5 문법을 따르도록 작성할 것이라는 것을 알 수 있다.

1-2. Encoding

그 다음 보이는 것이 Charset. 바로 Encoding  에 대한 사항이다.
기존 HTML 문서에서 볼 수 있는
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
와는 다르게
<meta charset="UTF-8">

무척이나 간단해진 것을 알 수 있을 것이다.

1-3.  SVG, MathML
그리고 아래 글상자와 같이 HTML 문서안에 SVG 나 MathML 을 사용할 수 있다.


<!doctype html>
<title>SVG in text/html</title>
<p>
 A green circle:
 <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
</p>
(참고 : http://www.w3.org/TR/2010/WD-html5-diff-20100304/)

흠... 그리고...
Tag 이름은 XHTML Type으로 작성하든 HTML Type 으로 작성하던간에 대소문자를 가리지 않는다는 점...

이 정도면... 될 것 같은데... 또 필요한 사항이 있으면 추후에... ^^; 

2. Language

오호~~ 이제 본격적으로 HTML 4 와 HTML 5 간의 특징들을 살펴보겠다.
새로 만들어진 Element와 Attribute, 변경된 Element 와 Attribute, 없어져 버린 Element 와 Attribute 등으로 나눠서 알아보자.

2-1. 새롭게 추가된 Element
이번에 추가된 Element 에는 특히나 Sementic 요소들이 많이 추가가 되었다.
아래 표는 이번에 추가된 Sementic Element 들이다.
Element
설명
 Header  문서의 Header 를 나타낼 때 사용한다.
 Footer  문서의 Footer 를 나타낼 때 사용한다.
 Nav  문서내에 Navigation 요소가 있을 때 사용한다.
 Section  문서의 영역을 구성하며, 문서 구조를 구성하는 H1~H6 와 함께 사용한다.  
 Article  뉴스기사나 블로그 article 과 같은 독립된 Contents 를 표시할 때 사용한다.
 Aside  주요 컨텐츠 이외의 참고가 될 수 있는 컨텐츠를 구성할때 사용한다.
 Hgroup  각 Section 의 Header 를 나타낼때 사용한다.
 Figure  그림, 비디오와 같은 포함된 컨텐츠의 Caption 을 표시할때 사용한다.
 Figcaption  캡션에 사용한다.

음... 새로운 엘리먼트는 어떻게 사용할까?
간단히 그림을 그려봤다...


이러한 새로운 Sementic Element 들로 인해서 기존의 Div Tag 들로 나뉘어 졌단 막연하고 무의미했던 Contents 들이 한층더 유용한 정보들로 탈바꿈하게 되었다.
또 이런 변화는 우리들에게 Contents 구성에 대한 커다란 숙제를 안겨주고 있다.

이 밖에 몇가지 Element 가 추가되었다.
Element
설명
 Audio, Video HTML 5 Element 중 관심이 집중되는 Element  중 하나다.
멀티미디어 컨텐츠를 표시하는 데 사용한다.
 Embed Plugin 컨텐츠를 표시할 때 사용한다.
 Mark 별도로 표시한 문자를 표시하는데 사용한다.
 Progress 작업 진행상황을 나타낼 때 사용한다.
 Meter 측정값을 표시할 때 사용한다.
 Time 날짜, 시간을 표시할 때 사용한다. 
 Ruby, rt, rp Ruby 언어를 나타낼 때 사용한다.
 Canvas Bitmap Graphic을 표시할 때 사용한다.
 Command 사용자가 호출할 수 있는 명령어를 표시하는데 사용한다.
 details 사용자 요청에 따라 얻은 콘트롤이나 추가적인 정보를 표시하는데 사용한다.
 Datalist List Attribute 와 함께 사용하여 ComboBox 를 만들때 사용한다.
 Keygen 키쌍(Key pair)을 생성할 때 사용한다.
 Output 스크립트 계산 결과 같은 실행결과를 표시하는데 사용한다.


2-2. 새롭게 추가된 Attribute
새로 추가된 속성들 중에 몇가지만 소개하려 한다.
Attribute
설명
contenteditable 편집가능한 Area 임을 나타낸다.
contextmenu 작성자가 제작한 Context Menu 지정하는데 사용할 수 있다.
data-* 접두사 "data-" 를 가진 속성으로 추후 HTML  버전 충돌없이 사용자 태그로 이용하거나 추후 브라우져가 지원하게 되었을때 사용할 수 있다. 
draggable 새로운 Drag & Drop API 에서 사용할 수 있다. 
hidden element 가 아직 없거나 없을 때 사용한다.
role, aria-* 보조기능에 가리키는데 사용할 수 있다.
spellcheck 맞춤범 검사기능을 제공할지 여부를 지정한다.

2-3. 변경된 Element
Element
설명
 a href 속성이 없이 사용하면 "placeholder link" 를 나타낸다.
 address sectioning 의 새로운 개념으로 범위를 나타낸다. 어떤 Contents 부분관 관련된 연락처 정보인지 알 수 있다.
 b 문자열 강조 뿐만이 아니라 제품소개 중 제품명 키워드 같이 특별히 중요하지는 않으나 일반적으로 강조하기 위해 사용한다.
 hr 단락 수준의 주제 바꿈에 사용한다.
 i 기존 기능처럼 문자의 기울임 뿐만이 아니라 음성, 분위기, 분류명, 기술용어, 다른언어의 숙어구, 생각, 선박명 등을 표현할 때 사용한다.
 label 기본 플랫폼 User interface 표준이 아닐 경우  Label 에서 Control로 Focus 를 이동시키면 안된다.
 menu 툴바와 Context Menu 용으로 사용한다.
 small 세부 주석과 법적 인쇄물 같은 작은 인쇄를 나타낼때 사용한다.
 strong 기존 Strong 의 기능보다 더 중요한 것을 표시할때 사용한다. 

2-4 변경된 Attribute
아래 속성은 사용하지 않기를 권장하며 꼭 필요한 곳에서만 사용하도록 한다.
Attribute
설명
img 의 border border 값은 0 일때만 사용하고 CSS 를 사용할 수 있다.
a 의 name name 속성을 id 속성으로 바꾸어 쓸 수있다.
table 의 summary 다른 대안을 정의하고 있다.
script 의 language language 값은 JavaScript 에만 사용하고 type 속성과 함께 쓰지 않고 생략할 수있다.

2-5. 제거된 Element

없어진 이유를 보면 크게 세가지로 나뉜다.

1. CSS 로 처리할 수 있는 Element
2. Frame 관련 Element
3. 거의 사용되지 않는 Element



2-5-1. CSS로 처리할 수 있는 Element
다음 Element 는 순전히 보여지는 것에만 사용되는 Element 들이다.
basefont, big, center, font, s, strike, tt, u

2-5-2. Frame 관련 Element
다음 Element 는 Frame 과 관련된 Element로 이들 Element 의 사용은 사용성과 접근성에 부정적인 영향을 끼치 때문이다.
frame, frameset, noframes

2-5-3. 거의 사용되지 않는 Element
다음 Element 는 자주 사용되지 않고, 혼란스럽게하거나 다른 Element 로 기능을 대체할 수 있기 때문이다.
acronym, applet, isindex, dir


2-6. 제거된 Attribute

나열하기에 많아서 좀 애매하다...
http://www.w3.org/TR/2010/WD-html5-diff-20100304/#absent-attributes
문서에서 3.6 Absent Attributes 를 참고 하시길...


3. API
이젠 새로 사용할 수 있게된 API 들을 설명하려 한다.

Video/Audio API : Video, Audio Element 와 함께 Video, Audio 를 재생하는데 사용수 있다.
Offline Web Application : 말 그대로 Offline 을 지원하는 API 이다.
Web Application 이 특정 프로토콜 또는 Media Type 을 등록할 수 있는 API
새로운 Grobal Attribute 인 "Contenteditable" Attribute 와 함께 사용하는 편집 API
"draggable" Attribute 와 함께 사용하는 Drag & Drop API
 Navigation 시 사용하는 History 정보를 노출하는 API

그리고 그 사항들은 아래와 같은 사항들을 확장하였다..
3-1 HTMLDocumnet 확장사항들
DOM Level2 HTML 의 HTMLDocument interface 를 확장했다.
getElementsByClassName() : Class Name 으로 Element 를 선택할 수 있다.
innerHTML : HTML 또는 XML 문서를 분석하고 직렬화하는 쉬운 방법이다.
activeElement, hasFocus : Element 가 현재 Focus 되어 있는지, "Document" 가 Focus 되어있는지 여부를 확인한다.
getSelection() : 현재 선택되어있는 Object 를 반환한다.

3-2 HTMLElenemt 확장사항들
HTML 5 의 HTMLElement interface 는 몇가지 확장사항들이 있다.
getElementsByClassName()
innerHTML
:
classList 는 ClassName 에 편리하게 접근할 수 있는 접근자다. Element 의 Class 들을 조작하기 위해서 has(), add(), remove(), toggle() 과 같은 함수를 노출한다.
a, area, link Element 는 relList 라는 유사한 Attribute 를 가지고 있으며 rel Attribute에 같은 기능을 제공한다.


훔... HTML 4와 HTML 5 간의 차이점에 대한 어느정도 필요한 정보들을 간단히 나열해 보았다.


4. HTML 5  작성 Tip

4-1. 이전 Browser 에서 새로운 요소들 사용.

HTML 5 에서 사용하는 Tag 들은 이전 버전의 브라우져에서는 지원하지 않는다.
하지만 이전 Browser 에게 약간의 편법을 쓰면 HTML 5 Tag 들을 지원하는 것처럼 하게 할 수 있다.
아래 Javascript 를 추가해보자.
 
<script type="text/javascript">
document.createElement('address');
document.createElement('article');
document.createElement('aside');
document.createElement('figure');
document.createElement('footer');
document.createElement('header');
document.createElement('hgroup');
document.createElement('menu);
document.createElement('nav');
document.createElement('section ');
</script>

그리고 아래 구문을 CSS 에 추가에 추가한다.
이로써 아래 Tag 들에 대해서 Block 요소로 인식하게 해준다.
address, article, aside, figure, footer, header, hgroup, menu, nav, section { display:block;}

4-2. 사용하는 Browser 의 HTML 5 기능 지원여부 확인
현재 사용하는 Browser 에 HTML 5 기능이 적용되어 있는지 알아보기 위해서 다음 페이지를 통해서 확인 하기 바란다.
http://a.deveria.com/caniuse/

현재 브라우져가 특정 기능을 지원하는지 Code 상에서 확인하기위해 필요한 Script 라이브러리가 있다.
그 것은 Modernizr (http://www.modernizr.com) 이다.

아래내용은 간단히 GeoLocation  기능을 지원하는 지를 확인하는 JavaScript 코드이다.
if (Modernizr.geolocation){
  navigator.geolocation.getCurrentPosition(function(position) {
   
// pass the lat and long values to an application
    // e.g. a setUserLatandLong() function may find the closest bodega

    setUserLatandLong(position.coords.latitude,position.coords.longitude);
  }); 

이와 같이 HTML 5 JavaScript API 기능의 지원 여부를 손쉽게 확인할 수 있도록 도와준다.


4-3. 구문 검증

다음은 우리가 작성한 HTML 문서를 검증하기 위한 Site 를 소개한다.
http://validator.w3.org 
http://html5.validator.nu
http://gsnedders.html5.org/outliner/ (이 Site는 Contents Model 에 기반을 두어 작성한 HTML 5문서의 Outline 을 검증합니다. )



음... 두편의 Article 을 통해 이전 버전의 HTML과 HTML 5 와의 차이점과 변경된 사항들을 간단히 살펴보았다.
지금까지 나열된 사항들은 추후 이어질 아티클에서 다시 조금더 자세한? 내용들로 언급이 될 것이다. (훔... 왠지 모르게 서둘러 마무리하는 것 같은 생각이 드네... 추가할 사항들이 생기면 계속 업데이트하겠다. 느낌 희안허네... ㅡㅡ')



행복한 고수되셔요...


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\



'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 4. Sementic Element (1)  (0) 2011.05.29
[HTML 5] 2. HTML4 vs HTML5 (1)  (0) 2011.05.14
[HTML 5] 3. HTML4 vs HTML5 (2)  (0) 2011.05.11
[HTML 5] 1. HTML 5 의 개요  (2) 2011.05.09
[HTML 5] HTML 5 is... (2)  (2) 2011.05.08
[HTML 5] HTML 5 is ...  (0) 2011.05.04
Posted by woojja

댓글을 달아 주세요

HTML 의 역사

HTML 5 을 정리하면서, HTML 역사에 대해서도 살펴보려한다.
아~ 이 생각을 하는 순간, 내가 가지고 있는 HTML 책자가 떠올랐다...

후다닥, 책장에 달려가 보았다. 하하하 있다...

완전 古書 ㅋㅋㅋ 사진에서 찾아보시라...


위 사진은 아직도 나의 집 책꽂이에 꾲혀있는 HTML4 & CSS2.
발행일자를 보니... 헙... 1998년 4월 27일... 세월이 느껴진다...
발행일자가 1998년 이라도 그 당시 여느 책들처럼 CD 부록도 함께 꽂혀있다.



이미지 참고 : http://www.scoroncocolo.com/Html5.html

1991년에 시작해서 현재까지의 HTML.
1991년부터 1997년까지 HTML은 빠르게 발전했다. CSS가 포함이 되었고, JavaScript 가 추가되었다.
HTML 4.0 이후에도 W3C 에 의해서 HTML 은 HTML 4.01, XHTML 1.0, 1.1, 2.0 등으로 진화시키기 위해서 많은 노력을 해왔다(위 이미지를 보면 역사에 대해서는 간단히 아시겠죠? 더 자세한 내용은 웹을 통해서 찾아보시면 더 많은 내용을 얻으시리라...)

그 과정에서 W3C 는 HTML 의 Version Up 을 중단하고 XHTML 로 개발의 방향을 변경하였다. XHTML 2.0 은 하위호환성을 고려하진 않는 새로운 언어로 디자인하기 시작했다.

그런 XHTML 2.0 은  W3C 의 이상과 현실의 차이로 인해서 XHTML 은 브라우저들에게서 외면당해졌고,
W3C 와는 생각이 다른, 몇개의 브라우져회사가 모여 WHATWG 라는 Working Group을 설립하여, 웹 개발현실을 반영하면서도 하위버젼의 HTML 과도 호환되는 발전된 HTML 을 정의하기 시작했다.

WHATWG 를 인정하지 않던 단호한 W3C 도 XHTML 2.0을 포기하고 2009년 10월, WHATWG 를 인정하였으며, 그들과 방향성을 공유하기 시작했다.
그리고, "HTML 5" 라는 이름을 가지고 새로운 HTML 을 디자인하기 시작했다.

HTML 의 한계
HTML, 참... 오랜 기간동안 사용된 언어임에 틀림없다.

그리고 HTML 4 에 대한 그때의 지식으로 오늘날까지도 HTML 을 읽고 있는 것을 보면 변화 없이 멈추어버린 언어라고 생각이 될 수도 있겠지만 HTML 의 버전업이 없다고 웹이 발전하지 않았다는 말은 아닐 것이다.
본래 HTML 이 처음 만들어졌을 때의 목적은 인터넷을 통해 문서를 보기 위함이었다.
자신이 가지고 있는 문서들을 웹을 통해서 볼 수 있도록 문서 형태로 표현할 수 있는  그 수단? Language가 필요했다.

Dos 의 640K 메모리 장벽이 그러했고, Y2K 밀레니엄 버그가 그러했듯이, HTML 또한 그 당시에는 지금의 웹을 상상도 할 수 없었으리라 생각된다.
단순히 인터넷을 통해 문서를 보기 원했던 것을 뛰어 넘어, 화려하고 인터랙티브한 화면 흐름과 멀티미디어, 예측할 수 없는 사용자들의 요구사항들을 충족시키기 위해 우리들은 HTML 에 갖가지 기술들을 만들어 내고, 포함시키고, 또 그러한 기능들을 사용할 수 있도록 하기위해 사용자들에게 "OK" 버튼을 눌러야만 사용할 수 있다는 협박으로 클릭을 강요하고, 언제, 어떻게 일어날지도 모르는 재앙에 따르는 책임을 사용자들에게 전가시켜왔다.

웹은 그렇게 HTML 버전의 발전은 없었지만 HTML 의 한계를 벗어나기위한 방향으로 발전?되어 왔다.
하지만 그렇게 한계를 벗어나기 위한 발전이 반복되면서 한계의 극복은 더욱 불완전한 웹환경으로 몰아가기 시작했다.(너무 장황한거 아녀? ㅡㅡ' 어여 영웅이 나타나야 할 것 같은...)

세상은 이런 불완전함을 깨뜨리고 순수하고 완전한 존재를 원하게 되었다.

그래서 나타난 것.
"HTML 5" 다.


HTML 5 의 등장

그렇게 HTML 은 모든 불완전함을 "순수"라는 이름으로 깨뜨리기 위해 탄생하게 되었다.
HTML 의 역사를 살펴봐서 알수 있듯이 기존의 HTML 은 단순 Markup Language 로서 한계가 명확했으며,
그런 HTML 의 한계는 HTML 5 의 등장으로 기존에 가졌던 HTML 의 기능적 한계를 커버할 수 있다.
발전된 CSS3, JavaScript API 를 통한 기능의 확장과 결합을 통해서 기존의 Markup language 이상의 의미를 가지게 되었다.
HTML 의 한계로 인해서 유행처럼 번졌던 플러그인과 엑티브엑스 컨트롤의 문제들로 인해 웹은 순수한 HTML만으로는 표현이 불가능한, 너무도 많은? 외부기술에 의존하게 되었다.
이로 인해 웹의 접근성은 현저하게 떨어지는 상황이 되었고 HTML 5 의 등장은 플러그인과 엑티브엑스기술에서 웹을 해방?시키고 웹의 접근성과 상호운영성 또한 높이게 하는 결과를 가져오게 될 것이다.
JavaScript API 를 이용한 HTML 의 확장은 서버의 부하를 줄이고 그 부하를 클라이언트와 나눔과 함께 Application으로써의 웹의활용도를 극대화 시킬것이다.

그 결과, HTML 5 는 웹에서 플래쉬, 실버라이트와 같은 플러그인들의 사용을 줄일 것이다.(플러그인의 사용을 아예 없애지는 못할것이라 생각한다. 사용량을 0 - Zero로 만들려 하지도 않을 것이고. 그러한 플러그인은 플러그인이 반드시 필요한 영역에서 활발히 활동할 것이라 생각한다.)
플러그인과 엑티브엑스의 설치로 인한 취약해진 보안도 걱정하지 않아도 될 것이다.
순수한 웹환경은 현재의 Device 는 물론이고 아직 세상에 있지도 않는, 미래에 나오게될 Device 들의 플랫폼이 될 것이다.
마이크로소프트, 구글을 위시한 기업들이 각 사의 브라우져를 Web OS 로서의 기반 플랫폼으로 구성하고 있고, 각 사들의 서비스들을 HTML 5로 제작하여 차세대 Web 환경에서의 주도권을 갖기위해 노력하고 있다. 
현재 HTML 5 의 표준이 확정되지도 않은 상황인데도 말이다...


어떤가?
HTML 5 를 시작해야하는 이유가 이 정도면 충분한가? (저한테 자문하는 거예요... ^^')



HTML 5 의 디자인 원칙


다음은 HTML 5 은 이러한 디자인 원칙을 가지고 만들어지고 있다고 한다.
  • 호환성
  • 컨텐츠의 호환성
  • 이전 브라우저와의 호환성
  • 기능의 재사용
  • 이용 방법의 호환성
  • 혁신보다는 발전을 우선함
  • 실용성
  • 상호 운영성
  • 보편적 접근성
(참고: http://www.jopenbusiness.com/mediawiki/index.php/HTML5#HTML5_.ED.91.9C.EC.A4.80.ED.99.94_.EC.9D.BC.EC.A0.95)


위 내용들을 간략하게 살펴보면 아래와 같다.

컨텐츠의 호환성 : HTML 5 이전 버전으로 제작한 컨텐츠가 완벽히 정상 작동하리라고는 생각하진 않지만 문제없이 이용가능해야한다.
이전 브라우저와의 호환성 : 말 그대로 HTML 5 가 지원되지 않는 이전 버전의 브라우저에서도 이용가능해야 한다.
기능의 재사용 : 이전까지는 각 브라우저 사들이 각자 브라우져에 구현해 놓은 서로다른 기능들을 HTML 5 라는 이름아래 공통된 사양으로 책정하여 브라우저들간의 호환성을 가지게 한다.
이용방법의 호환성 : 기존에 사용하던 HTML Tag 의 사용법을 그대로 사용할 수 있게 한다.
혁신보다는 발전을 우선함 : HTML 5  이라는 Version UP 이 새로운 MarkUP Language 를 구현하는 것이 아닌 기존에 존재하던 HTML 을 개량한다.

실용성 : W3C 가 진행하던 이상적인 MarkUp Language 인 XHTML 2.0 와 같은 HTML 을 제작하는 것이 아닌 웹현장에서 필요로 하는 것들을 중점적으로 진행해야한다.
상호운영성 : HTML 5 를 적용한 브라우저라면 동일하게 동작해야한다.
보편적 접근성 : 컨텐츠의 소비자가 기계(Device, Search Engine) 와 모든 사람들(장애자를 포함한) 이 접근할 수 있도록 한다.

http://html5test.com/index.html


HTML5 표준화 일정


다음은 HTML 5 표준화 일정이다.
  • 2006.06 : 웹 하이퍼텍스트 워킹그룹(WHATWG) 출범
  • Web Form 2.0, Web Applications 1.0
  • 2007.03 : 새로운 HTML 워킹 그룹 생성
  • 2009.10 : W3C에서 XHTML 전환 실패를 인정함
  • 2011.05 : HTML5 최종 초안 (Last Call Working Draft)
  • 2012.Q2 : HTML5 후보 표준안 (Candidate Recommendation) - 2개 이상의 브라우저에서 테스트 완료
  • 2014.Q1 : HTML5 제안 표준안 (Proposed Recommendation) - 브라우저 업체의 피드백 반영
  • 2014.Q2 : HTML5 최종 표준안 (Recommendation)
(참고: http://www.jopenbusiness.com/mediawiki/index.php/HTML5#HTML5_.ED.91.9C.EC.A4.80.ED.99.94_.EC.9D.BC.EC.A0.95)


(기분좋게하는 소식인지는 몰라도... 최종초안 결정이... 이번달이네... ^^
일정은 지연될것이다 라고 말들 하는데... 그래도 기대해 보자... ^^)




아... 참 두서없이 길게도 적었다... (제 글의 특징입니다. ㅡㅡ')
HTML 5 에 참고할 만한 사이트 들은 차츰차츰
이 페이지에 추가하도록 해야겠다.
그래야... 나 자신이 또 들어와 볼테니... ^^;


있을실지 모를 제 글을 보시는 분들...
두서없는 긴글 보시느라 수고하셨습니다.

다음
HTML 4 Vs HTML 5 에서 뵙겠습니다.

행복한 고수되십시요...



woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\





'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 4. Sementic Element (1)  (0) 2011.05.29
[HTML 5] 2. HTML4 vs HTML5 (1)  (0) 2011.05.14
[HTML 5] 3. HTML4 vs HTML5 (2)  (0) 2011.05.11
[HTML 5] 1. HTML 5 의 개요  (2) 2011.05.09
[HTML 5] HTML 5 is... (2)  (2) 2011.05.08
[HTML 5] HTML 5 is ...  (0) 2011.05.04
Posted by woojja

댓글을 달아 주세요

  1. 2012.03.20 14:07

    HTML5 공부중인대 글도 재미있게 쓰시고,
    많은 도움이 되었습니다.
    좋은 강좌 많이 부탁드립니다.
    건강하세요~



HTML 5 에 관해서 이야기를 해보려한다.
요즘 HTML 5 에 대한 관심은 지금까지 IT 에 관련된 어느 사건, 어느 주제에도 견줄 수 없을 정도의 관심이라 생각한다.

넷스케이프의 등장으로 인한 인터넷혁명(나는 학교의 한 실험실, Windows 3.1 에 설치된 PC 에서 Netscape 2.0 을 처음 실행할 때의 상황을 아직도 잊지 못한다. 그 많은 선후배, 친구들을 제치고 마우스 한번 잡아보겠다고... ㅋㅋㅋ 지금 생각하면 너무도 심플한 화면이 뜨는 걸 보고 있는... 신기해 하기만 했던...),
Windows95 가 세상에 나타났을 때 PC 산업의 발전,  
아이폰으로 시작된 스마트폰 혁명. 
(또 다른 사건이 있을까요? 제가 지식이...^^;
.NET 등장과 ie 6 릴리즈 등도 꼽는 분도 계시긴 한 것 같은데... 위 사건보다는 소소하다 생각이 들어서... ^^;)

이러한 사건들을 이어 "HTML 5" 의 등장?은 이제 Web 2.0 을 넘어 다음 세대의 환경에서 없어서는 안될 화두로,  아직 표준이 확정되지 않은 상황에서 시기 상조라는 조심스런 우려속에서도  많은 개발자를 비롯한 웹기획자, 웹디자이너들, 웹컨텐츠 제작자들뿐만아니라 웹소비자 에게도 반드시 필요한 지식으로 웹의 새로운 혁명의 주체가 될 것이라는 의견에는 그 누구도 반문하지 않는다. (학학학... 너무 장황하게 긴 호흡의 글을 쓰자니... 너무 힘들다... ㅡㅡ')

이렇게 많은 이들이 관심을 가지고 있는 주제에 관해 이야기를 한다는 것이 아주 많이, 너무도 많이, 아니아니 완전 부담스럽긴하다.
그리고 많은 이들이 원하는 "HTML 5" 라는 주제가 현재 아직 표준이 확정되지도 않은데다가
"HTML 5 로 무엇을 할 수 있을까?" 라고 생각하고 접근하는 분들을 만족시키기 위한 HTML 5 의 내용은  
HTML 5 자체의 내용뿐만아니라  CSS 3.0, JavaScript 모두를 의미하고 있기때문에 다루어야 할 세부주제를 잡는 것 까지도 그리 만만치 않은 작업이었다.

이번에 잡은 "HTML 5" 의 주제는 많은 분들이 실망을 하실지는 모르지만 
순수한... "HTML 5"  에 대한 내용만으로 채울 생각이다.

먼저, 고심? 끝에 정한 세부 주제를 먼저 살펴보면...

1.    HTML5 개요
2.    HTML4 vs HTML5
3.    Sementic Element
4.    Strong Web Form (1)
5.    Strong Web Form (2)
6.    Rich Text Edit API
7.    Video
8.    Audio
9.    Canvas
10.   Drag & Drop
11.   Offline Web Application
12.   Communication API
13.   Web Storage
14.   Web SQL Database
15.   Web Worker
16.   Web Socket 
17.   GeoLocation API
18.   SVG
19.   File API
20.   HTML5 의 미래



이런 순서로 진행하려고 합니다. 어떨까요? ^^

그럼... 행복한 고수되셔요...


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\



'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 4. Sementic Element (1)  (0) 2011.05.29
[HTML 5] 2. HTML4 vs HTML5 (1)  (0) 2011.05.14
[HTML 5] 3. HTML4 vs HTML5 (2)  (0) 2011.05.11
[HTML 5] 1. HTML 5 의 개요  (2) 2011.05.09
[HTML 5] HTML 5 is... (2)  (2) 2011.05.08
[HTML 5] HTML 5 is ...  (0) 2011.05.04
Posted by woojja
TAG HTML 5

댓글을 달아 주세요

  1. 2011.05.08 17:52

    기대 만땅입니다. ^^



 
"HTML 5 is really the second coming of this Web stuff — of the Web"

 
- Dion Almaer                          
(co-founder of the Ajaxian Web site and co-director of developer tools at Mozilla)

행복한 고수되십시요.


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\



'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 4. Sementic Element (1)  (0) 2011.05.29
[HTML 5] 2. HTML4 vs HTML5 (1)  (0) 2011.05.14
[HTML 5] 3. HTML4 vs HTML5 (2)  (0) 2011.05.11
[HTML 5] 1. HTML 5 의 개요  (2) 2011.05.09
[HTML 5] HTML 5 is... (2)  (2) 2011.05.08
[HTML 5] HTML 5 is ...  (0) 2011.05.04
Posted by woojja

댓글을 달아 주세요

이전버튼 1 2 3 4 5 이전버튼