HTML 5 간단요약

시작

이 문서는 개인적인 공부를 목표 정리하였으며, 사내에서 공유하여 사용할 수 있도록 사내에서만 주소를 공개하고 있습니다. 하루 하루 빠르게 발전하고 있는 HTML5에 대하여 대략적인 내용을 포함하고 있으며, 추후 브라우저 지원에 따른 HTML5 작업을 할 수 있도록 가이드 또한 함께 제공합니다. HTML5에 대한 이야기가 여러 업체 및 관련 뉴스, 소식이 쏟아지고 있는 상황이기에 이 문서로 인하여 기본적인 HTML5 지식을 습득하고, 다른 검색이나 학습을 통하여 HTML5에 대하여 폭 넓은 지식을 갖도록 하는 것이 이 문서의 목표입니다. (하지만, 이 문서만으로는 모든 부분에 대한 설명과 문제 해결방법을 해결할 수는 없습니다.)
이 문서 내용에 대한 출처 및 원본은 [출처/참고링크]에서 확인하면 됩니다.

문서 이력

  • Author – 유정훈 (오타나 수정할 부분은 메일로 보내주세요.) playheader@gmail.com, i@ugoon.net)
  • Date – 2010-03-01
  • 이 문서는 나눔고딕에 최적화되어 있습니다. (나눔고딕 다운로드)
  • History
    1. 2010-03-01 (개요 작성)
    2. 2010-03-10 (콘텐츠 추가)
    3. 2010-03-16 (문서구조부분 추가)

개요

  • 2010년 3월 현재 Working Draft 상태
  • 웹의 미래를 책임질 중요한 표준
  • 마이크로소프트, 모질라, 애플, 구글, 오페라 등 모든 웹 브라우저 벤더가 참여하고 있음.
  • HTML의 차기 주요 제안 버전
  • 2004년 6월 Web Hypertext Application Technology Working Group (WHATWG)에서 웹 어플리케이션 1.0이라는 이름으로 세부 명세 작업을 시작
  • Plug-in (Flash Player, Silverlight 등등) 같은 것 없이 진화된 웹 어플리케이션을 만들 수 있도록 함

↑ 목차보기

대표적인 기능

  • 캔버스 요소를 통하여 다이나믹한 그래픽을 자바스크립트만을 이용하여 웹 페이지에 보여줌.
  • 비디오 요소를 통하여 간단하게 웹에서 비디오를 제어함.
  • Geolocation API로 웹 브라우저에서도 내 현재 위치를 알 수 있음.
  • 로컬 저장이 가능하여 웹 어플리케이션에서 오프라인 지원이 됨. 예를 들어, 인터넷이 끊겨도 기존 메일을 읽을 수 있음.
  • 백그라운드 프로세싱이 가능해서 웹 어플리케이션이 브라우저 속도를 느리게하지 않으면서 무거운 작업을 돌릴 수 있음.
  • Drag & Drop API로 웹 어플리케이션에서도 Drag & Drop이 가능함.
  • 더 많은 요소와 API들로 웹 어플리케이션보다 더 기능과 UI가 풍부한 어플리케이션을 만들수 있게하고 궁극적으로 클라우드 컴퓨팅을 더욱 강화시켜줄 수 있음.
  • 모바일 브라우저들도 HTML 5를 지원하기 시작하여 모바일에서도 강화된 어플리케이션을 이용할 수 있음.

↑ 목차보기

HTML4과 HTML5 기본 문서 구조 비교

HTML 4.01

HTML4 문서 구조 기본 예

이미지 출처 : A List Apart: Articles: A Preview of HTML 5 

		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
		<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ko">
			<head profile="http://gmpg.org/xfn/11">
				<meta http-equiv="content-type" content="text/html; charset=utf-8" />
				<title>HTML5 예제 문서</title>
			</head>
			<body>
				<div id="header">...</div>
				<div id="nav">...</div>
				<div class="article">
					<div class="section">
						...
					</div>
				</div>
				<div id="sidebar">...</div>
				<div id="footer">...</div>
			</body>
		</html>

HTML 5

HTML5 문서 구조 기본 예

이미지 출처 : A List Apart: Articles: A Preview of HTML 5 

		<!doctype html>
		<html>
			<head>
				<meta charset="UTF-8">
				<title>HTML5 예제 문서</title>
			</head>
			<body>
				<header>...</header>
				<nav>...</nav>
				<article>
					<section>
						....
					</section>
				</article>
				<aside>...</aside>
				<footer>...</footer>
			</body>
		</html>

HTML5 추가정보

  1. 태그 추가
    • 구조적인 태그 – 구역을 나누는 블록요소인 div 태그를 대신함
      • <header>
      • <nav>
      • <article>
      • <section>
      • <aside>
      • <footer>
    • API 태그 – 플러그인 없이 멀티미디어를 재생할 수 있게 함.
      • <audio>
      • <video>
      • <canvas>
    • 기타
      • <embed>
      • <figure>
      • <hgroup>
      • <mark>
      • <meter>
      • <output>
      • <progress>
      • <rp>
      • <rt>
      • <ruby>
      • <source>
      • <time>

↑ 목차보기

새로운 Input 요소와 속성

요소

  1. type=”datetime”
  2. type=”datetime-local”
  3. type=”date”
  4. type=”month”
  5. type=”time”
  6. type=”week”
  7. type=”number”
  8. type=”range”
  9. type=”email”
  10. type=”url”
  11. type=”search”
  12. type=”tel”
  13. type=”color”

속성

  1. 정규식 추가

    • <input type=”text” name=”phone” id=”phone” Pattern=”[0-9]{3}-[0-9]{3}-[0-9]{3}” title=”전화번호를 입력하세요”>
  2. 이벤트

    • <input type=”text” name=”phone” id=”phone” Pattern=”[0-9]{3}-[0-9]{3}-[0-9]{3}” title=”전화번호를 입력하세요” Oninvalid=”handle_myself(); return false;”>

↑ 목차보기

«
»

댓글작성

댓글 남기기

↑ 위로가기
© 2011 ugoon.net