W3Schools HTML5 튜토리얼 (한글) -3

W3Schools HTML5 튜토리얼

HTML5 홈
HTML5 소개
HTML5 새 엘리먼트 (Elements)
HTML5 비디오 (Video)
HTML5 비디오/Dom (Video/DOM)
HTML5 오디오 (Audio)
HTML5 캔버스 (Canvas)
HTML5 웹 저장공간 (Web Storage)

HTML5 폼 (Forms)

HTML5 입력타입 (Input Types)
HTML5 폼 엘리먼트 (Form Elements)
HTML5 폼 속성 (Form Attributes)

HTML5 참조목록 (Reference)

HTML5 태그 (Tags)
HTML5 속성 (Attributes)
HTML5 이벤트 (Events)
HTML5 2D 캔버스 (Canvas 2d)
HTML 유효 DTD (Valid DTDs)

---

HTML5의 새 엘리먼트들

HTML4.01이 1999년 표준화된이래 인터넷은 수많은 변화를 거쳐왔습니다.

요새 HTML4.01의 일부 엘리먼트들은 완전 구닥다리가 되어버려서 아무데서도 쓰이지않거나 사용하지 말라고까지 합니다. 이 엘리먼트들은 HTML5에서 다시 쓰여지거나 없애버렸습니다.

오늘날의 인터넷 추세에 맞게 더 잘 사용되려면, HTML5 또한 더 나은 구조, 드로잉, 미디어 컨탠츠 그리고 향상된 폼 핸들링을 포함해야합니다.

---

새 마크업 엘리먼트들

향상된 구조체계를 위한 새 엘리먼트들:

태그	설명
<article>	독립적이고, 스스로 컨텐츠를 가지고 있다면 <article>이라고 명시. 사이트의 다른 부분과는 독립적으로 배포되는 새 뉴스기사, 블로그 새글, 게시판 새글, 다른 새글쓰기등이 이에 해당
<aside>	위치해있는 컨텐트를 비켜가는 다른 컨텐츠를 가르킴 aside 컨텐츠는 주변 컨텐츠와 연관이 있어야함
<bdi>	글자의 경우 해당 글자의 부모 엘리먼트의 쓰기 방향을 따르지 않아야 함
<command>	버튼이거나, 라디오버튼이거나, 체크박스용
<details>	문서나 문서의 일부에 대한 자세한 묘사용
<summary>	위의 details 엘리먼트 내부의 한 캡션이거나 요약
<figure>	비디오와 같은 독립적 컨텐츠의 한 섹션을 그룹화하기위함
<figcaption>	위의 figure 섹션의 캡션
<footer>	섹션이나 문서의 하단부를 위함 저자명이나 문서의 날짜, 연락처, 저작권정보등을 포함
<header>	섹션이나 문서의 소개를 위함. 빠른찾기(네비게이션)을 포함
<hgroup>	헤더의 섹션을 위함. 제일 큰 사이즈는 섹션의 메인헤더이고 나머지들은 서브 헤더들로서 <h1>부터 <h6>까지 가능.
<mark>	글씨의 경우 하이라이트 됨.
<meter>	수치값에서 최대값과 최소값을 알고있는 경우에만 사용가능.
<nav>	빠른찾기(네비게이션) 섹션에서 활용
<progress>	작업의 진행상태를 표시
<ruby>	루비 애노테이션에서 활용됨 (중국어 또는 중문)
<rt>	루비 애노테이션의 설명란
<rp>	어떤 브라우저들이 루비 엘리먼트들을 지원하지않는지 표시함
<section>	챕터, 헤더, 하단 또는 문서내의 어떤 섹션등과 같이 문서내의 섹션에서 활용됨.
<time>	시간, 날짜 또는 둘다를 정의함
<wbr>	줄바꿈의 기회를 부여

---

새 미디어 엘리먼트들

HTML5은 미디어 컨텐츠를 위한 새 표준을 지원합니다:

태그	설명
<audio>	멀티미디어 컨탠츠, 소리, 음악 또는 오디오 스트림용
<video>	무비클립이나 다른 비디오 스트림같은 비디오 컨탠츠용
<source>	비디오나 오디오 엘리먼트내에 정의된 미디어 엘리먼트의 미디어 리소스용
<embed>	플러그인과 같은  임베디드 컨텐츠용
<track>	미디어플레이어에서 사용되는 자막용

---

캔버스 엘리먼트

캔버스 엘리먼트는 자바스크립트를 사용해서 웹페이지에 드로잉합니다

태그	설명
<canvas>	스크립트로 그래픽을 만드데 쓰임

---

---

새 폼 엘리먼트들

HTML5는 더 많은 기능을 가진 폼 엘리먼트를 제공해줍니다:

태그	설명
<datalist>	입력값의 옵션목록
<keygen>	사용자 인증을 위한 키값을 생성
<output>	스크립트로 쓰여진 결과값같은 다른 타입의 결과값에서 쓰임

---

새 입력타입 속성값들

입력 엘리먼트의 타입 속성 역시 서버로 보내기전 입력값들을 더 잘 제어할수있도록 새로운 속성이 많이 추가되었습니다:

타입	설명
tel	전화번호 타입의 입력값
search	입력창이 검색용임
url	입력값이 URL
email	입력값이 하나 또는 복수개의
datetime	입력값이 날짜와(또는) 시간
date	입력값이 날짜
month	입력값이 월
week	입력값이 주
time	입력값이 시간
datetime-local	입력값이 현지역의 날짜,시간
number	입력값이 숫자
range	입력값이 범위내의 숫자값
color	입력값이 16진수 색상값 (#FF8800 같은)
placeholder	입력창에 입력해야하는 값의 힌트를 나타냄