태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.

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)



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 얼바인


티스토리 툴바