kaki1013
7. HTML5 시작 본문
# HTML5 개요
HTML5 : 웹 상에서 콘텐츠(content)를 구성하고 보여주기 위한 HTML 언어의 최신 표준 권고안
→ HTML 4.01, XHTML 1.1 등을 대체하는 HTML의 차세대 표준
→ XML이나 XHTML과는 달리 문법적으로 매우 유연하게 대처
다음과 같은 사항들을 모두 문법적으로 허용
- 태그 이름에 대문자 사용
- 속성값에 따옴표 생략
- 속성값 생략
- 빈 태그의 종료 태그(/) 생략
1. HTML5 문서의 기본 구조
DOCTYPE 선언이 매우 간단해짐
문법
<!DOCTYPE html>
문자셋(character set)의 선언도 매우 간단해짐
기본 문자 인코딩(character encoding) 방식 = UTF-8
<!-- HTML5 이전 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- HTML5 -->
<meta charset="UTF-8">
# HTML5 변경사항
1. HTML5에서 추가된 요소 및 타입
- 의미(semantic) 요소 : <header>, <nav>, <main>, <section>, <aside>, <article>, <footer>, <figure>
- 멀티미디어 요소 : <video>, <audio>
- 그래픽 요소 : <canvas>, <svg>
- input 요소의 타입 : number, date, time, calendar, range
2. HTML5에서 추가된 자바스크립트 API
- Geolocation
- Drag and Drop
- Web Storage
- Application Cache
- Web Worker
- Server Sent Events
3. HTML5에서 삭제된 기존 요소
4. 웹 브라우저의 HTML5 지원
현재 최신 버전의 주요 웹 브라우저들은 모두 HTML5를 지원함
But HTML5의 새로운 요소들이 구형 버전의 웹 브라우저에서는 제대로 표현되지 못할 수도 있음
→ 구형 버전의 웹 브라우저에 자신이 알지 못하는 새로운 HTML 요소를 다루는 방법을 알려줘야만 함
다음 예제는 웹 브라우저가 알지 못하는 새로운 HTML 요소를 어떻게 다뤄야 하는지 알려주는 방법을 보여줌
<script>document.createElement("newPara")</script>
<style>
newPara { background-color: #F0F0F0; display: block; padding: 10px; font-size: 14px; }
</style>
...
<newPara>우리 수업에서만 사용하는 단락입니다!</newPara>
위와 같은 방법을 사용하면 모든 새로운 요소를 웹 브라우저에 설명 가능
But 익스플로러 8과 그 이전 버전에서는 위와 같이 HTML 요소를 새롭게 정의하는 것을 허용하지 않음
→ 위와 같은 방법이 아닌 HTML Shiv 방법을 사용
5. 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]-->
주석 원리
: 아래 링크 참고!
https://homzzang.com/b/html-141
홈짱닷컴
홈페이지 제작, 그누보드 강의, 웹코딩, HTML, CSS, JAVASCRIPT, JQUERY, PHP, SQL
homzzang.com
# HTML5 추가요소
: 자세한 내용들은 아래 링크 참고!
https://www.tcpschool.com/html/html5_intro_addition
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
'버그바운티 스터디 > HTML' 카테고리의 다른 글
| 6. HTML 확장 (0) | 2023.07.06 |
|---|---|
| 5. HTML 입력 양식 (0) | 2023.07.06 |
| 4. HTML 공간 분할 (0) | 2023.07.06 |
| 3. HTML 기본 요소 (0) | 2023.07.05 |
| 2. HTML 텍스트 요소 (0) | 2023.07.05 |
