태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

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 새 폼 엘리먼트들

HTML5 폼은 새 엘리먼트와 속성을을 가지고 있습니다.

이 장에서 언급할 새 폼 엘리먼트들:

  • <datalist>
  • <keygen>
  • <output>



지원하는 브라우저

태그익스플로러파이어폭스오페라크롬사파리
<datalist> No 4.0 9.5 No No
<keygen> No 4.0 10.5 3.0 No
<output> No 4.0 9.5 10.0 5.1




<datalist> 엘리먼트

<datalist> 엘리먼트는 입력창의 옵션 리스트를 서술합니다.

이 리스트는 <datalist>내에서 <option> 엘리먼트와 같이 만들어집니다.

입력창에서 <datalist>를 사용하려면(bind), 입력창의 목록속성에 datalist의 아이디를 쓰면 됩니다:

예제

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3schools.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

직접 해보기 »

팁: <option> 엘리먼트는 항상 value 속성값을 가져야 합니다.



<keygen> 엘리먼트

<keygen> 엘리먼트의 목적은 유저를 안전하게 인증하기 위함입니다.

<keygen> 엘리먼트는 key-pair generator입니다. 폼이 submit될때, 두개의 키다 생성되며 하나는 private, 다른 하나는 public입니다.

private 키는 클라이언트에 저장되고, public 키는 서버로 보내집니다. public 키는 차후 유저를 인증하기 위한 클라이언트 인증서를 만드는데 사용됩니다.

현재 이 엘리먼트를 지원하는 브라우저는 유용한 보안 표준안이 될만큼 충분하지 않습니다.

예제

<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

직접 해보기 »



<output> 엘리먼트

<output> 엘리먼트는 스크립트나 연산출력물같은 다른 타입의 출력을 위해 사용됩니다.

예제

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" name="a" value="50" />100
+<input type="number" name="b" value="50" />
=<output name="x" for="a b"></output>
</form>

직접 해보기 »



HTML5 새 폼 엘리먼트들

태그설명
<datalist> 입력창의 옵션리스트를 정의함
<keygen> key-pair generator 필드를 정의함
<output> 연산의 결과를 표현함

 

Posted by K 얼바인
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의 새로운 입력 방식들

HTML5 폼은 몇 종류의 새로운 입력 방식을 가지고 있습니다. 이 새 기능들은 더 나은 입력제어와 유효성검사를 가능하게 해줍니다.

이 장에서 언급할 새 입력 방식들:
  • 이메일 (email)
  • url
  • 숫자
  • 범위 (range)
  • 날짜고르기 - Date pickers (date, month, week, time, datetime, datetime-local)
  • 검색 (search)
  • 색상 (color)



지원하는 브라우저

입력 방식익스플로러파이어폭스오페라크롬사파리
이메일 - email No 4.0 9.0 10.0 No
url No 4.0 9.0 10.0 No
숫자 - number No No 9.0 7.0 5.1
범위 - range No No 9.0 4.0 4.0
날짜고르기 -Date pickers No No 9.0 10.0 5.1
검색 - search No 4.0 11.0 10.0 No
색상 - color No No 11.0 12 No

Note: 오페라는 새 입력방식을 가장 잘 지원합니다. 하지만 이미 구현하고 사용한다면 대다수의 브라우저에서는 그것을 지원하지않는다면 예전의 일반적인 입력상자로서 인식할것입니다.

 


입력방식 - 이메일

이메일 방식은 입력값이 이메일일때 사용합니다.

이메일 입력창의 입력값은 폼을 submit하기전에 자동으로 이메일 유효성검사를 할 것입니다.

예제

E-mail: <input type="email" name="user_email" />

직접 해보기 »

Tip: 아이폰의 사파리는 이메일 입력방식을 인식하고 터치키보드에 @ 나 .com  옵션들을 매치시켜줍니다.


입력방식 - url

url 방식은 입력값이 URL주소일때 사용합니다.

url 입력창은 입력값은 폼을 submit하기전에 자동으로 url 유효성검사를 할 것입니다.

예제

Homepage: <input type="url" name="user_url" />

직접 해보기 »

Tip: 아이폰의 사파리는 url 입력방식을 인식하고 터치키보드에 .com 옵션을 매치시켜줍니다.


입력방식 - 숫자 number

숫자방식은 입력값이 숫자일때 사용합니다.

허용되는 숫자값을 제한할수있습니다:

예제

Points: <input type="number" name="points" min="1" max="10" />

직접 해보기 »

다음 속성은 숫자방식의 제한을 걸때 사용합니다:

속성입력값설명
max 숫자 최대값 허용치를 기술함
min 숫자 최소값 허용치를 기술함
step 숫자 유효 입력값의 간격을 기술함 (step="3"이면 유효입력값은 -3,0,3,6, 등등이 됨)
value 숫자 초기값을 기술함

모든  속성 제한값에 대한 예제모음: 직접 해보기



입력 방식 - 범위 range

범위 방식은 입력값이 숫자 범위일때 사용합니다.

범위 방식은 슬라이더 바로 표시됩니다.

허용되는 숫자값을 제한할수있습니다:

예제

<input type="range" name="points" min="1" max="10" />

직접 해보기 »

다음의 속성은 범위방식의 제한을 걸때 사용합니다:

속성입력값설명
max 숫자 최대값 허용치를 기술함
min 숫자 최소값 허용치를 기술함
step 숫자 유효 입력값의 간격을 기술함 (step="3"이면 유효입력값은 -3,0,3,6, 등등이 됨)
value 숫자 초기값을 기술함



입력방식 - 날짜 고르기 Date Pickers

HTML5는 날짜와 시간을 선택할수있는 몇가지 새 입력 방식을 가지고 있습니다:

  • date - 일, 월, 년을 선택함
  • month - 월, 년을 선택함
  • week - 주, 년을 선택함
  • time - 시간을 선택함 (시간 및 분)
  • datetime - 시간, 날짜, 월, 년을 선택함 (UTC시간대 기준)
  • datetime-local - 시간, 날짜, 월, 년을 선택함 (로컬시간대 기준)

다음의 예제에서 캘린더로 날짜를 선택할수있습니다:

예제

Date: <input type="date" name="user_date" />

직접 해보기 »

입력 방식 - 월 "month": 직접 해보기

입력 방식 - 주 "week": 직접 해보기

입력 방식 - 시 "time": 직접 해보기

입력 방식 - 날짜시간 "datetime": 직접 해보기

입력 방식 - 날짜시간 로컬 "datetime-local": 직접 해보기



입력방식 - 검색 search

검색방식은 입력창에 구글검색, 사이검색과 같이 검색을 위해 사용합니다.

이 검색창은 일반적인 입력상자 처럼 작동합니다.
 


입력방식 - 색상 color

색상방식은 입력창에 색상값을 포함합니다.

오페라 브라우저는 색상고르기를 통해 색상을 선택할수있습니다.
구글 크롬에서는 16진수 색상값만 허용합니다:

예제

Color: <input type="color" name="user_color" />

직접 해보기 »



HTML5 <input> 태그

태그설명
<input> 입력창을 정의함






 

Posted by K 얼바인
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는 클라이언트가 데이터를 저장할수있는 새로운 두개의 객체를 지원합니다:

  • localStorage -시간제한없이 데이터를 저장함
  • sessionStorage - 한 세션내에 데이터를 저장함

지금껏 이 방식은 쿠키를 통해 구현해왔습니다. 쿠키는 서버를 통해 모든 요청을 처리해야하므로 서버를 느리고 비효율적으로 만들기 때문에 대용량 데이터처리에 적합하지않습니다.

HTML5는 모든 요청값을 서버로 보내지않으며 필요로 할때만 보내기 때문에 웹사이트의 성능에 영향을 주지않고 많은 양의 데이터를 저장하는게 가능합니다.

데이터를 웹사이트마다 다른 공간에 저장되며 하나의 웹사이트는 자신이 저장한 데이터만 접근할수있습니다.

HTML5는 데아터를 저장하고 처리하는데 자바스크립트를 사용합니다.


localStorage 객체

localStorage 객체는 시간제한없이 데이터를 저장합니다. 데이터는 다음날에도 다음주에도 다음해에도 이용가능할것입니다.

localStorage를 생성 및 접근하기:

예제

<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>

직접 해보기 »

다음의 예제는 유저당 페이지 방문횟수를 세어줍니다:

Example

<script type="text/javascript">
if (localStorage.pagecount)
  {
  localStorage.pagecount=Number(localStorage.pagecount) +1;
  }
else
  {
  localStorage.pagecount=1;
  }
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>

직접 해보기 »



sessionStorage 객체

sessionStorage 객체는 하나의 세션에 데이터를 저장합니다. 데이터는 유저가 브라우저를 닫으면 지워집니다.

sessionStorage 생성 및 접근하기:

예제

<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>

직접 해보기 »

다음 예제는 현재 세션내에 유저당 페이지 방문횟수를 세어줍니다:

예제

<script type="text/javascript">
if (sessionStorage.pagecount)
  {
  sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
  }
else
  {
  sessionStorage.pagecount=1;
  }
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>

직접 해보기 »





 

Posted by K 얼바인
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)



The canvas element is used to draw graphics on a web page.

Your browser does not support the canvas element.



캔버스가 뭐에요?

HTML5 캔버스 엘리먼트는 웹페이지에 그래픽을 그리기 위해 자바스크립트를 사용합니다.

하나의 캔버스는 사각형구역이며 당신은 그 픽셀 하나하나를 제어할수있습니다.

캔버스 엘리먼트는 그려지는 경로, 박스, 원, 글자 그리고 추가적인 이미지들을 위한 몇개의 메소드를 가지고 있습니다.
 


캔버스 엘리먼트 만들기

HTML5 페이지에 캔버스 엘리먼트를 추가려면 다음과 같이 엘리먼트의 폭, 넓이, 아이디를 기술합니다:

<canvas id="myCanvas" width="200" height="100"></canvas>



자바스크립트로 그리기

캔버스 엘리먼트는 스스로 무언가를 그릴수없습니다. 모든 그리기 작업은 자바스크립트를 통해서만 가능합니다:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

직접 해보기 »

자바스크립트는 아이디값으로 캔버스 엘리먼트를 찾습니다:

var c=document.getElementById("myCanvas");

그 다음 컨텍스트 객체를 만듭니다:

var ctx=c.getContext("2d");

getContext("2d") 객체는 내장된 HTML5 객체로서 그리기 경로, 박스, 원, 글씨, 이미지 등등의 많은 메소드를 가지고 있습니다.

다음의 두줄로 빨간색 사각형을 그릴수있습니다:

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

fillStyle 메소드로 빨간색을 만들고 fillRect 메소드로 모양, 위치, 크기를 정합니다.



좌표 이해하기

위의 fillRect 메소드는 (0,0,150,75) 파라메터를 가지고 있습니다.

이것은 캔버스의 좌측상단 0, 0 에서 시작하는 150x75 크기의 사각형을 그리라는 의미입니다.

캔버스의 X와 Y의 좌표는 캔버스의 그리기 위치를 정하는데 쓰입니다.

좌표를 보려면 밑의 사각형에 마우스를 대보세요:

X
Y











캔버스 예제 더보기

캔버스 엘리먼트의 그리기 예제들입니다:

예제 - 선 (Line)

출발점과 종료점을 명시하여 선을 그립니다:


직접 해보기 »

예제 - 원 (Circle)

크기, 색깔, 위치를 지정하여 원을 그립니다:


직접 해보기 »

예제 - 그라디언트 (Gradient)

지정하는 색의 그라디언트 배경 그립니다:


직접 해보기 »

예제- 이미지 (Image)

캔버스에 이미지를 삽입합니다:


직접 해보기 »



HTML5 <canvas> 태그

태그설명
<canvas> 그래픽을 정의함

캔버스 2차원 (Canvas 2d) 참고자료

캔버스 객체에서 사용되는 모든 속성과 메소드에 관한 완전한 참고자료는 다음의 사이트를 방문해보세요.
complete canvas 2d reference.




Posted by K 얼바인
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 오디오 파일 재생의 표준을 지원합니다.


웹상에서의 오디오

지금껏 웹페이지에서 오디오 파일을 재생하는 표준이 없었습니다.

오늘날 대부분의 오디오 파일들이 플래시와 같은 플러그인을 통해 재생되고 있습니다. 하지만 브라우저마다 각각의 플러그인이 필요합니다

HTML5는 웹페이지에 오디오파일을 내장하기 위한 표준안을 새 엘리먼트에 정의하였습니다 : <audio> 엘리먼트.



어떻게 작동하나요

To HTML5로 오디오 파일을 재상하려면 이것만 있으면 됩니다:

예제

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

직접 해보기 »

재생, 일시정지, 볼륨과 같은 오
디오를 제어하기위한 속성들이 추가 되었습니다.

또한 <audio> 엘리먼트를 지원하지않는 브라우저를 위해 <audio>와 </audio> 태그 사이에 자막문구를 삽입해야합니다.

<audio> 엘리먼트는 복수개의 <source> 엘리먼트를 허용하는데 <source> 엘리먼트는 서로 다른 오디오 파일들을 링크할수있습니다. 브라우저는 첫번째로 인식한 포멧을 사용할것입니다.



오디오 포멧과 지원하는 브라우저

현재 <audio> 엘리먼트는 3가지 파일 포멧을 지원합니다: MP3, Wav, Ogg:

브라우저MP3WavOgg
인터넷 익스플로러 9 지원 비지원 비지원
파이어폭스 4.0 비지원 지원 지원
구글 크롬 6 지원 지원 지원
애플 사파리 5 지원 지원 비지원
오페라 10.6 비지원 지원 지원



HTML5 오디오 태그 (audio Tags)

태그설명
<audio> 음악 컨텐츠를 정의함
<source> <video> 나 <audio>와 같은 미디어 엘리먼트에 복수개의 미디어 리소스를 정의함 





Posted by K 얼바인
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 <video> - DOM으로 제어하기

The HTML5 <video> 엘리먼트도 메소드와, 프로퍼티와 이벤트를 가지고 있습니다.

예를 들면 메소드는 재생, 일시정지, 로딩을 위해 쓰이고, 프로퍼티는 기간, 볼륨, 찾기설정 등을 읽거나 설정하며

DOM 이벤트는 <video> 엘리먼트가 재생을 시작했다던가, 일시정지나 종료되었을때 등등을 당신에게 알려줄수 있습니다.

간단한 예제를 통해 어떻게 <video> 엘리먼트가 프로퍼티를 읽고 쓰고 메소드를 호출하는지 알아봅시다.
 

예제 1

비디오에 간단한 재생/일시정지 + 리사이즈 제어를 해봅시다:



빅 벅 버니 (Big Buck Bunny)의 영상을 일부 발췌하였습니다

위의 예제는  play() 와  pause() 두 메소드를 호출하였으며 paused, height, videoHeight의 세 프로퍼티가 사용되었습니다.

직접 해보기 »



HTML5 <video> - 메소드, 프로퍼티, 이벤트

다음 테이블은 대부분의 브라우저에서 지원하는 비디오 메소드, 프로퍼티 와 이벤트의 목록입니다:

메소드 (Methods)프로퍼티 (Properties)이벤트 (Events)
play() currentSrc play
pause() currentTime pause
load() videoWidth progress
canPlayType videoHeight error
  duration timeupdate
  ended ended
  error abort
  paused empty
  muted emptied
  seeking waiting
  volume loadedmetadata
  height  
  width  

Note: 비디오 프로퍼티중 videoWidth 와 videoHeight 이 두개만 바로 사용가능합니다. 다른 프로퍼티들은 비디오 메타데이터가 로딩된 후에 사용가능해집니다.



Posted by K 얼바인
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는 이를 위한 표준을 제공합니다.
 

당신의 브라우저가 HTML5 비디오를 지원하는지 확인하세요



웹에서의 비디오

현재까지 웹페이지에서 비디오/무비를 재생하는 표준은 없습니다.

오늘날 대부분의 비디오는 플래시와 같은 플러그인으로 보여집니다. 하지만 브라우저마다 다른 플러그인이 필요합니다.

HTML5는 웹페이지안에 비디오/무비를 내장하기위한 표준을 새 엘리먼트에 정의했습니다: <video> 엘리먼트.



어떻게 작동하나요

이것만으로 HTML5로 비디오를 볼수있습니다.:

예제

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

직접 해보기 »

재생, 멈춤, 볼륨등의 비디오 제어를 위한 제어속성들이 추가되었습니다.

폭과 넓이 속성을 항상 포함시키는게 좋습니다. 폭과 넢이를 정하면 비디오에서 사용될 공간이 페이지 로딩시에 할당되기때문입니다. 하지만 이 속성값들이 없다면 브라우저는 비디오의 사이즈를 알수가 없으므로 적절한 공간을 할당할수없습니다. 이것은 비디오가 로딩될 때 페이지의 레이아웃이 바뀌어 버리는 결과를 가져올수도 있습니다.

당신은 <video> 엘리먼트를 지원하지않는 브라우저를 위해 <video>와 </video>태그 사이에 자막컨탠츠를 삽입해야합니다.

<video> 엘리먼트는 여러개의 서로 다른 비디오 파일을 링크할수있게 복수개의 <source> 엘리먼트를 허용합니다. 브라우저는 맨처음 인식한 비디오 포맷을 사용할 것 입니다.


비디오 포맷과 지원하는 브라우저

현재 3가지 비디오 포맷인 <video> 엘리먼트에서 지원됩니다: MP4, WebM, 그리고 Ogg:

브라우저MP4WebMOgg
인터넷 익스플로러 9 지원 비지원 비지원
파이어폭스 4.0 비지원 지원 지원
구글 크롬 6 지원 지원 지원
애플 사파리 5 지원 비지원 비지원
오페라 10.6 비지원 지원 지원
  • MP4 = H264 비디오 코덱과  AAC 오디오 코덱을 사용하는 MPEG 4 파일 
  • WebM =  VP8 비디오 코덱과 Vorbis 오디오 코덱을 사용하는 WebM 파일
  • Ogg = Theora 비디오 코덱과 Vorbis 오디오 코덱을 사용하는 Ogg 파일



HTML5 비디오 테그

TagDescription
<video> 비디오나 무비를 정의함
<source> <video>나 <audio>와 같은 미디어 엘리먼트를 위한 복수개의 미디어 리소스를 정의함
<track> 미디어 플레이어내의 자막을 정의함





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





Posted by K 얼바인
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는 HTML의 차기 버전입니다.


HTML5란?

HTML5는 HTML, XHTML, HTML DOM의 새 표준입니다.

이전버전 HTML은 1999년에 나왔고 웹은 지금까지 수많은 진화를 거듭해왔습니다.

HTML5은 아직도 작업중이지만 대부분의 브라우저들은 어느정도 HTML5을 지원합니다
 


HTML5이 어떻게 시작됬나요?

HTML5는 WWW 컨소시움(W3C)과 WHATWG의 합작품입니다

WHATWG는 웹 폼과 어플리케이션쪽 일을 했었고 W3C는 2006년부터 XHTML2.0을 만들어왔습니다
이 둘은 새버전의 HTML을 같이 만들기로 결정했습니다

현재까지 만들어진 HTML5의 룰들은:

  • 새 기능은 HTML, CSS, DOM, 그리고 JavaScript 기반이어야 하며
  • 플래시같은 외부 플러그의 필요성을 줄이고
  • 에러처리를 향상 시키고
  • 스크림트를 대체할 마크업을 더 늘리고
  • HTML5 디바이스 독립적이어야하고
  • 개발과정이 투명하게 공개되어야 한다입니다


새 기능들

가장 신나는 HTML5의 새기능들을 꼽자보자면:

  • 드로잉을 위한 캔버스 엘리먼트
  • 미디어 재생을 위한 비디오와 오디오 엘리먼트
  • 로컬 장치들을 더 잘 지원하고
  • 상단, 하단, 빨리찾기, 섹션구분, 기사등과 같은 컨텐츠 특화된 엘리먼트
  • 캘린더, 날짜, 시간, 이메일, URL, 검색등과 같은 새로운 폼들


지원가능한 브라우저

HTML5은 아직 공식적으로 표준화되지않았기 때문 어떤 브라우저도 HTML5를 완벽하게 지원할수없습니다.

하지만 사파리, 크롬, 파이어폭스, 오페라, 인터넷 익스플로러같은 대다수의 브라우저들을 업데이트를 통해 지속적으로  HTML5의 새 기능들을 추가하고 있습니다.



 

Posted by K 얼바인
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)



각 장의 예제들

우리(w3c)가 제공하는 HTML 에디터를 통해 해당 예제의 HTML을 편집하고 버튼을 누르면 결과를 볼수있습니다

예제

<!DOCTYPE HTML>
<html>
<body>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

</body>
</html>

직접 해보기 »

"직접 해보기"를 누르면 어떻게 작동하는지 이해할수있습니다.


 

 

Posted by K 얼바인


티스토리 툴바