HTML5란? <책에 적힌 말>
| HTML5는 웹 표준 기구인 W3C에서 만들고 있는 차세대 웹 표준안으로서 마이크로소프트, 모질라, 애플, 구글, 오페라 등 모든 웹 브라우저 벤더가 참여하고 있는 산업 표준이다. 2004년 웹 브라우저 벤더와 개발자 커뮤니티가 주축이 된 웹 하이퍼텍스 트 애플리케이션 워킹그룹(WHATWG)의 초안으로부터 시작된 이 표준안 은 웹 브라우저 호환성, 구조적이고 의미적 마크업 및 편리한 웹폼 기능을 제공하여 웹 개발자들의 생산성을 높임과 동시에 리치 웹 애플리케이션을 개발 할 수 있는 다양한 자바스크립트 API를 포함하고 있다. 2007년부터 W3C의 HTML W/G에서 HTML5 표준안으로 개발되고 있는 동시에 최신 버전의 웹 브라우저에서 빠르게 탑재되고 있어 차세대 웹 서비스 개발의 주요 기술로서 각광 받을 전망이다. 이 장에서는 HTML5가 만들어질 수 밖에 없었던 배경과 간단한 스펙소개 그리고 웹 개발자로서 향후 접근 방법 및 웹 개발의 방향에 대해 공유하고자 한다. HTML5 표준안의 가장 큰 목적은 과거 HTML의 호환성을 유지하면서 웹 개발자들이 실질적으로 부딪히는 문제를 해결 하는 것이다. 웹을 통한 정보 공유가 폭발적으로 성장할 수 있었던 것은 HTML을 통해 정보(컨텐츠)와 의미(마크업)을 함께 손 쉬운 텍스트로 편집하도록 함으로서 쉽게 배우고 쓸 수 있었기 때문이다. HTML의 이런 단순함은 웹 상에 사람이 참여하는 토대를 낳게 하기에 충분했다. 하지만 이러한 장점에도 불구하고 90년대 후반 웹 브라우저 업체의 점유율 전쟁 중에 상용 브라우저 벤더들의 비표준 태그들이 남발되면서 HTML의 기본 정신을 훼손되었다. 실질적으로 IE vs. Netscape의 사이에서 피해를 본 것은 ‘웹 개발자’들이었다. 크로스 브라우징(CrossBrowsing)라는 기법 때문에 고생을 했는가 하면 IE의 독주 상태 때문에 웹 서비스의 혁신이 늦어졌고 사실상 프론트 엔드의 기술 혁신은 플래시같은 서드파티 플랫폼으로 넘어가 버렸다. 게다가 웹 표준 기구인 W3C는 견고한 웹 문서를 제공한다는 꿈을 가지고 XML을 기반으로 하는 XHTML로의 전환을 꾀하였다. 따라서 HTML은 4.01 버전을 끝으로 더 이상 업그레이드 되지 않는 낡은 표준으로 남았다. |
| 내용이 좀 길지만... 요약하면...... 기존까지 HTML은 정말 정적인요소적 기능만 제공해왔다. 기능이 제한적이다 보니간.. 외부 플러그인 액티브 컨트럴러 등 외부 프로그램과 연계하여 서비스를 제공해 왔으며.. 그로 인해서 설치해야되는 컴포넌트적 요소가 많으므로 사용자입장에선 큰부담을 가질수 밖에 없었다. FLASH, 실버라이트, 자바애플릿, 자바스크립트 등등.. 이러한 부가적 기능을 통해서 지금까지 여러가지의 서비스를 제공해왔고 앞으로 HTML5가 본격적으로 활성화가 되면 이제는 플러그인 설치에대한 부담을 가질필요가 없다. 인터넷 익스플로러9에서 부터 제공하는 기능이고, HTML5를 이용하면 설치없이 곧바로 화면에 나타나기 때문에.. 유용함을 볼수있다. 결론 HTML5에서는 기존의 HTML보다 좀더 유연하고 많은 기능을 제공하며 특히 멀티미디어 쪽에 발달되어 여러가지 기능을 제공할수있는 태그 문법이다. |
웹브라우저가 HTML5 인지 그냥 일반인지 어떻게 구분을 하는것인가?
HELLOHTML5.html
| <!doctype html> <html> <head> <!--meta charset="UTF-8" /--> <meta charset="ko_KR.EUC-KR" /> <title>HELLO HTML5</title> </head> <body> <h2>HELLO HTML5</h2> </body> </html> |
HTML5에서 새로 생긴 태그<엘리먼트>들..
[일반 태그]
| Tag | Description |
|---|---|
| <article> | 문서내의 독립적인 글을 article로 표시할 수 있다. 블로그 글이나 뉴스 본문 등이 이에 해당한다. |
| <aside> | 문서의 주 내용이 아닌 관련성이 낮은 내용들은 aside로 표시할 수 있다. |
| <command> | 사용자가 행할 수 있는 명령 기능을 나타낼 때 사용된다. |
| <details> | 사용자의 필요에 의해서 사용할 수 있게 제공되는 추가적인 정보나 기능을 나타낼 때 사용된다. |
| <summary> | table 요소의 summary 속성은 HTML5의 다른 대안을 이용해서 표시 하는 것이 더 권장된다. |
| <figure> | 그래픽이나 비디오를 위한 캡션을 표시할 수 있게 한다. figcaption 요소로 캡션을 표시한다. |
| <figcaption> | figcaption 요소로 캡션을 표시한다. |
| <footer> | 섹션의 푸터를 나타내고 저자나 저작권 등을 포함할 수 있다. |
| <header> | 소개나 네비게이션 기능들의 묶음을 나타낸다. |
| <hgroup> | 섹션의 제목을 나타낸다. |
| <mark> | 중요 텍스트를 표기할 때 사용된다. |
| <meter> | 분량이나 수량을 나타낼 때 사용된다. |
| <nav> | 네비게이션 섹션 |
| <progress> | 다운로드 상태바 처럼 작업의 진행상황을 나타낼 때 사용된다 |
| <ruby> | 일본어에서 한문에 음을 다는 것과 같은 루비 주석(ruby annotation)을 달 때 사용된다. |
| <rt> | 일본어에서 한문에 음을 다는 것과 같은 루비 주석(ruby annotation)을 달 때 사용된다. |
| <rp> | 일본어에서 한문에 음을 다는 것과 같은 루비 주석(ruby annotation)을 달 때 사용된다. |
| <section> | 문서나 어플리케이션의 섹션을 나타내는 section 요소가 추가되었다. |
| <time> | 날짜나 시간을 나타낼 때 사용된다. |
| <wbr> | 줄 바꿈 |
[Media 미디어 태그]
| Tag | Description |
|---|---|
| <audio> | 오디오 재생 |
| <video> | 비디오 재생 |
| <source> | 미디어 소스 정보 |
| <embed> | 이미지, 비디오, 플래시 등 외부 콘텐츠를 문서내에 표현한다. |
[Canvas 미디어 태그]
| Tag | Description |
|---|---|
| <canvas> | 그래픽이나 게임과 같이 동적인 비트맵 이미지를 구현할 때 사용된다. |
[Form 태그]
| Tag | Description |
|---|---|
| <datalist> | 미리 정의되어 있는 option의 묶음을 나타낸다. |
| <keygen> | 서버에 공개키를 보내고 로컬의 키 저장소에 개인키를 저장하는데 사용된다. |
| <output> | 서식이나 스크립트를 통해 생성된 결과물을 나타낼 때 사용된다. |
[새로운 입력의 속성 타입값]
| Type | Description |
|---|---|
| tel | 전화번호 |
| search | 검색 |
| url | URL |
| 이메일 | |
| datetime | 날자와 시각 |
| date | 날짜 |
| month | 월 |
| week | 주 |
| time | 시각 |
| datetime-local | 로컬시간과 날짜 |
| number | 숫자 |
| range | 범위 |
| color | 색상 |
'프로그래밍 > HTML5' 카테고리의 다른 글
| [HTML5] 새로 추가된 FORM 기능들 (0) | 2011/06/22 |
|---|---|
| [HTML5] Web Storage (데이터 저장유지 하기) (2) | 2011/06/22 |
| [HTML5] Canvas Tool (캔바스 그리기 도구) (0) | 2011/06/21 |
| [HTML5] Video동영상/Audio음악 불러오기 (0) | 2011/06/21 |
| [HTML5] 기초 입문 - HTML5에 추가된 태그<Element> (1) | 2011/06/21 |
댓글을 달아 주세요
안녕하세요 블로그 잘보고갑니다^^ php 도 항목에 포함되 잇으면 좋껬네요