1. HTML5의 구조 및 기본 지식 익히기

1. HTML5의 구조 및 기본 지식 익히기

HTML5를 학습하는데 있어 기본적인 내용을 설명하기에 앞서 먼저 HTML5의 특징을 간략하게 요약하면 다음과 같습니다.

첫째, 멀티미디어 기능 지원이 강화되었습니다.
HTML5 이전에는 이미지, 오디오, 비디오 등과 같은 멀티미디어 기능과 벡터 이미지를 웹 페이지에 나타내기 위해서 어도비(Adobe)사의 플래시(Flash)나 마이크로소프트(Microsoft)사의 Silverlight가 필요했었지만 HTML5에서는 canvas, audio, video, svg 요소 등을 이용하여 해당 기능들을 구현할 수 있습니다.
 
둘째, Web Storage 기능이 새롭게 등장하였습니다.
상대적으로 크기가 작은 파일에 사용자의 아이디, 쇼핑 정보 등을 저장할 수 있는 Web Storage API가 새롭게 추가되어 쿠키(Cookie)의 대안으로 사용될 수 있어 보다 큰 용량의 데이터를 클라이언트 단에 저장, 가공할 수 있도록 지원합니다.

세째, 웹서버와 브라우저 사이의 양방향 통신과 멀티 쓰레드를 지원합니다.
기존의 웹 서버와 클라이언트(브라우저) 간의 통신은 단방향 통신이었습니다. 다시 말해서 브라우저를 통해 여러분이 좋아하는 포탈 사이트에 연결 요청하면 서버 측에 연결 요청에 대한 응답을 하는 형태로 클라이언트는 서버가 반응을 보낼 때까지 기다리고 있어야 하고 반대로 웹 서버는 클라이언트로부터 요청을 대기하는 형태였습니다.
“ws://”이나 “wss://”로 시작하는 새로운 프로토콜인 Web Socket을 이용하면 서버와 클라이어트 간의 양방향 통신이 가능합니다.
다음으로 Web Worker API를 이용하면 복잡한 수치 계산이나 이미지 프로세싱 같은 시간이 많이 요하는 작업들을 분리된 스레드(Thread)에서 처리할 수 있도록 지원하여 병렬 처리가 가능하도록 합니다.

네째, 위치기반 서비스 기능을 구현할 수 있도록 지원합니다.
Geolocation API를 이용하여 사용자의 브라우저로부터 위도(latitude)와 경도(longitude)를 현재 사용자의 위치를 파악할 수 있도록 지원합니다. 물론 이러한 정보들은 개인정보와 관련된 민감한 데이터들이지만 사견이지만 개인정보를 침해하지 않는 범위에서 적용하기에 따라 다양한 형태의 비즈니스 모델이 나올 수 있기에 기대되는 기술이라고 생각합니다.

이외에도 HTML5에 JavaScript와 CSS3를 이용하여 기존의 웹 환경과는 다르게 다양한 기능들이 추가되어 표준화가 진행되고 있습니다.

1.1 HTML5, CSS, javaScript의 관계
HTML5 기반 웹 사이트를 구축한다는 것은 적어도 W3C에서 현재 논의 중인 HTML5 자체만을 의미하는 것은 아닙니다. 여기에는 HTML5에서 언급되는 다양한 요소들과 속성들을 이용하여 웹 사이트를 구성하는 웹 페이지(html 파일)들 뿐만 아니라 웹 페이지의 디자인과 관련된 부분을 처리하는 CSS 파일, 그리고 웹 페이지의 동적인 동작을 처리, 즉 이벤트 관련한 처리를 위한 javascript 코드 혹은 파일 등을 포함한다고 볼 수 있으며 간략하게 그림으로 나타내면 다음과 같습니다.

위에서 동적인 CRUD 작업이란 동적으로 새로운 요소(Element)를 생성(Create), 읽기(Read), 수정(UPDATE), 삭제(Delete) 작업을 의미합니다.
이와 같이 집에 비교하면 집의 뼈대를 이루는 것이 HTML5 요소와 속성들이고 집을 멋있게 디자인하는 것이 바로 CSS3라고 볼 수 있습니다. 그래서 집을 시멘트로 부어서 기둥과 천장, 바닥을 지을 것인지 아니면 아름다운 벽돌이나 대리석으로 지을 것인지와 같이 본래의 의미(기둥, 바닥, 벽)은 변하지 않는데 미적인 부분에 변화를 주는 것이 CSS3라고 이해하면 좋을 것 같습니다.  
마지막으로 JavaScript는 여러분이 집 앞에 도착했을 때 스마트폰으로 신호를 보내면 차고문이나 출입문을 열어주는 기능, 회사에서 스마트폰으로 집에 전원을 키우는 동작과 같이 HTML5에 동적인 변화를 주는데 사용됩니다.

- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 HTML5 요소(Element)에 대한 부분을 시작해서 전체 내용을 그대로를 공개하는 것으로 그 처음 시작 부분이며 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다. 개인적인 학습 목적으로 사용을 허용하며 상업적인 용도의 사용은 삼가해주시기 바랍니다.

끝으로 책 한권 분량에 대한 목차(링크 포함)은 "http://fromyou.tistory.com/581"에서 다운로드 받아서 필요하신 학습을 하실 수 있으며 조금이나마 도움이 되셨으면 합니다.