HTML5 란 ?

HTML5 ?

 지금까지도 웹개발자, 웹 퍼블리셔들은 브라우저에 따라서(같은 브라우저라고 할지라도 버전에따라) 화면에 다르게 출력되어 다른 코드를 작성하기도하고 문제점이 많다. 초기 HTML이 개발되었을때 마구잡이로 브라우저들이 나왔고 웹 페이지에 플러그인 기능이 들어가게 되면서(지긋지긋한 Active-X..) 표준화 되지않은 기술들이 브라우저에 혼재되어 html의 호환성이 더더욱 무너져버렸다. 스마트폰과 태블릿 기기들은 플러긴 같은 비표준기술을 수용할 수 없기때문에 모바일이나 PC에서 모두 사용가능케하는 범용 웹 표준 개발이 필요해졌고, W3C와 하이퍼텍스트 워킹그룹에서 HTML5의 표준을 만들게 되었다.

웹페이지를 Structure, Presentation, Behavior을 분리해서 개발하도록 html에서 presentation과 관련된 태그를 없애고 웹 문서의 Structur 를 명확히 하는 태그들을 도입했다. 플러그인 없이 미디어를 사용 하고 오류처리가 수월하게 하였으며 웹 앱을 작성할 수 있는 기능도 포함하여, 모바일 기기나 PC등 어떤 장치에서도 작동되는 웹 표준을 만들기 위해 HTML5 표준이 제정되었다. 그래서 HTML5는 하드웨어에 대한 의존성이 없고 안드로이드와 IOS 처럼 서로 다른 플랫폼에 대해서도 잘 실행된다. 

HTML5의 몇몇 기능들

 - 위치정보 API Geolocation API

 지도 애플리케이션을 이용하지 않고 브라우저를 통해 위치를 알려준다. IP 주소, Wi-fi, GPS 등을 통해 대략적으로 위치를 예측해서 브라우저가 반환해주는 방식이다. 

- 웹 워커 Web Worker

 웹 워커는 백그라운드 스레드에서 스크립트를 실행할 수 있는 API 이다. 시간이 오래 걸리는 작업을 백그라운드로 만들어 웹 브라우저의 UI가 느려지지 않도록 한다. 자바스크립트는 스레드를 별도로 생성하지 못해 한 번에 한개의 코드만 실행되는데 HTML5의 웹워커 기능을 이용하여 동시에 여러가지를 하는 것 처럼 개발 할 수 있다. 

- 웹 스토리지 Web Storage

 웹 브라우저가 실행되는 컴퓨터에 데이터를 저장하는 API이다. 쿠키와 비슷한 기능이지만 훨씬 큰 용량의 저장 공간을 이용 할 수 있다. (약 5MB) 

웹스토리지 최신스펙 확인

- 캔버스 Canvas

 <canvas></canvas> 태그와 자바스크립트를 써서 2차원, 3차원 그래픽을 그릴 수 있는 API로 https://mrdoob.com/projects/chromeexperiments/ball-pool/  와 같은 다양한 애니매이션이나 게임을 만들 수 있다. 

캔버스 애니매이션 예제2

검증 Validation 과 디버깅 Debugging

HTML5는 표준을 따라 규칙에 맞게 작성하는것이 일차적으로 필요하므로 작성한 코드가 표준에 적합한지 검증을 해야한다.

W3C 통합검사 : https://validator.w3.org/unicorn/?ucn_lang=ko

HTML5, CSS3, JS 코드가 표준에 맞는지 각각 검사할 수 있다. 대부분의 웹 브라우저는 HTML 페이지의 오류를 알려주거나 JS 실행 과정을 보며 디버깅할 수 있는 툴을 제공해 주며 크롬에서는 '개발자 도구'라고 한다. F12를 누르면 개발자도구가 열리고 마우스 포인터가 가르키는 곳의 Sources를 볼 수 있다.