HTML5 연재를 시작하며

HTML 5는 차세대 웹 표준 기술 입니다. 지금까지 인터넷에서 볼 수 있었던 ... 와 같은 태그들이 모두 다 HTML 4.01 버전의 기술이라면, HTML 5는 여기에 더해 새로운 태그와 새로운 기술을 포함한 '다음 버전의 HTML' 이라고 보시면 됩니다.

이러한 새 HTML 기술인 HTML 5는 어느새 우리 생활속으로 깊이 들어오고 있습니다. 웹브라우저에 따라 지원되지 않는 기능이 일부 있음에도 불구하고 곳곳에서 활발히 사용되고 있습니다. 기존 웹사이트에 HTML 5가 적용되는가 하면, 상당수의 모바일 웹페이지가 HTML 5를 사용해 제작되고 있습니다. 또한, 대부분의 하이브리드 앱과 웹 앱이 HTML 5 기술을 사용해 개발되고 있습니다.

이미 일상 생활속에서 차지하는 비중이 그리 작지는 않은 셈입니다. 뿐만 아니라 MS사에서 선정한 2012년을 이끌 8대 IT 기술에 HTML 5가 선정되기도 했습니다. 높아진 HTML 5의 위상을 엿볼 수 있는 부분이기도 합니다.

그래서 이러한 HTML5를 좀 더 잘 이해할 수 있도록 이해의 기반이자 기초가 될 내용들을 한데 모아 HTML 5 연재를 시작해 보려 합니다.

Video, Audio 태그에서 시작해서 Canvas 객체, Geolocation, Web Storage에 이르기까지 핵심적이고 기초적인 내용들을 다뤄보고자 합니다. 물론, 예제 코드와 함께 말이지요. 최대한 빨리 기술적인 내용을 이해하고 익힐 수 있도록 각 파트별로 핵심 내용을 추려내 간략하게 정리해 보겠습니다. 한 번 보는것 만으로도 어떻게 태그를 구성하고 코드를 짜야될지 바로 감이 오실겁니다.

대략 앞으로 다루게될 내용은 아래와 같습니다.

HTML5

• 새로운 요소에는 어떤것들이 있는지 살펴 봅니다. (헤더, 푸터, 메뉴, 섹션, 아티클 등)
  
• 새롭게 추가된 속성들을 살펴 봅니다.
• Video, Audio 태그를 통해 HTML5에서 얼마나 손쉽게 비디오와 오디오를 표시할 수 있는지 살펴 봅니다.
• 2D 그래픽 구성에 대해 알아봅니다.
• 예제 코드와 함께 새롭게 추가된 Web Storage가 어떤것인지 다뤄 봅니다.
  

HTML5 멀티미디어

▲ <video> 태그를 통해 삽입된 실제 영상. 출처: 크리에티브 커먼즈 애니메이션 영화, Big Buck Bunny

HTML5를 통해 손쉽게 영상과 사운드를 포함하고 조정할 수 있습니다. 크게 다음의 두 가지에 대해 살펴 봅니다. HTML5 <video> 태그 HTML5 <audio> 태그

HTML5 Forms

• 새로운 폼 요소와 속성에는 어떤것들이 있는지 살펴 봅니다.
• 새로운 input 타입, 자동 유효성 검증(Automatic Validation)에는 어떤것들이 있는지 알아 봅니다.

위와 같은 순서로 연재해 보려 합니다.
HTML5에 대해 기본적이며 핵심적인 내용들을 새로운 요소, 태그, 속성, 예제 코드와 함께 살펴보고 싶으실 경우 이번 연재가 좀 더 가깝게 느껴지실 겁니다.

그럼 이후 내용은 차후 연재될 글에서 이어서 적어 보도록 하겠습니다. ^^