Canvas

http://muro.deviantart.com/

Video


http://craftymind.com/factory/html5video/CanvasVideo.html

http://www.craftymind.com/factory/html5video/CanvasVideo3D.html



SVG


http://svg-wow.org/alternate-stylesheet/alternate-stylesheet.xhtml

http://svg-wow.org/text-effects/text-effects.xhtml

http://o.sitepen.com/labs/code/cssDock/



Form


http://www.ibare.kr/html5/form.html



CSS3


http://www.romancortes.com/blog/pure-css-coke-can/ , 너무나 유명한 퍼포먼스

http://css-tricks.com/examples/CSS3Clock/

http://www.paulrhayes.com/experiments/cube-3d/index.html

http://www.paulrhayes.com/experiments/cube/multiCubes.html

http://www.paulrhayes.com/experiments/accordion/#one

http://www.gethifi.com/blog/nicer-navigation-with-css-transitions#



API


http://html5demos.com/web-socket

http://html5demos.com/storage

http://html5demos.com/drag

http://www.html5rocks.com/tutorials/dnd/basics/

http://maxheapsize.com/static/html5geolocationdemo.html

Geolocation API

http://code.google.com/intl/ko/apis/gears/api_geolocation.html

DEMO

http://html5demos.com/geo

HTML 5  강좌

http://html5.creation.net/html5-guide.pdf


출처 - http://www.ibare.kr/tc/category/9  제가 조금 추가함

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, high-dpi-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />

메타 태그 추가

주소 올리기

window.addEventListener('load', function() {
   setTimeout(loaded,100);
  }, false);

  function loaded(){
   window.scrollTo(0, 2);
  }


 // window.scrollTo(0, 1); 로 줘도 되지만 갤2가 주소가 끝까지 안올라갈때가 있는데 2 로 주니 잘올라가서 0, 2 저는 합니다.~

Notice - data-role=page 처럼 event 를 페이지 전체를 줄 수 있고 div 영역으로 줘서 영역에서만 이벤트를 발생시킬 수 있습니다.
아래 소스는 자바스크립트 배열에 이미지 정보를 전부 넣은다음 커버플로우로 이미지 바꾸는 샘플 소스 입니다.

$("[data-role=page]").bind("swipeleft", function (event)
  {
   imgNum++;
   if (imgNum > cnt-1){
    imgNum = 0;
   }
   // id 값으로 이미지를 바꿈
    $('#imgSrc').attr('src', imgArr[imgNum]);
   changeBtn(imgNum);
  });

  // 오른쪽 액션 콜백
  $("[data-role=page]").bind("swiperight", function (event)
  {
   imgNum--;
   if (imgNum < 0){
    imgNum = cnt-1;
   }
    $('#imgSrc').attr('src', imgArr[imgNum]);
    changeBtn(imgNum);
  });

eq() 함수는 dom 객체에서 인덱스로 접근 하는 함수 이다...

 ex)
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

$("body").find("div").eq(2).addClass("sel");
굳이 해석 하자면 dom body 에서 div 태그를 찾아서 .eq(2) 배열의 2번째 div 에 css class sel 를 추가하라 ㅋㅋ

배열2 번째면 0 부터 이니 <div>3</div> 이 선택 됨  이제 이놈 가지고 지지고 볶으면 될듯

$('.divId'+i).slideDown('normal'); // 메뉴 펼치기 파라미터 숫자 속도

 $('.divId'+i).slideUp();  // 메뉴 접기

jQuery  . 으로 시작하는 것은 class  - # 으로 시작하는 것은 ID 입니다.

for  문등을 이용하여 복수의 메뉴를 접고 펼칠 수 있습니다. ex)  $('.divId'+i). divId1 이런식으로

아이디 지정 시 번호를 매겨서 활용

초간단 jQuery 지만 유용하게 써먹을 수 있음

// jquery ajax
 //body onload 과 같은 효과 굳이 html 에 안써줘도 자동 콜백
 $(document).ready(function(){
  var yes = "y";
  var param = "babo=" + yes;
  $.ajax({
   type:"GET",
   url:SERVICE_URL+"/study/ajax.jsp",
   data:param,
   success:function(msg){
   ajax_data_area.innerHTML = msg;
   }
  });
 });
//=======끝 jquery 개 깔끔
// jQuery js 파일 있어야 함

//----------------------------------------------
// 보통 ajax  body="onload" 로 초기 실행
 function onStartDom(){
  // httpRequest.js  SERVICE_URL <--url 상수 
  var yes = "y";
  var param = "babo=" + yes;  //파라미터는 이런식으로 2개 이상일때 "&param="  1개일때 ?제외
  sendRequest(SERVICE_URL+"/study/ajax.jsp", param, a_callBack, "GET");
  }
 
 //ajax 콜백 메소드
 function a_callBack(){
  // 알지? 200 코드일때 들어오기
  if(httpRequest.readyState == 4){
   if(httpRequest.status == 200){
    var htmlDoc = httpRequest.responseText;
    // div id ajax_data_area 에 데이터 넣기
    ajax_data_area.innerHTML = htmlDoc;
   } else {
    
   }
  }
 }
//------------------------------------------------------

var SERVICE_URL = '상수 url';

function getXMLHttpRequest(){
 if(window.ActiveXObject){
  try{
   return new ActiveXObject("Msxml2.XMLHTTP");
  }catch(e){
   try{
    return new ActiveXObject("Microsoft.XMLHTTP");
   }catch(e1){
    return null;
   }
  }
 }else if(window.XMLHttpRequest){
  return new XMLHttpRequest();
 }else{
  return null;
 }
}
var httpRequest = null;

function sendRequest(url, params, callback, method){
 httpRequest = getXMLHttpRequest();
 var httpMethod = method ? method : 'GET';
 if(httpMethod != 'GET' && httpMethod != 'POST'){
  httpMethod = 'GET';
 }
 var httpParams = (params == null || params == '') ? null : params;
 var httpUrl = url;
 if(httpMethod == 'GET' && httpParams != null){  
  httpUrl = httpUrl + "?" + httpParams;
 }
 httpRequest.open(httpMethod, httpUrl, true);
 httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 httpRequest.onreadystatechange = callback;
 httpRequest.send(httpMethod == 'POST' ? httpParams : null);
}