..

Search

28) HTML5 변경사항

HTML5 변경사항


HTML5에서 추가된 요소 및 타입

- 의미(semantic) 요소 : <header>, <nav>, <main>, <section>, <aside>, <article>, <footer>, <figure>

- 멀티미디어 요소 : <video>, <audio>

- 그래픽 요소 : <canvas>, <svg>

- input 요소의 타입 : number, date, time, calendar, range


HTML5에서 추가된 자바스크립트 API

- Geolocation

- Drag and Drop

- Web Storage

- Application Cache

- Web Worker

- Server Sent Events


HTML5에서 삭제된 기존 요소

삭제된 기존 요소 설명
<acronym> <abbr> 태그로 대체
<applet> <object> 태그로 대체
<basefont> CSS로 적용
<big> CSS로 적용
<center> CSS로 적용
<dir> <ul> 태그로 대체
<font> CSS로 적용
<frame> 삭제
<frameset> 삭제
<noframes> 삭제
<strike> CSS로 적용
<tt> CSS로 적용

 

HTML5에서 변경된 사항들에 대한 더 자세한 정보를 원한다면, W3C 공식 사이트를 방문하여 확인할 수 있습니다.

 

W3C HTML5 Recommendation 28 October 2014 =>


웹 브라우저의 HTML5 지원

 

주요 웹 브라우저들

 

현재 최신 버전의 주요 웹 브라우저들은 모두 HTML5를 지원하고 있습니다.

하지만 HTML5의 새로운 요소들이 구형 버전의 웹 브라우저에서는 제대로 표현되지 못할 수도 있습니다.

따라서 구형 버전의 웹 브라우저에 자신이 알지 못하는 새로운 HTML 요소를 다루는 방법을 알려줘야만 합니다.

 

다음 예제는 웹 브라우저가 알지 못하는 새로운 HTML 요소를 어떻게 다뤄야 하는지 알려주는 방법을 보여줍니다.

예제

<script>document.createElement("newPara")</script>

<style>

    newPara { background-color: #F0F0F0; display: block; padding: 10px; font-size: 14px; } 

</style>

...

<newPara>우리 수업에서만 사용하는 단락입니다!</newPara>

코딩연습 ▶

 

위와 같은 방법을 사용하면 모든 새로운 요소를 웹 브라우저에 설명할 수 있습니다.

 

하지만 익스플로러 8과 그 이전 버전에서는 위와 같이 HTML 요소를 새롭게 정의하는 것을 허용하지 않습니다.

따라서 위와 같은 방법이 아닌 HTML Shiv 방법을 사용해야 합니다.


HTML Shiv 방법

우선 아래의 주석 코드를 <head>태그 내에 삽입합니다.

그러면 익스플로러 8과 그 이전 버전의 브라우저만이 이 자바 스크립트 파일을 읽고 적용할 것입니다.

이와 같은 방법으로 익스플로러 8과 그 이전 버전에서도 HTML5의 새로운 요소들을 자유롭게 사용할 수 있습니다.

이러한 방법을 HTML Shiv 방법이라고 하며, Sjoerd Visscher에 의해 개발되었습니다.

예제

<!--[if lt IE 9]>

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

</script>

<![endif]-->

코딩연습 ▶


연습문제