본문 바로가기

Computer/HTML5

HTML5 란?

HTML5 란?


HTML5HTML의 새로운 버전으로 Client Side Techonology 기술의 중심이 되는 마크업 언어입니다.


가장 특징적인 것은 기존의 웹 문서에서는 HTML만으로 웹 서비스를 구성할 수 없었지만 HTML5로 넘어오면서 클라이언트와 서버와의 통신이 가능하며 이에 대한 부가 기능을 제공함으로써 다른 외부 Active-Xplug-ins를 사용하지 않고도 웹 서비스를 제공할 수 있을 정도로 많은 기능이 추가되었다는 것이다.


HTML5Client Side Technology를 강력하게 지원하는 단순 표현 HTML 이상의 의미를 가지는 웹을 한 차원 발전시키는 기술이다.



Client Side Technology


웹 서비스가 발전함에 따라서 정보의 양이 증가하고, 증가한 정보를 실시간으로 처리해야 합니다. 이를 위해서 제한적인 서버의 과부하를 막고자 클라이언트 쪽에서 처리할 수 있는 것은 클라이언트의 메모리를 사용함으로 인해서 등장한 기술이다.


가장 대표적인 기술에는 자바스크립트, jQuery, Flex, Flash, Silverlight 등이 있는데 이런 기술의 공통점은 서버에서 전송되어 오는 데이터를 서버에서 처리하는 것이 아니라 클라이언트를 이용해서 페이지를 구성할 수 있다는 것이다.


, 서버는 데이터의 제공 역할만 하게 되고 클라이언트는 제공된 데이터를 웹 페이지로 구성하여 유저에게 제공하여 역할의 이분화가 가능하게 된 것이다.




  HTML5 발생 배경


1) 1999HTML 4.01 발표 이후 W3C가 차세대 웹 언어 개발 추진


2) 이후 XMLHTML을 결합한 언어인 XHTML 1.0 발표


3) 이전의 HTML과 호환 문제로 XHTML 2.0 개발 중지


4) 웹브라우저 개발 회사들이 이전의 HTML 4.01을 잇는 새로운 웹 언어를 비공개적으로 개발 진행(오페라, 파이어폭스, 애플)


5) WHATWG(윗웍, Wcb Hypertext Application Technology Working Group)


6) WHATWG에서 W3C에 건의


7) 2008W3CWHATWGHTMLHTML5로 명령(2008년에 장애인 차별금지법이 발표


 HTML5 발전과정


1991년부터 1997년까지 HTML은 빠르게 발전했습니다. CSS가 포함이 되었고, 자바스크립트가 추가되었습니다.



 1991년

 HTML

 1994년

 HTML 2

 1996년

 CSS 1 + JavaScript

 1997년

 HTML 4

 1998년

 CSS 2

 2000년

 XHTML 1

 2002년

 Tableless Web Design

 2005년

 AJAX

 2009년

 HTML 5


HTML 4.0 이후에도 W3C에 의해서 HTMLHTML 4.01, XHTML 1.0, 1.1, 2.0 등으로 발전해 왔다.

 

HTML5의 등장은 그동안의 HTML의 한계를 극복한다는 데에 의미가 있습니다.


CSS3, 자바스크립트 API를 통한 기능의 확장과 결합을 통한 기존의 HTML 이상의 의미가 되었다.


이전에는 Active-Xplug-ins과 같은 외부 기술에 주로 의존해 왔습니다.


Active-Xplug-insHTML에서 걷어내는 일만으로도 웹접근성을 한층 높이는 일이 될 것이다.


자바스크립트 API를 활용한 HTML의 발전은 서버의 부하를 줄이고 웹 어플리케이션으로서의 역할을 담당하게 하는 계기가 될 것입니다. 또한 Active-Xplug-ins를 사용함으로 인한 취약해지는 보안에 대해서도 걱정할 필요가 없을 것이다.



 HTML(Hyper Text Markup Language)


HTML은 웹에서 여러 가지 컨텐츠들을 보여주기 위하여 등장했던 언어다


기본적으로 <html>의 여는 태그와 </html>의 닫는 태그로 포함되는 형식을 취하고 있으며, 그 안의 컨텐츠들도 이러한 여러 가지 태그들로 포함되어 브라우저에서 보여지게 되는 것입니다. 처음에 등장한 것은 기존의 터미널이나 텔넷과 같은 텍스트 기반의 정보 수집에서 벗어나 웹과 브라우저를 통한 정보 수집이 새로운 이슈가 되면서 인터넷 기반으로 텍스트뿐만 아니라, 이미지, 오디오, 멀티미디어를 보여주기 위한 목적으로 1993년 처음 탄생하게 되었다.

 

HTML 1.0에서부터 4.0까지는 단 4년 밖에 안 걸렸으며, 4.0 이후 한 차례 잠수함 패치, 그리고 버전 4.012년 만에 나오게 되었습니다. 그 이후 XHTML도 새로운 표준안으로 나와 한 동안 웹 쪽에 오래 종사했던, 또는 간간히 소식을 들어왔던 사람이라면 '웹표준'이라는 말로 세상을 떠들썩하게 만들었던 적이 기억날 것입니다. 이렇게 HTML의 표준안을 담당하던 곳은 바로 W3C(World Wide Web Consortium)이라는 기관에서 오랫동안 해왔다.



 HTML5 특징


- 웹 애플리케이션 개발을 위한 플랫폼(Web Application) 웹 문서 뿐만 아니라 웹 애플리케이션도 만들 수 있는 있다.


- 시멘틱 웹(Semantic Web)표현을 위한 수단으로서의 태그 사용이 아닌 태그 자체가 의미를 지니고 있다.


- 웹표준(Web Standard)다양한 브라우저에서 정상적으로 보이며, 여러 계층 사람들의 사용이 가능하게 한다.



 HTML5 에서 새로 도입된 기술


- article, footer, header, nav, section과 같이 컨텐츠의 성격을 잘 설명해 주는 새로운 태그들이 추가


- 달력(calendar), 날짜(date), 시간(time), 이메일(email), URL, 검색(search)과 같이 새로운 폼 컨트롤이 추가


- HTML에서 직접 개체를 그릴 수 있는 canvas 태그


- 손쉬운 미디어 재생을 위한 video, audio 태그


- 로컬 컴퓨터상에 데이터를 저장할 수 있는 더 나은 방법 제공 - 로컬 저장소(Local Storage, 쿠키)


 HTML5 주요기능


 Video & Audio

 비디오 및 오디오 기능을 자체적으로 지원

 3D, Graphics & Effects

 다양한 2차원 및 3차원 그래픽 기능을 지원

 Offline & Storage

 네트워크 미지원 환경에서도 웹 이용을 가능하게 함

 Device Access

 카메라, 동작센서 등의 H/W 기능을 웹에서 직접적으로 제어

 Web Socket

 웹 (클라이언트)에서 서버 측과 직접적인 양방향 통신 가능

 Geo-Location

 GPS없이도 단말기의 지리적인 위치 정보를 제공

 Styling Effects

 글씨체, 색상, 배경 등 다양한 스타일 및 이펙트 기능 제공

 Semantics

 웹 자료에 의미를 부여하여 사용자 의도에 맞는 맞춤형 검색 제공


  HTML5 디자인 원칙 : 호환성


- 콘텐츠의 호환성 : HTML5 이전 버전으로 제작한 컨텐츠도 문제없이 이용 가능해야 한다.


- 이전 브라우저와의 호환성 HTML5가 지원되지 않는 이전 버전의 브라우저에서도 이용 가능해야 한다.


- 기능의 재사용 각각의 브라우저에서만 사용 가능한 기능들을 통합하여 공통적으로 사용할 수 있어야 한다.


- 이용 방법의 호환성 : 기존에 사용하던 HTML 태그의 사용법을 그대로 사용할 수 있게 한다.


- 혁신보다는 발전을 우선 HTML5는 새로운 언어를 구현하는 것이 아니므로 이미 사용 중인 HTML을 보다 사용하기 쉽도록

재구성한다.


- HTML5 호환형 테스트 : http://html5test.com


하위 브라우저에서  HTML5 표현


// 웹 상에서 사용


<!--[if IE]>

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

 

// 관련 자바스크립트 파일을 다운로드 한 후 사용


<!--[if IE]><script src="../js/html5.js"></script><![endif]-->


'Computer > HTML5' 카테고리의 다른 글

시맨틱(semantic) 마크업(Markup)  (0) 2014.09.12