본문 바로가기

HTML5

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 입력창에 입력해야하는 값의 힌트를 나타냄