HTML5 02-2 HTML5 기초 - HTML5 표준문서

HTML5 02-2 HTML5 기초 - HTML5 표준문서

HTML5 표준 문서

1. HTML5 란?

HTML5 표준문서

HTML5의 정의를 알아보겠습니다. HTML5란 단순 웹 문서를 표현하는 HTML의 기본 기능을 넘어 다양한 멀티미디어 콘텐츠와 어플리케이션을 브라우저에 표현하고 실행하기 위해 현재 만들어지고 있는 언어를 말합니다. HTML5는 웹 표준 기구인 W3C에서 만들고 있는 차세대 웹 표준안으로서 마이크로소프트, 모질라, 애플, 구글, 오페라 등 모든 웹 브라우저 제작사가 참여하고 있는 표준산업이라고 할 수 있습니다.

HTML5는 웹 브라우저의 호환성과 구조적이고 의미 있는 Markup 기능, 그리고 편리한 웹 폼 기능을 제공합니다.

HTML이라는 기본 골격에 CSS의 디자인 표현 및 관리적인 요소와 JavaScript의 프로그래밍적 요소가 가미되어 웹 페이지를 개발하는 개발자들이 좀 더 빠르고 편리하게 개발할 수 있는 환경을 지원하여, 기술적 제약이 많았던 HTML과 비교하면 HTML5는 단순한 버전 업그레이드가 아닌

차원을 넘는 혁신적 변화라고 할 수 있겠습니다.

2. HTML5 등장 배경

HTML5가 등장하게 된 배경을 살펴보겠습니다.

HTML5가 등장하게 된 가장 큰 이유는 바로 모바일 인터넷의 확장과 관련이 있다고 할 수 있습니다. HTML5가 등장하기 이전에는 다양한 서비스를 제공하면서, 동시에 많은 기능을 추가할 수 없는 상황이었습니다. 또한 스마트폰마다 웹 브라우저가 다르기 때문에 기존의 HTML로는 한계가 있었습니다. 이를 극복하기 위해 공통적인 표현이 가능한 웹의 기초언어인 HTML의 역할이 점차적으로 커지게 되면서 HTML5가 등장한 것입니다.

HTML5 시대에 도래하기 전까지는 다음과 같이 4 가지 단계로 구분해 볼 수 있습니다.

첫 번째 단계는 웹사이트의 시대 또는 HTML과 WAP 시대로 1989년부터 1999년에 이르기까지 HTML, URL, HTTP라는 세 가지 기술에 기초한 웹 기술이 제안되고, 보다 나은 인간 중심의 정보처리 및 지식 공유 등을 목표로 하여 발전된 시기입니다. 이 시기에는 HTML이 등장하고 HTML3.2가 널리 보급되면서 웹 개발에 엄청난 가속이 붙기 시작하여 이후 좀 더 발전된 HTML기술이 요구됨에 따라 HTML4.0이 출현하기도 하였습니다.

두 번째 단계는 2000년부터 2004년에 걸쳐 나타난 시대로 XML과 웹 서비스의 시대라고 합니다. 이 시기에는 XML에 기반하며, 인간 중심의 정보 처리뿐만 아니라 다양한 디바이스와 서비스, 멀티미디어를 연결하는 것을 목표로 사용자의 요구에 따라 X-HTML이 등장하게 되었는데, 이러한 X-HTML이 등장하면서 웹 사이트의 유지 비용이 감소 하였습니다.

세 번째 단계는 2005년부터 2009년 사이에 나타난 웹 2.0시대입니다. 이 시기에는 구글, 아마존, 위키피디아 등의 성공과 함께 웹 산업을 제2의 전성기로 이끌며 다양한 신규 서비스가 등장할 수 있는 기반을 마련하였습니다.

하지만 엄청나게 기술이 발전하고 스마트폰과 같은 다양한 기기들이 등장함에 따라 기존 XHTML에서 처리하지 못하였던 여러 멀티미디어적인 요소를 해결할 수 있는 HTML5의 시대가 2010년에 비로서 열리게 되었습니다. 이 시기에는 스마트 폰 및 태블릿 등 다양한 모바일 기기들을 대상으로 HTML5와 Web API를 통해 한 단계 진화된 웹 응용 환경을 제공하며, 위치정보 및 소셜 정보 등을 결합하는 통합 응용 플랫폼으로서 웹이 자리를 잡아가고 있습니다. 즉, 웹 앱의 시대와 모바일과 N-Screen 시대로 발전하였다고 볼 수 있습니다.

3. HTML5의 주요 특징

HTML5는 다음과 같은 특징을 가지고 있습니다.

첫째, 임베디드 오디오 및 비디오 지원, 둘째, 미디어 쿼리 지원, 셋째, CSS3 지원, 넷째, 위치정보 제공, 다섯째, 캔버스 기능이 있는데, 먼저 첫 번째 특징인 임베디드 오디오 및 비디오를 지원한다는 점부터 살펴보겠습니다.

HTML5 시대 이전에는 임베디드 오디오 및 비디오 콘텐츠를 지원하기 위해서는 Flash를 사용하였습니다. 하지만 Flash를 지원하지 않는 iOS와 안드로이드 등 모바일 디바이스가 등장하면서 Flash를 대체할 기술이 필요하게 되었는데, 이러한 니즈에 발맞춰 HTML5는 Flash를 대체할 수 있는 Cross-platform을 지원하여 웹 시장의 표준으로 성장하게 되었습니다. Cross-platform의 등장은 여러 종류의 디바이스에서 오디오 및 비디오를 실행할 수 있는 환경을 마련하였다는 점에서 시사하는 바가 크다고 할 수 있습니다.   

그럼 다음 예제를 통해 플래시를 사용하지 않고 비디오를 재생시키는 영상을 확인해보겠습니다.

두 번째 특징으로는 미디어 쿼리 기능입니다.

미디어 쿼리란 웹 페이지가 사용자 화면 해상도에 따라 페이지 내용이 유연하게 바뀌게 하는 기능을 말합니다. 즉 같은 내용을 보더라도 어떠한 디바이스 화면 크기에 따라 보여지는 화면이 달라지게 되는 것이죠. 미디어 쿼리는 스크린 사이즈(뷰포인트), 방향 또는 해상도를 기반으로 페이지에 특정 Style Sheet를 적용하기 위해 사용하는 명세로서 스크린 사이즈, 해상도에 따라 CSS코드를 분기하여 최적화된 UX를 제공합니다.

다음 예제를 살펴볼까요? 다음과 같이 뷰포인트 너비가 768px 이상이고 1024px 이하면 실행하는 코딩과, 너비가 768px 이거나 높이가 1024px 이하면 실행하는 코딩, 그리고 너비가 768px 이상이고 1024px 이하가 아니면 실행하는 코딩을 하게 되면, 각각 다음과 같은 형식의 화면으로 나타나게 됩니다.

세 번째 특징은 CSS3 기능입니다.

CSS3란 기존 HTML문서를 자신이 원하는 형태의 문서로 자유롭게 편집하지 못하는 제약을 보완하기 위해 등장한 기능으로 HTML5를 지원하는 브라우저 또는 CSS3 표준을 준수하여, HTML5와는 직접적인 관계는 없지만, 함께 웹 브라우저에 구현되고 있습니다.

CSS3의 주요 특징으로는 모듈 기반으로 개발되어 있어 구현이 쉽고, 그래픽 효과를 가지는 모듈이 추가되어 있으며, 각종 효과를 제공해주기 때문에 포토샵과 자바 스크립트 및 서버측 기술의 일부를 대체한다고 합니다. 쉽게 말해 HTML이 밑그림이라면, CSS는 색칠을 하는 것이라고 생각하면 이해가 좀 더 쉬울 것입니다.

http://www.westciv.com/tools/3Dtransforms/index.html

네 번째 특징은 위치정보 기능입니다.

HTML5에서는 별도의 IP위치정보 서비스를 이용하지 않고도 위치 정보를 파악할 수 있습니다. 이는 브라우저가 IP 주소 또는 주위의 무선 공유기 정보 등을 파악하여 제공하기 때문입니다. 각종 스마트 기기의 위치 찾기 서비스가 바로 이 기능을 활용한다고 보시면 되겠습니다.

예를 들어 살펴보겠습니다. 이 소스코드는 각종 위치정보에 관련된 함수를 활용하여 작성된 코딩으로, 다음과 같이 위치정보를 실시간으로 확인할 수 있습니다.

마지막 다섯 번째 특징으로 캔버스 기능입니다.

캔버스 기능은 브라우저에서 2D 그래픽을 지원하는 기능으로 SVF와는 다르게 픽셀 단위로 2D 그래픽을 그릴 수 있는 기능을 말합니다.

HTML5 이전에는 일반적으로 제품 구성 도구와 같은 복잡한 온라인 도구를 개발하는데 Flash를 많이 이용했습니다.

하지만 HTML5에서는 Canvas 기능을 이용하여 그래픽, 차트, 2D, 3D 객체 등 어떤 형태의 타입도 그릴 수 있고, 실시간 이미지 프로세싱을 지원합니다. 그럼 다음의 버튼을 클릭하여 캔버스 기능을 활용한 영상을 확인해보세요. HTML5의 비디오 태그와 캔버스 기능의 조합으로 영상 위를 클릭하면

전혀 색다른 효과를 만든다는 점에서 상당히 흥미로운 영상입니다.

http://craftymind.com/factory/html5video/CanvasVideo.html