HTML5 canvas 엘리먼트(element)

웹표준/HTML5 훑어보기 2010.07.22 15:13

HTML5 canvas 엘리먼트(element)

canvas엘리먼트는동적그래픽을 구현한다. 단독으로 이 엘리먼트만으로 구현 되지 않는다.

스크립트를 동반해서 사용하여 구현하다.속성엘리먼트로는 가로세로를 지원한다.

간단한 예

<canvas width="300" heifgt="300">
 <p><img src="img_backup" alt=" "/></p>
</canvas>

자바스크립트에서는 아이디로 접근,그리고 getContext로 시작한다. 이예대한 예는 차후에 ....



설정

트랙백

댓글

HTML5 audio, source 엘리먼트(element)

웹표준/HTML5 훑어보기 2010.07.21 13:23

HTML5 audio, source 엘리먼트(element)

audio 엘리먼트가 사운드나 오디오 스티림을 제공하는 것은 잘알려진 것이고 video엘리먼트와 차이점은 사운드제공이니 속성엘리먼트 가로,세로, poster(첫화면 엘리먼트) 이것이 없다는 점이다.

<audio autoplay controls loop preload="" src="" ></audio>

source

source는 비디오, 오디오 엘리먼트의 자식엘리먼트이다. 비디오 오디오 엘리먼트의 경우 src 속성에 지정하다보니 하나밖에 지정할 수 밖에없다. source는 자식엘리먼트로 다수의 미디어소스를 지정하게한다. 하지만 본목적은 이들이 순차적이거나,선택적인것은 아니란접이다. 여러개를 스는이유는 적합한 경우(즉 브라우저나,코덱지원등에 따라)에 따라 지정된 것을 재생해주도록한다.


<audio controls>
 <source src="test_01.ogg" type="audio/ogg; media="screen"/>
 <source src="test_02.ogg" type="audio/ogg; codecs="vorbis" />
</audio>

설정

트랙백

댓글

HTML5 video 엘리먼트(element)

웹표준/HTML5 훑어보기 2010.07.20 13:52

HTML5 video 엘리먼트(element)

가장주목받는 엘리먼트 중 하나인 비디오(video)를 살펴보자. 오디오기능도 지원하며 가장 좋은점이라면 별도의 플러그인 없이 재생이 가능하다는 점일 것이다.

새로생긴것이니 간단한예부터 보자


<video autoplay controls loop height="" 
width=""  poster="" preload="" src="" ></video>

  • autoplay : 말그대로 자동플레이. 웹페이지에 들어가서 자동플레이하게된다
  • controls : 컨틑롤러 플레이, 멈춤 , 볼륨등의 인터페이스를 제공하게된다
  • loop : 루프 이값을 주면 무한반복 재생
  • height, width : 절절한 가로 세로 크기 입력
  • poster : 동영상이 재생되기전 까지 주소에 지정된 그림을 보여준다.
  • src : 비디오 파일의 주소 : 현재까지 지원되는 형식은 Ogg, MP4

적절한 동영상을 구하지못해 실행시 그림만 올린다.

마지막으로 비디오 엘리먼트내부에 작성될 것은 설명을 위한 텍스트라던가 비디오 재생 불가시 다운받을수 있도록하는 것들이 있겠다.



설정

트랙백

댓글

HTML5 input 엘리먼트와 새로운 type

웹표준/HTML5 훑어보기 2010.07.15 13:04

HTML5 input 엘리먼트와 새로운 type

html5에서 많은 타입이생겼다 기존에 있던것은 생략하고 새로생긴것을 살펴보자. 명확성이 강조 되었다고 보면 된다.오페라 프라우저에서 대부분 지원한다.

결과를 당장보려면 여기로 http://sianasiatiger.cafe24.com/study/5_html_input.html

<p><label>찾아보기:<input type="search"  /></label></p>
<p><label>천화번호:<input type="tel"  placeholder="02)123-4567" /></label></p>
<p><label>주소:<input type="url" /></label></p>
<p><label>이메일:<input type="email" multiple /></label></p>

위의것은 간단한예 대부분우리가 기존에 입력하던 텍스트 타입이 명확하게 분류되었다.search는 찾아볼떄 tel은 전화번호 입력으로 특정한 입력 방식은 없지만  placeholder로  입력값 힌트를 준다. 위의 예는 xx)xxx-xxxx방식으로 입력하라고 예를들어주고있다.url은 경로주소 입력 email은 이메일로 multiple입력으로 콤마로 여러개 입력가능하게 해준다.

년,월,날짜,시간

date의 경우 달력이 나온다! 오페라에서 확인가능. step속성은 달력중 날짜인데.. 4를 입력시 4의배수만 지정할수있다. 출력에서 선택될 수도 있고, 2010-07-15 이형태로 입력도 가능하다. month역시 마찬가지 단지 날짜를 정하지 않는다. time의 경우는 12:34:56:123 형식이다.시분초 1/1000 여기서step속성은 초를이야기한다.

<p><label>년월날짜:<input type="date" step="4" /></label></p>
<p><label>년월:<input type="month" step="2" /></label></p>

step속성의 차이

시간에서 디폴트값은 60이다. 아래 예와같이 step값에따라 소수점자리 까지 입력가능하다.

<p><label>시간:<input type="time"  step="60" /></label></p>
<p><label>시분초:<input type="time"  step="1" /></label></p>
<p><label>시분초.소수:<input type="time"  step="0.1" /></label></p>

위의 그림은 오페라에서의 실행 결과 이다

그외

<p><label>UTC일자:<input type="datetime"  /></label></p>
<p><label>지역별:<input type="datetime-local"  /></label></p>
<p><label>주:<input type="week" step="1" /></label></p>

<p><label>숫자:<input type="number"step="1"  /></label></p>
<p><label>범위임력 스크롤:<input type="range"  />크롬사파리오페라</label><

<p><label>색깔:<input type="color"  /></label></p> 

<p><label>파일:<input type="file" /> 파폭크롬오페라</label></p>

datetime : UTC 방법으로 일자를 표시한다. week : 한주를 입력할떄

range : 스크롤로 범위를보여준다.

file:입력할파일을 열게한다.


설정

트랙백

댓글

HTML5 meter 엘리먼트(element)

웹표준/HTML5 훑어보기 2010.07.14 16:24

HTML5 meter 엘리먼트(element)

현재의 상태가어느정도인지보여줄때 사용한다. 아래의 3개의 예는 같은뜻을 다른 방법으로 표현한 것이다.


<meter value="0.75"><img src="" alt=""></meter>
<meter value="6" max="8">6/8</meter>
<meter min="0" max="100" value="75" >75/100</meter>

1. 첫번째는 그림으로 철도를 보여주고 value로 현재상태를나타 내었다.

2. 두번째는 최대값을 8으로 잡아주고 value로 현재상태를나타 내었다.

3. 세번째는 최대(max) 최소값(min)을 잡아주고 value로 현재상태를나타 내었다.


설정

트랙백

댓글

HTML5 output 엘리먼트(element)

웹표준/HTML5 훑어보기 2010.07.14 16:03

HTML5 output 엘리먼트(element)

output 엘리먼트는 계산결과를 표현한다.

아래는 a + b = z 형식의덧셈결과를 결과를 보여준 예이다.


<form onsubmit="return false">
 <input name="a" type="number" step="any"> +
 <input name="b" type="number" step="any"> =
 <output onforminput="value = a.valueAsNumber + b.valueAsNumber">답</output>
</form>

현재는 오페라만 지원되다.아래는 오페라에서 캡쳐한것

http://sianasiatiger.cafe24.com/study/Html5_Formlink.html


설정

트랙백

댓글

HTML5 keygen 엘리먼트(element)

웹표준/HTML5 훑어보기 2010.07.14 15:42

HTML5 keygen 엘리먼트(element)

keygen은 비밀키와 공개키를 생성한다


<form id="test" action="test.php" method="post">
<p><keygen name="key"/></p>
<p><input type=submit value="Submit key..."/></p>
</form>

속성을 살펴보자

<keygen name="key" form="test" keytype="">

http://100.naver.com/100.nhn?docid=770223

form : form과 연계시킬떄사용한다 대상이될 form의 #id를 적는다.
keytype : 키타입을 지정한다 디폴트값은 rsa

rsa참조 : http://100.naver.com/100.nhn?docid=770223


설정

트랙백

댓글

HTML5 datalist 엘리먼트(element)

웹표준/HTML5 훑어보기 2010.07.14 15:25

HTML5 datalist 엘리먼트(element)

datalist 엘리먼트는 option엘리먼트 세트를 표현할 때 사용한다.
select와 차이점은 바로 표시되어나타나지않고 포커스 했을떄 나타난다.


<input type="text" list="test" />
<datalist id="test">
 <option value="어쩌고저쩌고">어쩌고저쩌고</option>
 <option value="dlfjgrhwjfjgrh">dlfjgrhwjfjgrh</option>
</datalist>



설정

트랙백

댓글

HTML5 form 엘리먼트(element)와 form 관련 엘리먼트

웹표준/HTML5 훑어보기 2010.07.14 15:12

HTML5 폼(form)과 관련 엘리먼트

html5에서 form엘리먼트와 그외 관련된것 들을 살펴본다.변경과 새로 적용된 속성 엘리먼트를 살펴본다.

form


<form action="" autocomplete enctype="" 
method="" name="" novalidate target="">
</form>


폐지된것은 없다 추가된것은 두가지이다.
autocomplete : 말그대로 자동완성 input엘리먼트에 입력한 값과 일치하는것이있다면 흔히 네이버같은 포탈 사이트에서 보듯이 일치하는값을 리스트로 표시한다.
novalidate : 폼을 전송할때 데이타의 적절성여부를 확인한다. 이속성을 사용하면 데이터를 체크하지않는다.

fieldset


<fieldset></fieldset>

폼을 필요에따라 그룹화 시킨다 달란진것없음.디폴트로는 박스로 border가만들어짐

legend


<legend></legend>


fieldset안에서 캡션(caption)과 같은역할.즉 폼에서 목적을 분명히 하기위해사용한다.

label


<label></label>

1)label안에 작성한경우
<p>
<label><input type="text" />어저고</label>
<label><input type="text" />어저고</label>
</p>
2)for엘리먼트로 id를지칭하고 관련시켜준다 이쪽을 추천
<p>
 <label for="TEST">어저고</label>
 <input id="TEST" type="text" />
</p>

button

<button></button>

새롭게 많이 생겨났는데. 각각 살펴볼필요없고
그전에 form엘리먼트 안에 button엘리먼트에서 별도로 기능이 수행 가능하게 되었다고
보면된다. 그리고 form보다 button엘리먼트 의 수행이먼저 처리된다.
다음은 form과 button에서의 동일 역할 수행의 속성 엘리먼트 비교이다.

action  :   Formaction
enctype : Formenctype
method :  Formmethod
novalidate : Formnovalidate
target :  Formtarget


button엘리먼트 의 속성엘리먼트는 Form만 붙여주면된다.

select,optgroup,option



<select> 
 <optgroup label="먼저">
  <option value="1">A</option>
  <option value="2">B</option>
  ...
  </optgroup> 
   <optgroup label="후에">
...
  </optgroup> 
</select>

달라진점은 select에 autofocus가추가된점 문서가 로딩 되었을떄 엘리먼트에 커서가 위치하며
 따라서 바로입력할수있다. 이것은 textarea,input, button에도 적용된다.

textarea


<textarea placeholder="" required ></textarea>


방명록, 댓글 등 흔히 텍스트를 남길 때 사용하한다.
placeholder는 겂을 입력할때 도움을 주는 힌트로 단어또는 짧은 문장을 사용한다
required 필수입력할때 사용한다.이속성이사용되면 반드시 입력해야 된다는 뜻이다.


설정

트랙백

댓글

HTML5 table 엘리먼트(element)

웹표준/HTML5 훑어보기 2010.07.13 19:09

HTML5 table 엘리먼트(element)

테이블의 경우 크게 변한것 없다. 일단 그전에 올린 포스팅을 참조하자 여기것이 거의 그 대로이다.

웹표준 테이블 코딩 2009/9

웹표준 테이블 코딩 좀더 보완 2010/7

대부분의 속성엘리먼트가 CSS로 대체하도록 되었고 남은 속성엘리먼트는 summury, span정도이다.

테이블 네임의 작성형태

테이블엘리먼트에서 별 다를 바가 없으나 다른 엘리먼트추가로 약간 테이블 설명에 변화를 줄 수 있다.

월드 와이드웹 홈에서 참고http://dev.w3.org/html5/spec/Overview.html#the-table-element

먼저 흔히 사용해오던 방법 captionstrong으로 강조하고 있다.


<table>
<caption>
<strong>Characteristics with positive and negative sides.</strong>
  <p>Characteristics are given in the second column, with the
  negative......side in the right column.</p>
 </caption>
<thead>

detail엘리먼트로 보완하는 방법


<caption>
  <strong>Characteristics with ....gative sides.</strong>
  <details>
   <summary>Help</summary>
   <p>Characteristics are given in the second column, with the
   negative side in t......column.</p>
  </details>
</caption>

figure엘리먼트로 설명


<figure>
 <figcaption>Characteristics.....d negative sides</figcaption>
 <p>Characteristics are given in the second column, with the
 negative side in the left column....column.</p>
 <table>
  <thead>
   ......
    <td> Passing
 </table>
</figure>

figure엘리먼트에 figcaption엘리먼트로 설명


<figure>
 <figcaption>
  <strong>Character......ve sides</strong>
  <p>Characteristics are given in the second column, with the
  negative side in the le......column.</p>
 </figcaption>
 <table>
  <thead>
 ......
    <td> Passing
 </table>
</figure>


이 중에 어느 방법을 사용하냐는 때에 따라 다르며, 기본적으로 단순한 표(table)의 경우 captionstrong을 사용 하도록 권유하고 있다.


설정

트랙백

댓글


티스토리 툴바