3일만에 끝내는 HTML, CSS, JS 기초
h27. HTML5 개요 본문
HTML5 개요
HTML5 는 HTML4 에서 개선된 마크업 언어인데, DOCTYPE 선언부터 매우 심플하게 바뀌었습니다. 기본 문자셋 인코딩이 HTML5 에서는 UTF-8 입니다. UTF-8 은 모든 언어를 표현할 수 있습니다. HTML5 는 대부분의 브라우저에서 지원합니다.<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>문서의 제목</title> </head> <body> Content of the document...... </body> </html>
HTML5 에서는 새로운 태그들이 많이 등장하는데, <header>, <footer>, <article>, and <section> 같은 태그들이 생겨났습니다. 그리고 폼 태그 내에 몇 가지 기능 속성이 추가되었는데 날짜, 시간, 달력 등의 속성이 추가되었습니다. 그래픽 태그로서 <svg>, <canvas> 태그를 사용하게 되었고, 멀티미디어 재생에 관련된 태그로 <audio>, <video> 태그가 새롭게 추가되었습니다. 그 외에 아래와 같은 HTML5 API (응용프로그램 인터페이스) 가 새롭게 추가되었습니다. HTML 지도 기능 HTML 드레그 드롭 기능 HTML 내부 저장 기능 HTML 애플리케이션 캐시 기능
HTML5 에서 추가된 8개의 새로운 "유의미(semantic)" HTML 태그들은 블록-단위 태그로 분류되는데, CSS 스타일로 정의해줄 필요가 있습니다.
오래된 브라우저에서도 정상적으로 HTML5 기능이 동작하도록 하기위해 CSS 디스플레이 속성을 block 로 설정합니다.
header, section, footer, aside, nav, main, article, figure {
display: block;
}
인터넷 익스플로러 8 이나 그 이전 버전에서는 모르는 태그에 대해서는 스타일을 반영해주지 않습니다. 그래서 HTML5 가 가능하게하는 자바스크립트 코드 "the shiv" 를 해드 태그에 링크해 줍니다. 이렇게 하면 인터넷 익스플로러 9 이전 버전의 브라우저에서도 HTML5 태그들을 읽고 이해하도록 해줍니다.<!--[if lt IE 9]> http://html5shiv.googlecode.com/svn/trunk/html5.js <![endif]-->
HTML5 의 기본 뼈대는 아래와 같습니다.<!DOCTYPE html> <html lang="en"> <head> <title>HTML5</title> <meta charset="utf-8"> <!--[if lt IE 9]> http://html5shiv.googlecode.com/svn/trunk/html5.js <![endif]--> <style> body {font-family: Verdana, sans-serif;} header, nav, section, article, footer {border:1px solid grey; margin:5px; padding:5px;} nav ul {margin:0; padding:0;} nav ul li {display:inline; margin:5px;} </style> </head> <body> <header> <h1>HTML5 기본 뼈대</h1> </header> <nav> <ul> <li><a href="http://www.naver.com/">네이버</a></li> <li><a href="https://www.google.com">Google</a></li> </ul> </nav> <section> <h2>여기 중간 제목</h2> <article> <h2>여기 소제목</h2> <p>여기 내용</p> </article> <article> <h2>여기 소제목</h2> <p>여기 내용</p> </article> </section> <footer> <p>© 2016 ... All rights reserved.</p> </footer> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>문서의 제목</title> </head> <body> Content of the document...... </body> </html>
HTML5 에서는 새로운 태그들이 많이 등장하는데, <header>, <footer>, <article>, and <section> 같은 태그들이 생겨났습니다.
그리고 폼 태그 내에 몇 가지 기능 속성이 추가되었는데 날짜, 시간, 달력 등의 속성이 추가되었습니다.
그래픽 태그로서 <svg>, <canvas> 태그를 사용하게 되었고, 멀티미디어 재생에 관련된 태그로 <audio>, <video> 태그가 새롭게 추가되었습니다.
그 외에 아래와 같은 HTML5 API (응용프로그램 인터페이스) 가 새롭게 추가되었습니다. HTML 지도 기능 HTML 드레그 드롭 기능 HTML 내부 저장 기능 HTML 애플리케이션 캐시 기능
HTML5 에서 추가된 8개의 새로운 "유의미(semantic)" HTML 태그들은 블록-단위 태그로 분류되는데, CSS 스타일로 정의해줄 필요가 있습니다. 오래된 브라우저에서도 정상적으로 HTML5 기능이 동작하도록 하기위해 CSS 디스플레이 속성을 block 로 설정합니다. header, section, footer, aside, nav, main, article, figure { display: block; } 인터넷 익스플로러 8 이나 그 이전 버전에서는 모르는 태그에 대해서는 스타일을 반영해주지 않습니다. 그래서 HTML5 가 가능하게하는 자바스크립트 코드 "the shiv" 를 해드 태그에 링크해 줍니다. 이렇게 하면 인터넷 익스플로러 9 이전 버전의 브라우저에서도 HTML5 태그들을 읽고 이해하도록 해줍니다.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML5</title> <meta charset="utf-8"> <!--[if lt IE 9]> http://html5shiv.googlecode.com/svn/trunk/html5.js <![endif]--> <style> body {font-family: Verdana, sans-serif;} header, nav, section, article, footer {border:1px solid grey; margin:5px; padding:5px;} nav ul {margin:0; padding:0;} nav ul li {display:inline; margin:5px;} </style> </head> <body> <header> <h1>HTML5 기본 뼈대</h1> </header> <nav> <ul> <li><a href="http://www.naver.com/">네이버</a></li> <li><a href="https://www.google.com">Google</a></li> </ul> </nav> <section> <h2>여기 중간 제목</h2> <article> <h2>여기 소제목</h2> <p>여기 내용</p> </article> <article> <h2>여기 소제목</h2> <p>여기 내용</p> </article> </section> <footer> <p>&copy; 2016 ... All rights reserved.</p> </footer> </body> </html>
[광고] Udemy 동영상 강의로 보기
'HTML' 카테고리의 다른 글
| h31. HTML5 페이지 코딩 규칙 (0) | 2016.06.05 |
|---|---|
| h28. HTML5 태그 (0) | 2016.06.05 |
| h26. HTML 폼 태그 (0) | 2016.06.05 |
| h25. HTML 폼 개요 (0) | 2016.06.05 |
| h24. XHTML (0) | 2016.06.05 |