[HTML5강좌] 14. Web Storage by 우정환

프로그램&DB/HTML5 2011. 8. 2. 01:06 Posted by Josep.H.S
이젠 Web Storage 를 살펴보려 합니다.

다음의 내용과 소스는
혁명을 꿈꾸다 HTML5 & API 입문
앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS
을 참고 하였습니다.

Offline Web Application 과 비슷하게 갑자기 전원이 꺼진다거나 다시 PC 를 켰을때 이전에 작업한 데이터를 보존할수도 있고, 웹메일을 Web Storage 에 저장해 두었다가 읽는다거나, 서버의 많은 정보를 Client 에 저장해 둘 수 있습니다.

Web Stroage 는 Client 의 disk 에 소량의 데이터를 저장하기 위한 Storage로 이전까지는 Cookie 를 사용했습니다만 Cookie 와는 다음과 같은 몇가지 다른 점이 있습니다.
크기에 제한이 없음. Cookie 는 4KB 로 제한이 있지만 Web Storage 는 제한이 없습니다.
서버로 보내지지 않음. Cookie 는 HTTP Request 에 의해서 자동으로 서버에 전송이 되었지만 Web Storage 는 서버로 전송되지 않습니다.
유효기간의 제한이 없음. Cookie 처럼 특정기간이 지나면 자동으로 삭제되지 않습니다.
JavaScript 객체를 저장할 수 있음. JavaScript 객체를 저장할 수 있습니다.

Web storage 는 Web Browser 마다 별도로 가지고 있는 저장 공간에 Data 를 Key-Value 형식으로 저장합니다.

Web Storage 는 용도에 따라서 Local Storage 와 Session Storage 로 나뉘는데요. 두 Storage 의 차이는 저장기간이나 유효범위만 다를 뿐 거의 같은 API 를 사용합니다.

그럼 Local Storage 부터 살펴보도록 하겠습니다.

14-1. Local Storage
Local Storage 는 저장기간에 제약이 없고 Web Site 의 Domain 에 따라서 생성되는 Storage 입니다.
저장기간도 사용자가 삭제하기 전까지 영구적으로 저장할 수 있습니다. 그렇기 때문에 기존의 Cookie 를 이용한 저장작업을 Local Storage 가 대신하기에 충분합니다. 거기다 Server 측과의 통신작업도 없기때문에 Client 들이 더욱 좋아라 하리라 생각합니다. Server 측에 부하도 주지 않으니 더욱...

그럼 그 사용법을 한번 보기로 하죠.
먼저 Web Browser 가 Local Storage 를 지원하는지 Check 해 봐야 할 것입니다.

<script type="text/javascript">
if(!window.localStorage) {
document.write('이 Browser 는 Local Storage 를 지원하지 않습니다.');
} else {
.....
};
</script>

이젠 저장하는 방법을 보겠습니다.

<script type="text/javascript">
if(!window.localStorage) {
document.write('이 Browser 는 Local Storage 를 지원하지 않습니다.');
} else {
localStorage.setItem("NickName", "woojja");
};
</script>

저장을 했으니... 가져와야겠죠?

<script type="text/javascript">
if(!window.localStorage) {
document.write('이 Browser 는 Local Storage 를 지원하지 않습니다.');
} else {
localStorage.setItem("NickName", "woojja");
alert(localStorage.getItem("NickName"));
};
</script>

지우고 싶다고요? ㅋㅋ

<script type="text/javascript">
if(!window.localStorage) {
document.write('이 Browser 는 Local Storage 를 지원하지 않습니다.');
} else {
localStorage.setItem("NickName", "woojja");
alert(localStorage.getItem("NickName"));
localStorage.removeItem("NickName");
};
</script>

하나하나 지우지 말고 말끔히 지우실랍니까? ㅋㅋ

<script type="text/javascript">
if(!window.localStorage) {
document.write('이 Browser 는 Local Storage 를 지원하지 않습니다.');
} else {
localStorage.setItem("NickName", "woojja");
alert(localStorage.getItem("NickName"));
localStorage.removeItem("NickName");

localStorage.clear();
};
</script>


쉽죠? 쉽죠? ㅋㅋㅋ
너무 쉬운건 매력없잖아효? ㅋㅋㅋ
이번엔 조금 다른 방법을 살펴보도록 하겠습니다.

저장할 때는

localStorage.setItem("NickName", "woojja");
localStorage.NickName = "woojja";
localStorage["NickName"] = "woojja";

가져올 때는
var NickName = localStorage.getItem("NickName");
var NickName = localStorage.NickName;
var NickName = localStorage["NickName"];

지울 때는
localStorage.removeItem("NickName");
delete localStorage.NickName;
delete localStorage["NickName"];

와 같은 방법으로 사용을 합니다.

전체 Storage Data 에 대해서
for(var i=0; i<localStorage.length; i++) {
var key = localStorage.key(i);
var value = localStorage[key];
...
}

또는
for(var key in localStorage) {
var value = localStorage[key];
...
}

이렇게 접근해서 사용할 수 있습니다.


Session Storage 도 사용 방법은 다르지 않습니다.
내용에 약간의 차이가 있을 뿐인데요...
그럼 이번엔 Session Storage 를 살펴보도록 하겠습니다.

14-2. Session Storage
Session Storage 는 Local Storage 와 같이 도메인마다 생성이 되지만 Browser Window 의 유효범위와 생존기간을 갖습니다.
그래서 Local Storage 와는 다르게 Browser Window가 닫히면 Session Storage도 같이 삭제됩니다.
그럼 Browser Window를 복제하면 어떻게 될까요?
예상은 하고 계시겠지만, 복제된 순간까지는 Session Storage 의 내용은 같겠지만 그 이후의 내용은 서로에게 아무런 영향을 주지도 않고 별개의 Storage 로 작동하게 됩니다.
이런 특징을 갖는 Session Storage 는 사용자의 동작을 추적하여 기록할 때 사용할 수 있다고 합니다.

Session Storage 의 사용은 Local Storage 와 같다고 말씀을 드렸는데.
단지 localStorage 를 sessionStorage 객체로 바꿔 사용하시기만 하면 됩니다.

14-3. Storage Event Handling
Storage 는 Storage 의 변경에 대해서 window 객체가 Storage Event 를 발생시킵니다.
다음 표는 그 Event 가 가지고 있는 속성들 입니다.
속성 설명
key 변경된 Key, clear() Method 가 호출되면 null 을 반환한다.
oldValue 변경되기 전의 값(복사본). 새로운 키로 값을 등록하였다면 null.
newValue 변경된 후의 값(복사본). 값이 삭제되었을 때는 null.
url Event 가 발생한 문서의 URL.
storageArea 변경된 Storage 참조.

14-4. 예제
아래 예제는 LocalStorage 에 대한 내용입니다.
신기하게도 그대로 남아 있네요... (당연한거겠지만요... ㅋㅋ)
<!DOCTYPE html>
< html lang="ko">
     <head>
               <meta charset="utf-8" />
      <title>간단 메모지</title>
            <script type="text/javascript">
                function saveText() {
                    info = document.getElementById("info");
                    info.style.display = "block";
                    localStorage.setItem("memo", msg.value);
                };
                function pageload() {
                    msg = document.getElementById("txtBox");
                    msg.value = localStorage.getItem("memo");
                };
                function clr() {
                    msg.value = "";
                    localStorage.clear();
                    info.style.display = "none";
                };
             </script>
     </head>
     <body onload="pageload()">
            <h2>간단한 메세지</h2>
            <textarea id="txtBox" onKeyDown="saveText();" onKeyUp="saveText();" cols="50" rows="5"></textarea><br/>
            <input type="button" value="메모지 비우기" onClick="clr();" onKeyUp="clr();" />
            <p id="info" style="display:none;">메모내용이 자동 저장되었습니다.</P>
     </body>
< /html>

LocalStorage_01.jpg

 


다음 예제는 session Storage 에 대한 내용입니다.
값을 두개 넣고 난후 윈도우 창을 복제하였습니다.
그리고 두번째 생긴 Window 에서 값을 넣어 본 것입니다. 두개의 storage 가 별개라는 것을 말씀드리려 한 것이죠..

<!DOCTYPE html>
< html lang="ko">
    <head>   
            <meta charset="utf-8" />
      <title>Session Storage Viewer</title>
     </head>
     <body onload="ShowAll()">
            <h1>Session Storage Test</h1>
            키 : <input id="k" type="text"> 값 : <input id="v" type="text">
            <button onclick="Save()">저장</button>
            <button onclick="Remove()">삭제</button>
            <button onclick="window.open(location.href);">윈도우 생성</button>
            <hr>
            <select id="entries" size=5 onchange="onEntrySelected()">
            </select>
            <button onclick="ShowAll()">다시 표시</button>

            <script type="text/javascript">

                var key = document.getElementById("k");
                var value = document.getElementById("v");
                var entries = document.getElementById("entries");

                function ShowAll() {
                    entries.innerHTML = "";
                    for (var i=0; i < sessionStorage.length; i++ )
                    {
                        var k = sessionStorage.key(i);
                        entries.options[entries.options.length] = new Option(k + ":" + sessionStorage[k], k);
                    }
                };

                function Save() {
                    sessionStorage[key.value] = value.value;
                    ShowAll();
                };

                function Remove() {
                    delete sessionStorage[key.value];
                    ShowAll();
                };

                function onEntrySelected() {
                    var selectedOption = entries.options[entries.selectedIndex];
                    key.value = selectedOption.value;
                    value.value = sessionStorage[selectedOption.value];
                };
             </script>

     </body>
< /html>

sessionStorage_01.jpg

오늘은 Web Storage 에 대해서 살펴 보았습니다.

잘 기억해 두시기 바랍니다.
이젠 Cookie 보다는 이 두녀석을 사용하시는 걸 고려하실 날이 머지 않았으니 말이죠...


HTML5 시리즈 강좌 리스트
[HTML5강좌] 1. HTML5 개요
[HTML5강좌] 2. HTML4 vs HTML5 (1)
[HTML5강좌] 3. HTML4 vs HTML5 (2)
[HTML5강좌] 4. Sementic Element (1)
[HTML5강좌] 5. Sementic Element (2)
[HTML5강좌] 6. Strong Web Form
[HTML5강좌] 7. Rich Text Edit API
[HTML5강좌] 8. Video Element
[HTML5강좌] 9. Audio Element
[HTML5강좌] 10. Canvas Element
[HTML5강좌] 11. Drag & Drop API
[HTML5강좌] 12. Offline Web Application
[HTML5강좌] 13. Communication API
[HTML5강좌] 14. Web Storage
[HTML5강좌] 15. Web SQL Database
[HTML5강좌] 16. Web Worker
[HTML5강좌] 17. Web Socket
[HTML5강좌] 18. Geolocation API
[HTML5강좌] 19. SVG
[HTML5강좌] 20. File API



HTML5 동영상 강좌 리스트
[HTML5 동영상 강좌] 1. HTML 5 개요
[HTML5 동영상 강좌] 2. HTML4 vs HTML5 (1)
[HTML5 동영상 강좌] 3. HTML4 vs HTML5 (2)
[HTML5 동영상 강좌] 4. Sementic Element (1)
[HTML5 동영상 강좌] 5. Sementic Element (2)
[HTML5 동영상 강좌] 6. Strong Web Form
[HTML5 동영상 강좌] 7. Rich Text Edit API
[HTML5 동영상 강좌] 8. Video Element
[HTML5 동영상 강좌] 9. Audio Element
[HTML5 동영상 강좌] 10. Canvas Element
[HTML5 동영상 강좌] 11. Drag & Drop API
[HTML5 동영상 강좌] 12. Offline Web Application
[HTML5 동영상 강좌] 13. Communication API
[HTML5 동영상 강좌] 14. Web Storage
[HTML5 동영상 강좌] 15. Web SQL Database
[HTML5 동영상 강좌] 16. Web Worker
[HTML5 동영상 강좌] 17. Web Socket
[HTML5 동영상 강좌] 18. Geolocation API
[HTML5 동영상 강좌] 19. SVG
[HTML5 동영상 강좌] 20. File API



그럼 행복한 고수되십시요...

[출처] SQLER.COM http://www.sqler.com/396857

woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

 

'프로그램&DB > HTML5' 카테고리의 다른 글

[HTML5강좌] 16. Web Worker by 우정환  (0) 2011.08.02
[HTML5강좌] 15. Web SQL Database by 우정환  (0) 2011.08.02
[HTML5강좌] 13. Communication API by 우정환  (0) 2011.08.02
[HTML5강좌] 12. Offline Web Application by 우정환  (0) 2011.08.02
[HTML5강좌] 11. Drag & Drop API by 우정환  (0) 2011.08.02

[HTML5강좌] 13. Communication API by 우정환

프로그램&DB/HTML5 2011. 8. 2. 01:05 Posted by Josep.H.S
이젠 Communication API 를 살펴보려 합니다.

다음의 내용과 소스는 웹혁명을 꿈꾸다 HTML5 & API 입문 을 참고 하였습니다.

Communication API 는 MessageEvent 라고 하는 javaScript 객체나 문자열을 비동기방식으로 주고 받음으로써 여러프로그램간의 데이터를 공유하게 합니다.
이러한 방식은 다음에 살펴보게될 Web Worker 나 Server-Sent Event 등에서도 사용하는 방식입니다. 공통의 API 를 사용한다는 점이 장점이라고 할 수 있습니다.

13-1. MessageEvent
그럼 Communication API 의 중심인 MessageEvent 부터 살펴보도록 하겠습니다.

앞에서도 말한바와 같이 MessageEvent 는 두 지점간에 주고 받는 메세지를 말하는데요. Javascript 객체입니다.
그리고 다음과 같은 속성을 가지고 있습니다.

속성 설명
data 송신되는 Message 의 내용이 되는 데이터
origin Message 송신처의 Domain (Cross Document Messaging 과 Server Sent Event 에서만 사용)
lastEventId 마지막 Event ID (Server Sent Event 에서만 사용)
source Message 를 보내는 Windows 객체(Cross Document Messaging 에서만 사용)
ports Message 송신시 지정한 포트의 복사본

13-2. Cross Document Messaging
Cross Document Messaging 을 사용하면 둘 이상의 웹페이지가 서로 데이터를 주고 받을 수 있습니다.
가장 큰 특징은 다른 도메인간의 통신이 가능해 졌다는 것입니다. 도메인간의 통신이 가능해진만큼 보안에 특히나 신경을 써야겠지요? 확인하는 방법도 함께 구현해야 할 것입니다.
구현도 간단해서 수신측 Window 의 postMessage() Method 를 호출하고 수신하는 곳에서는 자신의 window 에 대해 onmessage Event Handler 를 지정하면 됩니다.

소스를 보는 것이 더 편할 듯하죠? ㅋㅋㅋ
일단 이녀석들을 구현하기 위해서 웹서버에 Site 를 두개 만들었습니다.
구성은 아래그림과 같습니다.

communication_01.jpg

 


비슷해 보이지만 위의 사이트에는 iframe Tag 를 포함한 index.html 페이지가 있습니다.
위 사이트는 8880번 포트를 사용하고 있구요...

아래에는 iframe 의 Source 가 되는 페이지인 frame.html 파일이 있습니다.
아래 사이트는 8881번 포트를 사용하고 있습니다.

communication_02.jpg

 


시나리오는 이렇게 흘러갑니다. index.html 페이지에서 타이머를 돌려서 매 초당 한번씩 계속 iframe 의 Source 인 frame.html 페이지에 데이터를 전송할 겁니다.
당연히 frame.html 에 데이터가 갱신되겠죠? ㅋㅋㅋ
그럼 소스를 보겠습니다.

index.html 페이지의 내용입니다.
<!DOCTYPE html>
< html lang="ko">
   <head>
          <meta charset="utf-8" />
          <title>Communication API 예제</title>

          <script type="text/javascript">
              function init() {
                  //1초마다 IFrame 에 메시지를 보냄
                  setInterval(Send, 1000);
              }

              function Send(){
                  var ifrm = document.getElementById("ifrm");
                  var MyOrigin = location.protocol + "//" + location.host;
                  var date = new Date();
                  var dateStr = date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
                  var number = Math.floor(Math.random() * 100);                        
                  ifrm.contentWindow.postMessage({date:dateStr, number:number}, "http://localhost:8881");
                  document.getElementById("msg").innerHTML = dateStr + " 생성된 값은 '" + number + "' 입니다. <br/> MyOrigin : " + MyOrigin;
           }
           </script>
   </head>
   <body onload="init();">
       <div id = "msg">8880<br/>MyOrigin</div>          
       <iframe id="ifrm" src="http://localhost:8881/communicationAPI/frame.html" width=500 height=200></iframe>
   </body>
< /html>

네 그럼 이제 받는 녀석의 내용도 봐야겠지요?
frame.html 페이지의 내용입니다.
<!DOCTYPE html>
< html lang="ko">
   <head>
    <meta charset="utf-8" />
    <title>Communication API 예제</title>
          <script type="text/javascript">

           var MyOrigin = http://localhost:8880;
           window.addEventListener("message", function(e){
                          if(e.origin==MyOrigin) {
                              document.body.innerHTML = "<div>e.origin : " + e.origin + " <br/> " + e.data.date + " : 송신된 값은 " + e.data.number + " 입니다.</div>";
                          }
                      }, false);

          </script>
   </head>
   <body>    
    <div id = "msg"></div>
  8881
   </body>
< /html>
위 Markup 에서 가장 중요한 부분은 addEventHandler 도 있지만
바로 "e.origin==MyOrigin" ... 이 부분... 이 부분입니다.
이렇게 보낸측의 Domain 을 확인하지 않는다면 위와 같이 대상 사이트를 iframe 에 담고 postMessage() 로 계속해서 메세지를 보내는 것도 가능할 것입니다. (내가 악의적 코드를 만든거였던거에요?ㅋㅋㅋ)
이런 보안적으루다가 취약한 점이 있으므로 반드시 받는 쪽에서는 보낸곳의 Domain 을 확인해야 할 것입니다.

 

communication_03.jpg

 


안타깝게도 ie9 에서는 data 값을 제대로 인식을 못하네요... ㅡㅡ' (실망이야~~ ㅋㅋㅋ)


13-3. Channel Messaging
이번엔 Channel Messaging 에 대해서 살펴보죠...
Channel Messaging 은 다대다 메세지 통신을 실현하기위한 API 입니다.

MessageChannel 이라는 Channel 을 통해 Message 를 송수신하게 되는데요. Message 의 출입구가 되는 Channel 에는 두개의 Port가 있어서 Port1 에 수신된 Message 는 Port2 로 Port2 에 수신된 Message 는 Port1 으로 전달됩니다.

이런 각각의 Port 는 MessagePort 라는 Type 의 Object 로 다음과 같은 Method 와 속성을 가집니다.
Method 명 설명
start() Port 를 사용할 수 있게 합니다. 두개의 Port 모두 Start 해주어야 합니다.
close() Port 를 사용할 수 없게 합니다.
PostMessage Port 에 Message 를 보냅니다. 보낸 Message 는 상대편 Port 로 부터 읽어들여집니다.
onmessage Port 에 Message 가 도착하면 이 속성에 지정된 Event Handler 가 호출됩니다.

그럼 예제를 만나보도록 하겠습니다.
<!DOCTYPE html>
< html lang="ko">
<head>
   <meta charset="utf-8" />
    <title>Channel Messaging 예제</title>
          <style>
              .messageLog{
                  width:200px;height:200px;
                  overflow:scroll;float:left;
              }
          </style>
          <script type="text/javascript">

              var channel = new MessageChannel();

              channel.port1.start();
              channel.port2.start();

              function addDisplay() {
                  var div = document.createElement("div");
                  div.className = "messageLog";
                  document.getElementById("messageLogs").appendChild(div);

                  channel.port2.addEventListener("message", function(e){
                  div.innerHTML += "<div>" + e.data + "</div>";                
                  }, false);

              }
              function showMsg() {
                  var msg = document.getElementById("msg").value;
                  channel.port1.postMessage(msg);                
              }
          </script>
   </head>
   <body>
          <h1>채널 메세징 예제</h1>
    <input id="msg" type="text">
          <button onclick="showMsg()">송신</button>
          <button onclick="addDisplay()">표시 영역 추가</button>
          <div id="messageLogs"></div>
   </body>
< /html>

Channel 을 생성한 후에 두개의 Port 를 시작하고,
port 1 의 postMessage 를 통해 Message 를 보내고, port2 에서 Message 를 처리하는 부분에 집중해 주십시요...

아래 그림은 입력란에 "가나다라마바사아" 를 한글자씩 늘려가면서, 표시영역을 하나씩 추가하여 송신을 눌러봤습니다.   

 

communication_04.jpg

 


그리고 Communication API 에는 포트 공개라고 하는 것이 하나 더 있는데요.
제가 구현을 해보았는데 계속 에러가 발생을 해서요...
이 부분은 제가 내공을 더 쌓은 후 살펴보도록 하겠습니다. (죄송합니다.) ㅡㅡ'


흠 완벽? 하진 않지만 Communication API 를 살펴보았습니다.
어떻습니까? 이제 진정으로 Web Application 이라는 것이 더욱더 다가오는 것 같지 않으십니까? 그것도 HTML 작성 만으로 말이죠... (HTML 이 더 어려워요... ㅡㅡ' : 뭐 정확학게는 javascript 인가요? ^^;)



HTML5 시리즈 강좌 리스트
[HTML5강좌] 1. HTML5 개요
[HTML5강좌] 2. HTML4 vs HTML5 (1)
[HTML5강좌] 3. HTML4 vs HTML5 (2)
[HTML5강좌] 4. Sementic Element (1)
[HTML5강좌] 5. Sementic Element (2)
[HTML5강좌] 6. Strong Web Form
[HTML5강좌] 7. Rich Text Edit API
[HTML5강좌] 8. Video Element
[HTML5강좌] 9. Audio Element
[HTML5강좌] 10. Canvas Element
[HTML5강좌] 11. Drag & Drop API
[HTML5강좌] 12. Offline Web Application
[HTML5강좌] 13. Communication API
[HTML5강좌] 14. Web Storage
[HTML5강좌] 15. Web SQL Database
[HTML5강좌] 16. Web Worker
[HTML5강좌] 17. Web Socket
[HTML5강좌] 18. Geolocation API
[HTML5강좌] 19. SVG
[HTML5강좌] 20. File API



HTML5 동영상 강좌 리스트
[HTML5 동영상 강좌] 1. HTML 5 개요
[HTML5 동영상 강좌] 2. HTML4 vs HTML5 (1)
[HTML5 동영상 강좌] 3. HTML4 vs HTML5 (2)
[HTML5 동영상 강좌] 4. Sementic Element (1)
[HTML5 동영상 강좌] 5. Sementic Element (2)
[HTML5 동영상 강좌] 6. Strong Web Form
[HTML5 동영상 강좌] 7. Rich Text Edit API
[HTML5 동영상 강좌] 8. Video Element
[HTML5 동영상 강좌] 9. Audio Element
[HTML5 동영상 강좌] 10. Canvas Element
[HTML5 동영상 강좌] 11. Drag & Drop API
[HTML5 동영상 강좌] 12. Offline Web Application
[HTML5 동영상 강좌] 13. Communication API
[HTML5 동영상 강좌] 14. Web Storage
[HTML5 동영상 강좌] 15. Web SQL Database
[HTML5 동영상 강좌] 16. Web Worker
[HTML5 동영상 강좌] 17. Web Socket
[HTML5 동영상 강좌] 18. Geolocation API
[HTML5 동영상 강좌] 19. SVG
[HTML5 동영상 강좌] 20. File API



그럼 행복한 고수되셔요...

[출처] SQLER.COM http://www.sqler.com/395960

woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\


'프로그램&DB > HTML5' 카테고리의 다른 글

[HTML5강좌] 15. Web SQL Database by 우정환  (0) 2011.08.02
[HTML5강좌] 14. Web Storage by 우정환  (0) 2011.08.02
[HTML5강좌] 12. Offline Web Application by 우정환  (0) 2011.08.02
[HTML5강좌] 11. Drag & Drop API by 우정환  (0) 2011.08.02
[HTML5강좌] 10. Canvas Element by 우정환  (0) 2011.08.02

[HTML5강좌] 12. Offline Web Application by 우정환

프로그램&DB/HTML5 2011. 8. 2. 00:52 Posted by Josep.H.S
Offline Web Application 이란 말그대로 Offline 상태에서도 동작하는 Application 입니다.
점점 사용이 늘어나는 스마트폰, 넷북 등 모바일 기기에서 아주 유용할 것입니다.
Network상태가 많이 좋지 않은 지하철(요즘은 그래도 좀 나아지긴 했지만요...) 이나 항공기 탑승중일때도 사용할 수 있을 것입니다.
그리고 client 에 Cache 된 Resource를 사용하기때문에 application 의 응답성이 좋아 Network 사용도 줄어들어 battery 관리에도 좋을 것입니다.

한가지 예로 Web 을 통해 메일을 작성하거나 블로그를 작성한다고 생각해 보십시요.
아주 긴 장문의 글을 적었는데

Send 또는 Save 버튼을 딱!!!
인터넷이 딱!!!
적은 글들이 딱!!!

모두 사라져 버린 경험... 여러분들 모두 경험하신 적이 있으실 것입니다.

Offline Web Application 기능을 사용한다면 이런 경우는 이제 다시? 일어나지 않을 것입니다. ^^

12-1. Manifest 작성
Offline Web Applicaiton 은 Offline 상태에서 Web Application 을 동작시키기 위해서 Cache 를 사용합니다.
생각해 보십시요.
갑자기 network 이 끊어졌습니다.
방금까지 보고 있던 페이지를 Refresh 를 누르면 희멀건 에러페이지를 보여줄 것입니다. 페이지에 연결할 수 없다는...
하지만 다시 보려고 한다면 무엇이 필요할까요?

먼저 페이지가 있어야 할 것입니다. 그 페이지에는 Style을 정의한 Style Sheet 파일들이 연결되어 있겠죠? 그리고 javascript 파일들도 연결되어 있을겁니다. iframe 이 포함되어 있다면 iframe 에 포함된 page 들도 있을 것이고요...
그리고 페이지 상에는 많은 이미지가 있을 것입니다. 그리고 다른 싸이트, 다른 페이지로 연결되어 있는 많은 링크가 존재할 것입니다.

그렇습니다. Offline 에서도 Web Application 이 동작을 하기 위해서는 현재 보고 있는 페이지 뿐만이 아니라 그 페이지와 연결된 많은 파일들이 필요하게 됩니다.
하지만 이 모든 것들을 Cache 에 저장하여 가지고 있다면... 그리고 그 cache 에 접근해서 페이지를 보여준다면?
ㅋㅋㅋ
갑자기 행복해 지지 않습니까? (구현할 일이 더 걱정된다고요? ㅋㅋㅋ)

그렇습니다. Offline Web Application 은 Cache 를 사용하도록 되어 있습니다.

그리고 cache 를 사용하기 위해서는 어떤 파일들을 Cache 해야하는지도 알려주어야 하는데요.
이때 사용하는 것이 manifest 파일입니다.

그럼 manifest 파일을 작성해 보도록 하겠습니다.

먼저 manifest 파일은 Browser 에 의해서 Download 되는 파일이므로 웹서버에 manifest 파일에 대해서 "text/cache-manifest" 라는 MIME Type 으로 등록해 주셔야 합니다.

html5news.html 파일을 작성했다고 생각해 보겠습니다. 이 페이지는 Offline 에도 작동하도록 하고 싶습니다.

그러기위해서는 먼저 html5news.manifest 를 작성해야 합니다.
크게 세부분으로 나위어져 있다는 것을 보실 수 있습니다.

CACHE MANIFEST 부분은 반듯이 맨 윗에 포함되어야하는 필수 사항입니다.
CACHE MANIFEST
#Cache Section
html5news.html
html5news.js
html5news.css
IMG_4687.jpg
#Network Section : 무조건 Network 상태에서만 사용할 수 있습니다. 아래 파일과 Directory 에 있는 파일들은 Offline 에서는 사용할 수 없습니다.
NETWORK:
search.aspx
/core/
#Fallback Section : html5news.html 파일을 찾을 수 없는 경우 notice.html 을 cache 하도록 합니다.
FALLBACK:
html5news.html notice.html

그리고 이 Manifest 파일은 사이트에 접속을 하여 해당 페이지에 접근을 하게 되면 다운로드되도록 해야하는데 아래와 같은 코드를 그렇게 하기위해 <HTML> Tag 에 추가해 줍니다.

<!DOCTYPE html>
<html manifest="html5news.manifest">
.
.
.
</html>


12-2. Offline Web Application API 사용
그럼 이제 Web Browser 단에서 Offline Web Application API 를 지원하는지 Check하고, online, offline 시 각각 어떻게 처리해야하는지를 정의해야 합니다.

아래와 같은 Code 를 사용하여 현재 Browser 가 Offline Web Application API 를 지원하는지 여부를 check 할 수 있습니다.
if(window.applicationCache) { 
      ...
}

아래와 같은 Code 로 Network 이 Online 인지 Offline 인지를 Check 합니다.
function init() { 
      if (navigator.onLine) { 
           ... 
      } else { 
           ... 
      }
}

그리고 online , offline 으로 상태가 바뀔때 어떻게 처리할 지에 대한 event Handler 를 추가해 줍니다.
window.addEventListener("online", function(e) { 
      ...
}, true);

window.addEventListener("offline", function(e) { 
      ...
}, true);

12-3. applicationCache 의 Status
applicationCache 는 다음과 같은 상태값을 갖습니다.
상태 정수값 설명
UNCACHE 0 Cache하지 않음.
IDLE 1 최신 Cache를 이용 중.
CHECKING 2 Update Check 중.
DOWNLOADING 3 Update Download 중.
UPDATEREADY 4 최신 Cache를 이용할 수 있음.
OBSOLETE 5 Error에 의해 cache 무효화.

12-4. applicationCache 의 event
applicationCache 로 부터 발생하는 Event 는 다음과 같습니다.
상수 설명
checking Update Check 중.
error Update 가 Error 로 종료.
noupdate Manifest 가 Update 되지 않음.
downloading Update Download 중.
progress Update Download 중.
updateready 최신 cache 얻기 완료. swapCache() 함수를 호출할 수 있음.
cached cache 완료.
obsolete manifest 얻기에 실패하여 cache를 무효로 함.


12-5. Sample

이제 간단한 예제를 작성해 보겠습니다.

html5news.manifest 파일의 내용입니다.
CACHE MANIFEST
# JavaScript
./html5newsOffline.js
./html5newsLog.js

# stylesheets
./html5news.css

html5news.html 파일의 내용입니다.
<!DOCTYPE html>
<html lang="ko" manifest="html5news.manifest">
    <head>
    <title>HTML5 Offline Application</title> 
        <script src="html5newsLog.js"></script> 
        <script src="html5newsOffline.js"></script> 
        <link rel="stylesheet" href="html5news.css">
    </head> 
    <script type="text/javascript">
    </script>
    <body onload="init();">
        <header> 
          <h1>Web Offline Application 예제</h1>
        </header> 
       
        <section>
        <article> 
            <button id="btnCheckUpdate">업데이트 확인</button> 
            <h3>My Log</h3> 
            <div id="info"> 
            </div> 
          </article>
        </section>
    </body>
</html>

html5newsOffline.js 파일의 내용입니다.
window.applicationCache.onchecking = function(e) { 
        log("Application update 사항을 Check 하고 있습니다.");
}

window.applicationCache.onnoupdate = function(e) {
    log("application update 할 사항이 없습니다.");
}

window.applicationCache.onupdateready = function(e) {
    log("Application 을 update 할 준비가 되었습니다.");
}

window.applicationCache.onobsolete = function(e) { 
        log("Cache 를 삭제합니다.");
}

window.applicationCache.ondownloading = function(e) {
        log("application update 사항을 Download 하고 있습니다.");
}

window.applicationCache.oncached = function(e) {
    log("Application cached 되었습니다.");
}

window.applicationCache.onerror = function(e) { 
        log("Application cache error 입니다.");
}

window.addEventListener("online", function(e) { 
        log("Online 입니다.");
}, true);

window.addEventListener("offline", function(e) {
        log("Offline 입니다.");
}, true); 
 

showCacheStatus = function(n) { 
        statusMessages = ["캐시하지않음","최신 캐시이용중","최신 캐시 Check중","Download 중","최신 캐시 사용가능","캐시 무효화"];
return statusMessages[n];
}

install = function() { 
        log("최신 캐시 Check중"); 
        try { 
            window.applicationCache.update();
        } catch (e) { 
            applicationCache.onerror(); 
        }
}

init = function(e) { 
    if (!window.applicationCache) { 
            log("이 브라우져는 HTML5 Web Offline Application API 를 지원하지 않습니다."); 
            return;
    } 
 
        log("캐시 상태 초기화 : " + showCacheStatus(window.applicationCache.status));
    document.getElementById("btnCheckUpdate").onclick = install;
}

html5newsLog.js 파일의 내용입니다.
log = function() { 
        var p = document.createElement("p"); 
        var message = Array.prototype.join.call(arguments, " "); 
        p.innerHTML = message;
        document.getElementById("info").appendChild(p);
}
(Pro HTML5 Programming 참고)


 

html5WebOfflineApplication_01.jpg

 




흠... 이번엔 Web Offline Application API 에 대해서 살펴보았습니다.
예제를 보시면 알겠지만 Web Server 에서 동작 시킨 것이 아니라서...
Web Server 동작시킨 화면은 다시 올려드리도록 하겠습니다. (죄송해요...)

그럼...



HTML5 시리즈 강좌 리스트
[HTML5강좌] 1. HTML5 개요
[HTML5강좌] 2. HTML4 vs HTML5 (1)
[HTML5강좌] 3. HTML4 vs HTML5 (2)
[HTML5강좌] 4. Sementic Element (1)
[HTML5강좌] 5. Sementic Element (2)
[HTML5강좌] 6. Strong Web Form
[HTML5강좌] 7. Rich Text Edit API
[HTML5강좌] 8. Video Element
[HTML5강좌] 9. Audio Element
[HTML5강좌] 10. Canvas Element
[HTML5강좌] 11. Drag & Drop API
[HTML5강좌] 12. Offline Web Application
[HTML5강좌] 13. Communication API
[HTML5강좌] 14. Web Storage
[HTML5강좌] 15. Web SQL Database
[HTML5강좌] 16. Web Worker
[HTML5강좌] 17. Web Socket
[HTML5강좌] 18. Geolocation API
[HTML5강좌] 19. SVG
[HTML5강좌] 20. File API




HTML5 동영상 강좌 리스트
[HTML5 동영상 강좌] 1. HTML 5 개요
[HTML5 동영상 강좌] 2. HTML4 vs HTML5 (1)
[HTML5 동영상 강좌] 3. HTML4 vs HTML5 (2)
[HTML5 동영상 강좌] 4. Sementic Element (1)
[HTML5 동영상 강좌] 5. Sementic Element (2)
[HTML5 동영상 강좌] 6. Strong Web Form
[HTML5 동영상 강좌] 7. Rich Text Edit API
[HTML5 동영상 강좌] 8. Video Element
[HTML5 동영상 강좌] 9. Audio Element
[HTML5 동영상 강좌] 10. Canvas Element
[HTML5 동영상 강좌] 11. Drag & Drop API
[HTML5 동영상 강좌] 12. Offline Web Application
[HTML5 동영상 강좌] 13. Communication API
[HTML5 동영상 강좌] 14. Web Storage
[HTML5 동영상 강좌] 15. Web SQL Database
[HTML5 동영상 강좌] 16. Web Worker
[HTML5 동영상 강좌] 17. Web Socket
[HTML5 동영상 강좌] 18. Geolocation API
[HTML5 동영상 강좌] 19. SVG
[HTML5 동영상 강좌] 20. File API


행복한 고수되셔요...

[출처] SQLER.COM http://www.sqler.com/395451

woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

'프로그램&DB > HTML5' 카테고리의 다른 글

[HTML5강좌] 14. Web Storage by 우정환  (0) 2011.08.02
[HTML5강좌] 13. Communication API by 우정환  (0) 2011.08.02
[HTML5강좌] 11. Drag & Drop API by 우정환  (0) 2011.08.02
[HTML5강좌] 10. Canvas Element by 우정환  (0) 2011.08.02
[HTML5강좌] 9. Audio Element by 우정환  (0) 2011.08.02

[HTML5강좌] 11. Drag & Drop API by 우정환

프로그램&DB/HTML5 2011. 8. 2. 00:51 Posted by Josep.H.S
안녕하십니까? 이번엔 Drag & Drop API 에 대해서 살펴보려합니다.
가끔 우리는 사진, 파일 같은 항목들을 Drag & Drop 할 수 있도록 만든 사이트들을 보셨을 겁니다.
Gmail 에서 보셨을텐데요... HTML 5 적용하기 이전에도 구현이 되어있었죠...
이전에 구현되어있던 Gmail 의 Drag & Drop 은 mouseDown, mouseOver 같은 Mouse 이벤트를 이용하여 Javascirpt 로 구현을 한 것이죠.
Javascript 를 사용하지 않았다면 ActiveX 를 사용하였겠지요.
이런 Javascript 나 ActiveX 는 별도의 설치가 필요하거나 Javascript 를 사용함으로써 별도의 부하가 생기고요(어떤 분들은 Client 측의 부하는 대수롭지 않게 넘어가시는 분들도 계시죠?) 그 부하로 인해서 버벅거리는 경우도 발생하였을 겁니다.

하지만, 이제 HTML 5 에서는 Drag & Drop API 를 제공하여 좀 더 손쉽게???, 간단하게??? 다른 플러그인들이 도움없이도 구현할 수 있게 되었습니다.(기존에 만든것들을 버리고 새로 구현해야 하는 숙제가 남긴했지만요... ^^ 캬캬캬)

이젠 웹페이지에 있는 content 를 웹페이지 밖, 그러니까는 데스크탑으로 가져올 수도, 데스크탑의 content 를 웹페이지로 막막막? 가지고 갔다가 가지고 왔다가... 하실수 있습니다. ^^

그럼 시작해 봅니다.

11-1. draggable 속성
HTML 5 에 새로이 추가된 속성중에 draggable 속성이 있습니다. true, false값을 가질 수 있습니다.
딱 눈치로 알수 있듯이...
draggable 속성이 true 이면 drag 할 수 있는 것이고, false 면 당근 drag 못하겠죠?
<img draggable="true" src="IMG_4687.jpg"></img>

사실 HTML 5 에서는 img Element 와 href 속성이 지정된 A Element 만 기본값 상태에서 Drag 할 수 있도록 되어 있습니다... 만... ㅋㅋ
Draggable 값이 True 라고 해서 무조건 Drag 할수 있는 것은 아니고요.
API 를 이용한 Javascript 를 사용하셔야 움직이실 수 있읍니다. ㅋㅋㅋ

11-2. Drag & Drop 관련 Event
그럼, HTML 5 에 새롭게 추가된 Drag & Drop API 의 관련 Event 들을 살펴보기로 하겠습니다.
Event 이름 Event 가 발생하는 곳 Action
dragstart Drag 를 할 Element Drag 가 시작됨
drag Drag 를 할 Element Drag 중
dragenter Drag 중 Mouse가 Element와 겹치는 순간의 Element Element 에 진입했음
dragleave Drag 중 Mouse가 Element에서 떠나는 순간의 Element Element를 떠남
dragover Drag 중 Mouse 가 현재 위치한 Element Element 위를 지나고 있음
drop Drop 할 Element Drop 됨
dragend Drag 하고 있는 Element Drag 가 끝남

특히나 dragenter, dragover, drop 이 세 event 는 Drop 과 관련하여 적절히 사용할 필요가 있습니다.


11-3. DataTransfer
DataTransfer? 이건 또 뭐야? 라는 분이 계실 겁니다.
DataTransfer 객체는 Drag & Drop API 를 사용하는데 있어서 반드시 있어야 하는 객체이구요.
이녀석은 Drag & Drop 되는 녀석들의 Data 를 담는 역할을 합니다.

그럼, DataTransfer 의 속성과 Method 를 살펴보도록 하겠습니다.

속성/Method 설명
dropEffect Drag & Drop동작의 종류를 나타내는 문자열
copy, move, link, none(초기값) 중 하나
effectAllowed 속성에 의해 허용되지 않은 종류의 동작은 처리할 수 없음.
effectAllowed 허용할 dropEffect를 지정하는 문자열
copy, move, link 와 같은 동작을 허용하며 copyLink, copyMove, linkMove, all 과 같은 둘 이상의 동작을 동시에 허용할 수도 있음.
none(drop을 허용하지 않음) 을 지정할 수 있음.
dragstart 이벤트에 값을 지정하는 것이 일반적임
types dragstart 이벤트 발생시 DOM 목록에 있는 data format 을 설정하며 setData 함수를 호출할때 지정되는 format 문자열을 배열형식으로 얻을 수 있음.
clearData(type) Drag & Drop에 사용할 데이터를 초기화하며 Drag 중인 데이터를 삭제함.
setData(type, data) Drag & Draop 하기위해 새로운 요소를 정의하며 Drag & Drop 할 데이터를 저장함.
getData(type) setData 에서 정의한 Element와 Format, 데이터를 가져옴.
files 다른 application 으로부터 Drag & Drop 할 파일을 가져옴.
types 속성에 "Files" 라는 문자열이 저장됨.
setDragImage(image, x, y) Drag 중 img Element 를 이용하여 피드백을 지정함.
addElement(element) Drag 중 피드백 image 에 추가할 Element 를 추가함.



11-4. 예제...

이제 간단한 Drag & Drop 예제를 만들어 보겠습니다. 정말 간단한 예제 입니다. ^^;

<!DOCTYPE html>
< html>
<head>
<title>Drag & Drop Test</title>
<script type="text/javascript">
function drag(target, e) {
e.dataTransfer.setData('Text', target.id);
};
function drop(target, e) {
var id = e.dataTransfer.getData('Text');
target.appendChild(document.getElementById(id));
e.preventDefault();
};
</script>
<style>
div#Red {border:2Px solid #F00;}
div#Blue {border:2Px solid #00F;}
div {width:400px;height:266px;}
a {margin:50px;display:block;}
</style>
</head>
<body>
<div id="Red" ondrop="drop(this, event);" ondragenter="return false;" ondragover="return false;"></div>
<div id="Blue" ondrop="drop(this, event);" ondragenter="return false;" ondragover="return false;"></div>
<img draggable="true" id="textlink" ondragstart="drag(this, event);" src="IMG_4687.jpg"></img>
</body>
< /html>

DragnDrop_01.jpg

 


위와 같이 firefox, safari, chrome 는 이미지를 이동시킬때 기본적으로 이미지를 표시하지만 ie 의 경우는 마우스커서를 파일 복사할때 나타내는 커서로 변경시킵니다. opera 는 작동을 하지 않는 군요... 다른 속성을 추가해야 할 것으로 보입니다.

예제와 함께 간단하게 Drag & Drop API 를 살펴보았습니다.
위 예제를 한번 다시 살펴보시고요...

그럼...



HTML5 시리즈 강좌 리스트
[HTML5강좌] 1. HTML5 개요
[HTML5강좌] 2. HTML4 vs HTML5 (1)
[HTML5강좌] 3. HTML4 vs HTML5 (2)
[HTML5강좌] 4. Sementic Element (1)
[HTML5강좌] 5. Sementic Element (2)
[HTML5강좌] 6. Strong Web Form
[HTML5강좌] 7. Rich Text Edit API
[HTML5강좌] 8. Video Element
[HTML5강좌] 9. Audio Element
[HTML5강좌] 10. Canvas Element
[HTML5강좌] 11. Drag & Drop API
[HTML5강좌] 12. Offline Web Application
[HTML5강좌] 13. Communication API
[HTML5강좌] 14. Web Storage
[HTML5강좌] 15. Web SQL Database
[HTML5강좌] 16. Web Worker
[HTML5강좌] 17. Web Socket
[HTML5강좌] 18. Geolocation API
[HTML5강좌] 19. SVG
[HTML5강좌] 20. File API



HTML5 동영상 강좌 리스트
[HTML5 동영상 강좌] 1. HTML 5 개요
[HTML5 동영상 강좌] 2. HTML4 vs HTML5 (1)
[HTML5 동영상 강좌] 3. HTML4 vs HTML5 (2)
[HTML5 동영상 강좌] 4. Sementic Element (1)
[HTML5 동영상 강좌] 5. Sementic Element (2)
[HTML5 동영상 강좌] 6. Strong Web Form
[HTML5 동영상 강좌] 7. Rich Text Edit API
[HTML5 동영상 강좌] 8. Video Element
[HTML5 동영상 강좌] 9. Audio Element
[HTML5 동영상 강좌] 10. Canvas Element
[HTML5 동영상 강좌] 11. Drag & Drop API
[HTML5 동영상 강좌] 12. Offline Web Application
[HTML5 동영상 강좌] 13. Communication API
[HTML5 동영상 강좌] 14. Web Storage
[HTML5 동영상 강좌] 15. Web SQL Database
[HTML5 동영상 강좌] 16. Web Worker
[HTML5 동영상 강좌] 17. Web Socket
[HTML5 동영상 강좌] 18. Geolocation API
[HTML5 동영상 강좌] 19. SVG
[HTML5 동영상 강좌] 20. File API



행복한 고수되십시요...

[출처] SQLER.COM http://www.sqler.com/395443

woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

 

http://www.jumptovb.net


'프로그램&DB > HTML5' 카테고리의 다른 글

[HTML5강좌] 13. Communication API by 우정환  (0) 2011.08.02
[HTML5강좌] 12. Offline Web Application by 우정환  (0) 2011.08.02
[HTML5강좌] 10. Canvas Element by 우정환  (0) 2011.08.02
[HTML5강좌] 9. Audio Element by 우정환  (0) 2011.08.02
[HTML5강좌] 8. Video Element by 우정환  (0) 2011.08.02

[HTML5강좌] 10. Canvas Element by 우정환

프로그램&DB/HTML5 2011. 8. 2. 00:48 Posted by Josep.H.S
Canvas Element 는 HTML 5 에서 가장? 많이 주목받고 있는 새롭게 추가된 element 들 중 하나입니다.
요 녀석때문에 세간에 말이 많죠...
특히나 개발자들한테요...

실버라이트나 플래쉬는 이제 죽는거냐?
"Microsoft 는 이제 Silverlight 를 어떻게 할거냐?" (뭐 이런주제가 Canvas 때문만은 아니겠지만요... ㅋㅋ)
뭐... 우린 그런 거에 신경쓰지 말자고요... ^^

HTML 은 HTML 대로 SilverLight 은 SilverLight 대로의 맡은 역할이 있고 영역이 있는 것이니까요.

사용자들이 어떤 것을 선택할 것이냐가 답이지 않을까요? (헙!! 내 밥줄이 사용자들 손에 달려있다는? ㅋㅋ 걍 둘다 하셔요... 좀 무성의했나요? 죄송... ㅋㅋ)^^;


Canvas 는 할 수 있는 일이 너무도 많습니다.
일단 "Canvas" 라는 말 자체에서도 느낄 수 있듯이, 그림을 그릴 수 있을 것입니다. 이미지도 올릴 수 있습니다. 그렇다면 사진합성도 할 수 있겠죠? 그림을 그릴 수 있으니... 그래프도 그릴 수 있겠죠? 애니메이션도 만들 수 있고요, 게임까지도 "Canvas" 위에서 구현할 수 있습니다. 이 들에 대한 예제는 도처에 널부러져? 있습니다.

할 수 있는 것도 많으니 설명할 것들은 얼마나 많겠습니까? ^^;
많은 것을 한꺼번에 다루기에는... 그래서 꼭 알아야 할 것들만을 간단히 살펴보는 것으로 진행하려 합니다.

10-1. 사용법

<canvas id="vas" width="200" height="300"></canvas>

위 Markup 을 보면 width, height 속성을 부여하고 있습니다만, 만약 이들을 지정해주지 않는다면 기본적으로 background Color 는 "Transparent" 로 width 는 300 pixel, height 는 150 pixel 로 지정합니다.

그리고 사용하는 Web Browser 가 Canvas Element 를 지원하지 않는 경우 다음과 같이 대체해서 보여줄 수있는 이미지를 지정할 수 있습니다.
<canvas id="vas" width="200" height="300">
<img src="eximg.jpg" width="200" height="300" alt="대체이미지" />
</canvas>

그리고 다음과 같이 Javascript 를 이용해서 Canvas Element 에 접근할 수 있습니다.
var vas=document.getElementById('vas');

var cntxt = vas.getContext('2d') // 요로케하면 2d 그림을 그릴 수 있습니당... ^^

혹시나 Canvas Element 를 지원하지 않는 IE 를 사용하시는 분들을 위해서 아래 링크에 가셔서 Javascript 라이브러리를 다운받으셔서 사용해 보시기 바랍니다. (거 있잖아요.. 평면TV 엑스캔 헤벨레.. 하고 이름이 비슷하네효.. ㅋㅋ)
http://excanvas.sourceforge.net
또는
http://code.google.com/p/explorercanvas/ 에 가셔서 excnavas.zip



이제 슬슬 canvas 위에 그림을 그려볼까효? ^^

10-2. 2D 도형그리기

먼저 도형을 그려보지요...

<!DOCTYPE HTML>
<html lang="ko">
    <head>
         <meta charset="UTF-8">
        <title>HTML 5 Canvas 예제</title>
    </head>
    <body>
        <canvas id="woojjaCanvas" width="200" height="300"></canvas>
        <script type="text/javascript">
            var canvas=document.getElementById('woojjaCanvas');
            var cvas=canvas.getContext('2d');
            cvas.fillStyle='#FF0000';
            //cvas.fillStyle="rgba(255,0,0,0.3)";
            cvas.fillRect(10,10,80,100);
        </script>
    </body>
</html>


canvas_01.jpg

 

 


fillStyle 은 16진수로 적으셔도 되고요..
cvas.fillStyle="rgba(255,0,0,0.3)"; 와 같이 rgba 값을 이용해도 되는데
a 값은 alpha 값으로 투명도를 나타낸다는 것. 잘 아실테고 값은 0~1 사이값을 넣어주시면 됩니다.
아래 이미지는 rgba 값을 적용한 것입니다.

 

canvas_02.jpg

 


함수
fillRect 속을 채운 사각형을 그립니다.
strokeRect 사각형 테두리만 그립니다.
clearRect 지정한 사각영역을 투명하게 지웁니다.

<!DOCTYPE HTML>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>HTML 5 Canvas 예제</title>
         <style type="text/css">
              #woojjaCanvas { border:1px solid #000000;}
         </style>
    </head>
    <body>
        <canvas id="woojjaCanvas" width="300" height="200"></canvas>
        <script type="text/javascript">
            var canvas=document.getElementById('woojjaCanvas');
            var cvas=canvas.getContext('2d');
            cvas.fillStyle='#FF0000';
            //cvas.fillStyle="rgba(255,0,0,0.3)";
            cvas.fillRect(10,10,150,180);
            cvas.clearRect(20,20,70,90);
            cvas.strokeRect(30,30,200,100);
        </script>
    </body>
</html>


위 Markup 을 Web Browser 로 봤습니다

canvas_03.jpg

 

.

사각형만 살펴보았는데요.
arc 를 이용하여 원을 그릴 수 있습니다.
원그리기는 숙제? ㅋㅋㅋ 

10-3. 선긋기

이번엔 선 긋기를 해보려합니다.

<!DOCTYPE HTML>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>HTML 5 Canvas 예제</title>
     <style type="text/css">
      #woojjaCanvas { border:1px solid #000000;}
     </style>
    </head>
    <body>
        <canvas id="woojjaCanvas" width="300" height="200"></canvas>
        <script type="text/javascript">

            var canvas=document.getElementById('woojjaCanvas');
            var cvas=canvas.getContext('2d');

            cvas.beginPath();

            cvas.lineWidth=15;
            cvas.lineCap="round";

            cvas.lineTo(20, 50);
            cvas.lineTo(100, 150);
            cvas.stroke();

            cvas.lineTo(60, 50);
            cvas.lineTo(140, 150);
            cvas.stroke();

  
            cvas.moveTo(120, 20);
            cvas.lineTo(200, 180);
            cvas.stroke();

            cvas.moveTo(180, 40);
            cvas.lineTo(240, 150);
            cvas.stroke();

            cvas.clothPath();

        </script>
    </body>
</html>

 

canvas_04.jpg

 



직선말고도 quardratiCurve(2차 베지어곡선), bezierCurveTo(3차 베지어곡선) 등의 함수를 이용해서 곡선을 그릴 수 있습니다.


다음은 선긋기를 이용한 도형 그리기입니다.

 

<!DOCTYPE HTML>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>HTML 5 Canvas 예제</title>
         <style type="text/css">
          #woojjaCanvas { border:1px solid #000000;}
         </style>
    </head>
    <body>
        <canvas id="woojjaCanvas" width="300" height="200"></canvas>
        <script type="text/javascript">
            var canvas=document.getElementById('woojjaCanvas');
            var cvas=canvas.getContext('2d');
            cvas.beginPath();
            cvas.lineWidth=15;
            cvas.lineCap="round";
            cvas.lineTo(200, 50);
            cvas.lineTo(240, 100);
            cvas.lineTo(280, 70);
            cvas.lineTo(200, 50);
            cvas.clothPath();
            cvas.fill();
        </script>
    </body>
</html>


canvas_05.jpg

 

 

 
위와 같이 clothPath 함수를 이용하여 선긋기를 닫으면 속이 찬 도형을 그릴 수 있습니다.

10-4. 문자 넣기
문자 넣기 또한 그렇게 어렵지 않습니다.
한번 넣어 볼까요?
textAlign 을 여러가지로 바꿔서 넣어봤습니다. shadow 효과도 넣어봤구요.
<!DOCTYPE HTML>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>HTML 5 Canvas 예제</title>
         <style type="text/css">
          #woojjaCanvas { border:1px solid #000000;}
         </style>
    </head>
    <body>
        <canvas id="woojjaCanvas" width="500" height="300"></canvas>
        <script type="text/javascript">
            var canvas=document.getElementById('woojjaCanvas');
            var cvas=canvas.getContext('2d');

            cvas.font = "30px Gothic";
            cvas.fillStyle = "rgba(255,0,0,1)";

            cvas.shadowColor = "rgba(0,255,0,0.9)";
            cvas.shadowOffsetX="10";
            cvas.shadowOffsetY= "10";
            cvas.shadowBlur="15";

            cvas.textAlign = "start";
            cvas.fillText("SQLER 화이팅!!!", 150, 30);

            cvas.textAlign = "end";
            cvas.fillText("SQLER 화이팅!!!", 150, 70);

            cvas.textAlign = "left";
            cvas.fillText("SQLER 화이팅!!!", 150, 110);

            cvas.textAlign = "center";
            cvas.fillText("SQLER 화이팅!!!", 150, 150);  

            cvas.textAlign = "right";
            cvas.fillText("SQLER 화이팅!!!", 150, 190);

            cvas.textAlign = "center";
            cvas.strokeStyle = "#0000FF";
            cvas.strokeText("SQLER 화이팅!!!", 150, 240);

        </script>
    </body>
</html>


fillText 함수와 strokeText 함수에 따라서 Text 의 모양을 결정할 수 있습니다.
shadow 관련 함수에 따라서 아래와 같이 Text 에 음영을 적용할 수 있습니다.

canvas_text_01.jpg

 

위에 보시는 바와 같이 textAlign 값 변경에 따라서 배치가 달라지는 것을 보실 수 있습니다.^ ^


10-5. 이미지 삽입

그럼 이번엔 이미지를 넣어볼까요?

<!DOCTYPE HTML>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>HTML 5 Canvas 예제</title>
        <style type="text/css">
            #woojjaCanvas { border:1px solid #000000;}
        </style>
        <script type="text/javascript">
            function drawCanvas() {
                var canvas=document.getElementById('woojjaCanvas');
                var cvas=canvas.getContext('2d');
                var ballet = new Image();
                ballet.src='IMG_4687.jpg';
                cvas.drawImage(ballet, 10, 10);
            };
        </script>
    </head>
    <body onload="drawCanvas();">
        <canvas id="woojjaCanvas" width="420" height="286"></canvas>
    </body>
</html>

drawImage 함수를 사용하여 image 를 Canvas 에 그려넣습니다

canvas_image_01.jpg

 


훔...그런데... ie 에서는 이미지가 뜨질 않는군요... ㅡㅡ'

10-6. 그래프

그럼 이미지와 선들을 함께 그려서 그래프를 그려보도록 하겠습니다.

<!DOCTYPE HTML>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>HTML 5 Canvas 예제</title>
        <style type="text/css">
            #woojjaCanvas { border:1px solid #000000;}
        </style>
        <script type="text/javascript">
            function drawCanvas() {
                var canvas=document.getElementById('woojjaCanvas');
                var cvas=canvas.getContext('2d');
                var ballet = new Image();
                ballet.src='canvas_back.png;

                cvas.drawImage(ballet, 10, 10);
                cvas.beginPath();
                cvas.strokeStyle='#FF0000';

                cvas.lineTo(60,313);
                cvas.lineTo(120,166);
                cvas.lineTo(180,76);
                cvas.lineTo(240,250);
                cvas.lineTo(300,70);
                cvas.lineTo(360,200);
                cvas.lineTo(420,120);
                cvas.lineTo(480,70);

                cvas.stroke();

            };
        </script>
    </head>
    <body onload="drawCanvas();">
        <canvas id="woojjaCanvas" width="541" height="364"></canvas>
    </body>
</html>

canvas_graph_01.jpg

 


배경이미지를 그리고나서 그 위에 선을 긋는 방식으로 그래프를 완성 했습니다.
위 Markup 의 값과 그래프의 값이 맞지는 않지만...
이런방식으로 그린다는 것을 보여드리려고... ^^'

10-7. 여러 예제사이트
지금까지는 Canvas 를 단순하게 다루는 것을 설명했었지만, 캔버스는 정말 많은 것을 만들어 낼 수 있습니다.
그런 예가 될 수 있는 사이트는 정말 많은데요...
몇가지 예를 들어 보도록 하겠습니다.

1. Test Drive Site Map
http://ie.microsoft.com/testdrive/Views/SiteMap/Default.html
내의 Canvas 예제

  •     Canvas Pad
  •     Canvas Pinball
  •     Canvas Zoom

    • 2. Tron

    canvas_comics.jpg

     


    http://disneydigitalbooks.go.com/tron/

    3. MugTug

    canvas_mugtug_01.jpg

     



    http://mygtug.com/sketchpad/

    4. Pacman

    canvas_pacman.jpg

     



    http://html5games.net/game/google-pacman



    지금까지 Canvas 에 대해서 한번 살펴 보았습니다.
    살펴본 사항들 보다 살펴보지 못한 사항들이 더 많으니까요.
    한번 직접 테스트를 해보시면서 살펴보지 못한 사항들을 체크해 보시기 바랍니다.

    그럼...


    HTML5 시리즈 강좌 리스트
    [HTML5강좌] 1. HTML5 개요
    [HTML5강좌] 2. HTML4 vs HTML5 (1)
    [HTML5강좌] 3. HTML4 vs HTML5 (2)
    [HTML5강좌] 4. Sementic Element (1)
    [HTML5강좌] 5. Sementic Element (2)
    [HTML5강좌] 6. Strong Web Form
    [HTML5강좌] 7. Rich Text Edit API
    [HTML5강좌] 8. Video Element
    [HTML5강좌] 9. Audio Element
    [HTML5강좌] 10. Canvas Element
    [HTML5강좌] 11. Drag & Drop API
    [HTML5강좌] 12. Offline Web Application
    [HTML5강좌] 13. Communication API
    [HTML5강좌] 14. Web Storage
    [HTML5강좌] 15. Web SQL Database
    [HTML5강좌] 16. Web Worker
    [HTML5강좌] 17. Web Socket
    [HTML5강좌] 18. Geolocation API
    [HTML5강좌] 19. SVG
    [HTML5강좌] 20. File API



    HTML5 동영상 강좌 리스트
    [HTML5 동영상 강좌] 1. HTML 5 개요
    [HTML5 동영상 강좌] 2. HTML4 vs HTML5 (1)
    [HTML5 동영상 강좌] 3. HTML4 vs HTML5 (2)
    [HTML5 동영상 강좌] 4. Sementic Element (1)
    [HTML5 동영상 강좌] 5. Sementic Element (2)
    [HTML5 동영상 강좌] 6. Strong Web Form
    [HTML5 동영상 강좌] 7. Rich Text Edit API
    [HTML5 동영상 강좌] 8. Video Element
    [HTML5 동영상 강좌] 9. Audio Element
    [HTML5 동영상 강좌] 10. Canvas Element
    [HTML5 동영상 강좌] 11. Drag & Drop API
    [HTML5 동영상 강좌] 12. Offline Web Application
    [HTML5 동영상 강좌] 13. Communication API
    [HTML5 동영상 강좌] 14. Web Storage
    [HTML5 동영상 강좌] 15. Web SQL Database
    [HTML5 동영상 강좌] 16. Web Worker
    [HTML5 동영상 강좌] 17. Web Socket
    [HTML5 동영상 강좌] 18. Geolocation API
    [HTML5 동영상 강좌] 19. SVG
    [HTML5 동영상 강좌] 20. File API



    행복한 고수되셔요..

    [출처] SQLER.COM http://www.sqler.com/395287

    woojja ))*
    \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

     

     

    http://www.jumptovb.net


    '프로그램&DB > HTML5' 카테고리의 다른 글

    [HTML5강좌] 12. Offline Web Application by 우정환  (0) 2011.08.02
    [HTML5강좌] 11. Drag & Drop API by 우정환  (0) 2011.08.02
    [HTML5강좌] 9. Audio Element by 우정환  (0) 2011.08.02
    [HTML5강좌] 8. Video Element by 우정환  (0) 2011.08.02
    [HTML5강좌] 7. Rich Text Edit API by 우정환  (0) 2011.08.02

    [HTML5강좌] 9. Audio Element by 우정환

    프로그램&DB/HTML5 2011. 8. 2. 00:47 Posted by Josep.H.S
    Audio Element 도 HTML 5 에서 관심이 주목되고 있는 새롭게 추가된 element 들 중 하나죠.

    Audio Element 도 video Element 와 그 사용법은 다르지 않습니다.
    큰 차이점이라면... Poster 속성이 없다는 것!!! 입니다.

    그럼 기본적인 사용방법을 살펴보겠습니다.

    <audio src="http://www.w3schools.com/html5/horse.ogg"></audio>

    그럼 여기에...
    audio file 을 자동적으로 재생시키려면...

    <audio src="http://www.w3schools.com/html5/horse.ogg" autoplay></audio>
    또는
    <audio src="http://www.w3schools.com/html5/horse.ogg" autoplay="autoplay"></audio>

    이렇게 하면 되겠습니다.

    Audio Element 도 Video Element 처럼 Web Browser 가 Audio Element 를 지원하느냐에 따라 실행여부를 알 수 있는데..
    Web Browser 가 Audio Element 를 지원하지 않을 때 특정 문구를 표시할 수 있도록 지원 시킬수 있습니다.

    <audio src="http://www.w3schools.com/html5/horse.ogg" autoplay>
    <p>Your browser does not support audio tag</p>
    </audio>

    Audio Element 도 Vedio Element 와 같이 재생 control 을 표시할 수 있습니다.

    <audio src="http://www.w3schools.com/html5/horse.ogg" controls></audio>
    또는
    <audio src="http://www.w3schools.com/html5/horse.ogg" controls="controls"></audio>

    다음은 Audio Element 가 사용할 수 있는 속성들을 소개하겠습니다.

    속성명 값 기능
    src 파일 경로 Source
    autoplay autoplay 페이지가 Load 되자마자 사운드를 재생할지를 지정합니다.
    controls controls 플레이어를 표시합니다.
    loop 재생횟수 audio 를 반복 재생할 횟수를 지정합니다.
    preload none, auto, meta Page 가 열리면 audio 를 미리 Load 합니다.

    음... 이번엔 audio Element 가 지원하는 Audio 코덱들을 살펴보도록 하겠습니다.
    IE FireFox Opera Chrome Safari
    Vorbis(oga, ogg) X O O O X
    wav, wma O O O X O
    mp3 O X X O O
    AAC O X X O O


    마지막으로 Control 의 모양을 한번 보도록 하죠...

    <audio controls="controls" id="ado">
         <source src="    http://test2.momac.net/html5/demo_audio/youaremylife_instrumental.mp3"/>
         <source src="    http://test2.momac.net/html5/demo_audio/youaremylife_instrumental.ogg"/>
         <source src="    http://test2.momac.net/html5/demo_audio/youaremylife_instrumental.wav"/>
         <p>Your browser does not support the audio tag.</p>
    </audio>


    audio_sample.jpg

     

     


    Video 의 Control 모양과 다르지 않죠? ^^


    오늘은 간단히 audio Element 에 대해서 살펴보았습니다.

    다음은 가장? 관심이 많으실 Canvas Element 에 대해서 알아보도록 하죠...



    HTML5 시리즈 강좌 리스트
    [HTML5강좌] 1. HTML5 개요
    [HTML5강좌] 2. HTML4 vs HTML5 (1)
    [HTML5강좌] 3. HTML4 vs HTML5 (2)
    [HTML5강좌] 4. Sementic Element (1)
    [HTML5강좌] 5. Sementic Element (2)
    [HTML5강좌] 6. Strong Web Form
    [HTML5강좌] 7. Rich Text Edit API
    [HTML5강좌] 8. Video Element
    [HTML5강좌] 9. Audio Element
    [HTML5강좌] 10. Canvas Element
    [HTML5강좌] 11. Drag & Drop API
    [HTML5강좌] 12. Offline Web Application
    [HTML5강좌] 13. Communication API
    [HTML5강좌] 14. Web Storage
    [HTML5강좌] 15. Web SQL Database
    [HTML5강좌] 16. Web Worker
    [HTML5강좌] 17. Web Socket
    [HTML5강좌] 18. Geolocation API
    [HTML5강좌] 19. SVG
    [HTML5강좌] 20. File API



    HTML5 동영상 강좌 리스트
    [HTML5 동영상 강좌] 1. HTML 5 개요
    [HTML5 동영상 강좌] 2. HTML4 vs HTML5 (1)
    [HTML5 동영상 강좌] 3. HTML4 vs HTML5 (2)
    [HTML5 동영상 강좌] 4. Sementic Element (1)
    [HTML5 동영상 강좌] 5. Sementic Element (2)
    [HTML5 동영상 강좌] 6. Strong Web Form
    [HTML5 동영상 강좌] 7. Rich Text Edit API
    [HTML5 동영상 강좌] 8. Video Element
    [HTML5 동영상 강좌] 9. Audio Element
    [HTML5 동영상 강좌] 10. Canvas Element
    [HTML5 동영상 강좌] 11. Drag & Drop API
    [HTML5 동영상 강좌] 12. Offline Web Application
    [HTML5 동영상 강좌] 13. Communication API
    [HTML5 동영상 강좌] 14. Web Storage
    [HTML5 동영상 강좌] 15. Web SQL Database
    [HTML5 동영상 강좌] 16. Web Worker
    [HTML5 동영상 강좌] 17. Web Socket
    [HTML5 동영상 강좌] 18. Geolocation API
    [HTML5 동영상 강좌] 19. SVG
    [HTML5 동영상 강좌] 20. File API


    그럼 행복한 고수되셔요..

    [출처] SQLER.COM http://www.sqler.com/390814

    woojja ))*
    \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

     

    http://www.jumptovb.net


    '프로그램&DB > HTML5' 카테고리의 다른 글

    [HTML5강좌] 11. Drag & Drop API by 우정환  (0) 2011.08.02
    [HTML5강좌] 10. Canvas Element by 우정환  (0) 2011.08.02
    [HTML5강좌] 8. Video Element by 우정환  (0) 2011.08.02
    [HTML5강좌] 7. Rich Text Edit API by 우정환  (0) 2011.08.02
    [HTML5강좌] 6. Strong Web Form by 우정환  (0) 2011.08.02

    [HTML5강좌] 8. Video Element by 우정환

    프로그램&DB/HTML5 2011. 8. 2. 00:46 Posted by Josep.H.S
    Video Element 는 HTML 5 에서 관심이 주목되고 있는 새롭게 추가된 element 들 중 하나입니다.
    지금까지 웹페이지에 동영상을 삽입하고 싶을때는 object Element 나 Embed Element 를 사용하여 Flash, media player 와 같은 플러그인을 이용하여야 했습니다.
    그러나, 이제 HTML 5 에서는 플러그인없이도 동영상을 웹페이지에 쉽게 삽입할 수 있습니다.
    그리고, 다음과 같이 object, embed Element 와는 다른 점이 있습니다.

    • 재생, 일시중지 등 Web Browser 자체 Control 이 있습니다.
    • Source 에 파일을 여러개를 지정할 수 있어서 Web Browser 의 지원 Format 에 따라 표시 할 수 있습니다.

    <!DOCTYPE HTML>
    <html lang="ko">
       <head>
         <meta charset="UTF-8">
         <title>HTML 5 Video 예제</title>
       </head>
       <body>
         <video width="320" height="240" controls="controls">
           <source src="    http://www.w3schools.com/html5/movie.mp4" type="video/mp4" />
           <source src="    http://www.w3schools.com/html5/movie.webm" type="video/webm" />
           <source src="    http://www.w3schools.com/html5/movie.ogg" type="video/ogg" />
           <p>Your browser does not support the video tag.</p>
         </video>
       </body>
    </html>

    rowser 별 지원 비디오 코덱을 위 Markup 을 바탕으로 아래 표에 간략히 정리해 보았습니다.
    IE 9 FireFox 3.6.17 Opera 11.11 Chrome 12.0.742 Safari 5.0.5
    Ogg X O O O X
    MPEG 4 O X X O O
    WebM △ X O O X
    (IE 10 beta 는 아직 설치를 안해봤으므로 설치하고 업데이트 하겠습니다. ㅡㅡ')

    IE 9 에다가 WebM 란에는 "△" 표시를 했는데 이유는요...
    기본적으루다가 지원을 하는 것이 아니고...
    코난님께서도 소개해주신바 있는 글인데요..
    http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx
    를 확인해 보시면 알 수 있듯이...

    webM Componenent 를 설치하시고 Refresh 를 하셔야 보실 수 있을 겁니다.
    ^^
    아래 이미지는 설치 과정입니다.

    webM_01.jpg

    그 해당싸이트는 위와같이 접근 할 수도 있습니다.
    http://ie.microsoft.com/testdrive/

     

    webM_02.jpg
    위 이미지 버튼을 클릭하셔요

    클릭해보면.. 아래 페이지로 이동합니다.webM_03.jpg

    다시 다운 받을수 있는 곳으로 이동을 합니다.webM_04.jpg

    확인하시고요...webM_05.jpg

    설치가 다 끝났나 봅니다.webM_06.jpg


    아... 인제 보이네요... ^^



    그럼 이번에는 각 Web Browser 마다 제공하는 기본 Control 의 모양을 살펴보죠.


    IE 의 모양입니다.

    Video_Control_IE_01.jpg

     



    FireFox 의 모양입니다.

    Video_Control_FireFox_01.jpg

     



    Safari 의 모양입니다.

    Video_Control_Safari_01.jpg

     


     


    각 Web Browser 마다 특색이 나타나는 것을 확인해 볼 수 있습니다.


    이제 Video Element 를 사용하는 방법을 알아보도록 하겠습니다.

    <video src="sqler.mp4" loop="loop">
    <p>이 문장이 보인다면 video Tag 를 지원하지 않는 Web Browser 를 사용하고 계시는 겁니다.</p>
    </video>

    속성 설명
    controls 재생 Control 표시를 제어합니다.
    autoplay 동영상이 Loading 되면 곧바로 재생을 시작합니다.
    autobuffer 이 속성을 사용하게 되면 사용하기 전부터 다운로드가 진행됩니다. 사용자가 재생할 때쯤이면 동영상이 어느 정도 다운로드가 된 상태일 것입니다.
    poster 동영상이 Download 중이거나 Buffering 중에 나타낼 이미지를 지정합니다.
    loop 동영상을 반복 재생합니다.
    width 동영상의 너비를 지정합니다.
    height 동영상의 높이를 지정합니다.

    하지만, Web Browser 마다 지원하는 동영상이 다르므로 아래 Markup 처럼 둘 이상의 여러 포맷을 준비해 두어 Source Element 를 이용하여 모든 Web Browser 에서 재생가능하도록 해야할 것입니다.

    <video controls=controls poster="image/poster/sqler.png">
    <source src="media/video/sqler.ogg" type="video/ogg">
    <source src="media/video/sqler.mp4" type="video/mp4">
    <object data="media/video/sqler.mov">
    <p>이 문장이 보인다면 HTML 5 의 video Tag 를 지원하지 않는 Web Browser 를 사용하고 계시는 겁니다.</p>
    </object>
    </video>


    이런 Video Element 는 javascript 를 사용하여 자유롭게 동영상을 조작할 수 있습니다.
    너무 간단하긴 하지만 아래와 같은 arkup 으로 Web Browser 가 제공하는 Control 이 아닌 사용자가 직접 제작할 수 있는 Control 을 제작해 보았습니다.
    <video id="vdo" src="media/video/sqler.ogg" poster="image/poster/sqler.png">
    <p>이 문장이 보인다면 HTML 5 의 video Tag 를 지원하지 않는 Web Browser 를 사용하고 계시는 겁니다.</p>
    </video>
    <p>
    <button onclick="document.getElementById('vdo').pause()">Pause</button>
    <button onclick="document.getElementById('vdo').play()">Play</button>
    <button onclick="document.getElementById('vdo').currentTime = 0">|<</button>
    <button onclick="document.getElementById('vdo').currentTime += 5">>></button>
    </p>
    <script>
    var vdo = document.getElementById('vdo');
    if(vdo != null && vdo.addEventListener)
    {
    vdo.addEventListener(
    'ended',
    function() {
    alert('The video has ended.');
    },
    false);
    }
    </script>


    아래와 같이 외부 Control 을 확인하실수 있습니다.

    Video_Control_IE_02.jpg

     


    이 상으로 간단하게 Video Element 를 사용하는 방법에 대해서 간단하게 살펴보았습니다.
    동영상 조작을 위한 외부 Contorl 들을 제작하기에도 그리 어렵지 않을 것이라는 생각이 드네요...
    그런 생각은 정작 만들면 사라질 수도 있겠지만 말입니다.

    다음은 Audio Element 에 대해서 살펴보기로 하겠습니다.



    HTML5 시리즈 강좌 리스트
    [HTML5강좌] 1. HTML5 개요
    [HTML5강좌] 2. HTML4 vs HTML5 (1)
    [HTML5강좌] 3. HTML4 vs HTML5 (2)
    [HTML5강좌] 4. Sementic Element (1)
    [HTML5강좌] 5. Sementic Element (2)
    [HTML5강좌] 6. Strong Web Form
    [HTML5강좌] 7. Rich Text Edit API
    [HTML5강좌] 8. Video Element
    [HTML5강좌] 9. Audio Element
    [HTML5강좌] 10. Canvas Element
    [HTML5강좌] 11. Drag & Drop API
    [HTML5강좌] 12. Offline Web Application
    [HTML5강좌] 13. Communication API
    [HTML5강좌] 14. Web Storage
    [HTML5강좌] 15. Web SQL Database
    [HTML5강좌] 16. Web Worker
    [HTML5강좌] 17. Web Socket
    [HTML5강좌] 18. Geolocation API
    [HTML5강좌] 19. SVG
    [HTML5강좌] 20. File API



    HTML5 동영상 강좌 리스트
    [HTML5 동영상 강좌] 1. HTML 5 개요
    [HTML5 동영상 강좌] 2. HTML4 vs HTML5 (1)
    [HTML5 동영상 강좌] 3. HTML4 vs HTML5 (2)
    [HTML5 동영상 강좌] 4. Sementic Element (1)
    [HTML5 동영상 강좌] 5. Sementic Element (2)
    [HTML5 동영상 강좌] 6. Strong Web Form
    [HTML5 동영상 강좌] 7. Rich Text Edit API
    [HTML5 동영상 강좌] 8. Video Element
    [HTML5 동영상 강좌] 9. Audio Element
    [HTML5 동영상 강좌] 10. Canvas Element
    [HTML5 동영상 강좌] 11. Drag & Drop API
    [HTML5 동영상 강좌] 12. Offline Web Application
    [HTML5 동영상 강좌] 13. Communication API
    [HTML5 동영상 강좌] 14. Web Storage
    [HTML5 동영상 강좌] 15. Web SQL Database
    [HTML5 동영상 강좌] 16. Web Worker
    [HTML5 동영상 강좌] 17. Web Socket
    [HTML5 동영상 강좌] 18. Geolocation API
    [HTML5 동영상 강좌] 19. SVG
    [HTML5 동영상 강좌] 20. File API

    행복한 고수되셔요...

    woojja ))*
    \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\


    PS) www.w3schools.com 사이트를 추가적으로 참조하였음을 말씀드립니다.

    [출처] SQLER.COM http://www.sqler.com/390020
     

    http://www.jumptovb.net


    '프로그램&DB > HTML5' 카테고리의 다른 글

    [HTML5강좌] 10. Canvas Element by 우정환  (0) 2011.08.02
    [HTML5강좌] 9. Audio Element by 우정환  (0) 2011.08.02
    [HTML5강좌] 7. Rich Text Edit API by 우정환  (0) 2011.08.02
    [HTML5강좌] 6. Strong Web Form by 우정환  (0) 2011.08.02
    [HTML5강좌] 5. Sementic Element (2) by 우정환  (0) 2011.08.01

    [HTML5강좌] 7. Rich Text Edit API by 우정환

    프로그램&DB/HTML5 2011. 8. 2. 00:04 Posted by Josep.H.S
    이번엔 사용자들이 쉽게 웹페이지를 편집할 수 있게하는 Editing API 에 대해서 살펴보도록 하겠습니다.

    기존엔 웹페이지에 Editor 를 구현하기위해서 각 업체별로, 개발자별로 Javascript 를 사용하여 각자의 방법으로 개발하였습니다. 하지만, HTML 5 에서부터는 Rich Text 를 편집하기위한 API 가 표준으로 규정되어 있습니다. 그리고 추가적으로 DesignMode thrtjd과 Global 속성인 Contenteditable 속성이 포함되어 있습니다.

    5-1. Contenteditable 과 designMode

    contenteditable 속성과 designMode 속성은 모두 내용편집이 불가능한 요소를 편집가능하도록 하기위한 API 로, 차이점은
    contenteditable 속성은 특정 Element 의 내용을, designMode 속성은 문서 전체를 편집할 수 있게 합니다.

    <div id="editor" contenteditable="true"></div>
    또는
    <div id="editor" contenteditable></div> <!--true 값은 생략가능-->

    contenteditable 속성의 값은 세가지를 가질 수 있습니다.
    값 의미
    true 편집가능
    false 편집불가
    inherit 부모요소로부터 상속

    contenteditable 속성값이 true 인 요소의 자식 요소들은 기본적으로 true 값을 가집니다.
    하지만 아래와 같이 명시적으로 contenteditable 값을 false 로 지정한다면 편집할 수 없습니다. (하지만 부모 div Element 의 contenteditable 의 속성이 true 이므로 그 자식element 인 두번째 div 를 삭제할 수는 있을 것입니다.)

    <div id="editor" contenteditable="true">
    <div>편집 가능</div>
    <div contenteditable="false">편집불가</div>
    </div>
    (참고 : 웹혁명을 꿈꾸다 HTML 5 & API 입문)

    contentEditable_01.jpg

     

     


    위 이미지를 보면 상단 Web Browser 가 ie9 이고 아래는 Opera 인데요...
    ie9 은 편집불가인 부분도 편집이 되는 문제가 있군요... opera 는 편집불가인 부분은 편집되지 않았습니다.

    그리고 이렇게 지정한 contenteditable 의 속성값은 아래와 같이 javascirpt 를 이용하여 해당 Element 의 isContentEditable 속성에 접근할 수 있습니다.

    var editor = document.getElementById("editor");
    var isEditable = editor.isContentEditable


    designMode 속성을 사용하면 문서 전체를 편집할 수 있습니다.
    designMode 속성은 document 객체가 갖는 속성으로 "on", "off" 값을 갖습니다. 문서 뿐만이 아니라 iframe 의 contentDocument 속성에 사용하게되면 iframe 내의 내용 또한 편집할 수 있습니다.

    <iframe src="about:blank" width="300" height="300" onload="this.contentDocument.designMode='on'"></iframe>


    5-2. Rich Text Edit API
    위에서 언급한 contenteditable 속성 이나 designMode 속성을 편집모드로 설정한 상태에서 editing API 를 사용하면 편집내용을 Rich Text 로 다룰 수 있습니다.
    이때 사용하는 것이 execCommand API 입니다.

    이제 execCommand 를 살펴보도록 하겠습니다.
    document 객체에서 사용할 수있는 함수로 commandId, showUI, value 세가지의 Parameter를 갖습니다.
    이 중 첫번째 Parameter 이외에는 생략할 수 있지만 Command Id 에 따라 값을 지정하여 호출합니다.

    document . execCommand(commandId [, showUI [, value ] ] )

    이 때, Command ID 로 사용되는 명령어들은 다음과 같은 것들이 있습니다. 이 들을 간단히 살펴보겠습니다.
    CommandID 설명
    bold 선택한 문자열을 굵은 글씨로 전환합니다.
    createLink 선택한 문자열을 하이퍼링크로 전환합니다.
    delete 선택한 문자열이나 커서 앞의 문자를 삭제합니다.
    formatBlock 선택한 문자열을 지정한 Tag로 감쌉니다.
    forwardDelete 선택한 문자열이나 커서 뒤의 문자를 삭제합니다.
    insertImage 커서가 위치한 곳에 이미지를 삽입합니다.
    insertHTML 문자를 커서가 위치한 곳에 HTML 형태로 삽입합니다.
    insertLineBreak 커서의 위치에 줄바꿈을 삽입합니다.
    insertOrderedList 커서의 위치에 순서있는 리스트(ol tag)를 삽입합니다.
    insertUnorderedList 커서의 위치에 순서없는 리스트(ul tag)를 삽입합니다.
    insertParagraph 커서의 위치에 Paragraph (p tag 나 div tag : Browser 마다 구현은 각각 다름) 를 삽입합니다.
    insertText 커서의 위치에 문자를 삽입합니다.
    italic 선택한 문자열을 italic 체로 전환합니다.
    redo undo 를 재실행합니다.
    selectAll 편집가능한 컨텐츠를 모두 선택합니다.
    subscript 선택한 문자열을 아랫첨자로 전환합니다.
    superscript 선택한 문자열을 윗첨자로 전환합니다.
    undo 실행을 취소합니다.
    unlink 선택한 문자열에 적용된 하이퍼링크를 제거합니다.
    unselect 선택을 취소합니다.
    VendorID-customCommandID Browser 제작사들 마다의 명령어를 지정하여 호출합니다.

    execCommand함수 이외에도 다섯가지의 함수가 더 존재하는데 이 함수들을 이용하면 WYSIWYG Editor 를 만들 수 있을 것입니다.
    그럼, execCommand 함수 이외의 다섯가지 함수에 대해서 살펴보도록 하겠습니다.

    함수명 설명
    document.queryCommandEnabled(commandId) 지정한 명령어(commandId)가 실행가능한지 여부를 반환합니다. 현재 커서의 위치에서 실행가능 여부를 알 수 있습니다.
    document.queryCommandIndeterm(commandId) 지정한 명령어(commandId)의 효과가 일정한가 여부를 반환합니다.
    document.queryCommandState(commandId) 지정한 명령어(commandId)의 상태를 반환합니다. 현재 커서의 위치에서 실행가능 여부를 알 수 있습니다.
    document.queryCommandSupported(commandId) 지정한 명령어(commandId)가 지원되는지 여부를 반환합니다.
    document.queryCommandValue(commandId) 지정한 명령어(commandId)의 현재값을 반환합니다.


    위 함수들과 commandid 들을 사용하면 쉽게? Editor 를 구현할 수 있겠네요...
    하지만 HTML 4와 다른 점이 무엇이 있을까요? HTML 4 에서는 구현하지 못했던 것들이었을까요?
    여러분들도 아시겠지만 그렇지 않습니다.
    지금까지 많은 Web 개발자들이 제작하고, 또 사용하고 있는 WYSIWYG Editor 들을 보면 알 수 있듯이 예전 부터 만들어 왔고, 계속 사용되어져 왔습니다.
    하지만, HTML 5 로 넘어오면서 달라진 점이라고 한다면 표준화하여 API 를 작성하고 통일된 사양아래서 개발할 수 있도록 하였다는데 주목해야 할 것입니다.


    Editor 를 제작하면 더 좋았을 듯 하지만 그 내용은 추후에 추가해 보도록 하겠습니다.
    (제일 짧은 글이네요... 성의없어 보이는 것은... ㄷㄷㄷ ㅡㅡ'



    HTML5 시리즈 강좌 리스트
    [HTML5강좌] 1. HTML5 개요
    [HTML5강좌] 2. HTML4 vs HTML5 (1)
    [HTML5강좌] 3. HTML4 vs HTML5 (2)
    [HTML5강좌] 4. Sementic Element (1)
    [HTML5강좌] 5. Sementic Element (2)
    [HTML5강좌] 6. Strong Web Form
    [HTML5강좌] 7. Rich Text Edit API
    [HTML5강좌] 8. Video Element
    [HTML5강좌] 9. Audio Element
    [HTML5강좌] 10. Canvas Element
    [HTML5강좌] 11. Drag & Drop API
    [HTML5강좌] 12. Offline Web Application
    [HTML5강좌] 13. Communication API
    [HTML5강좌] 14. Web Storage
    [HTML5강좌] 15. Web SQL Database
    [HTML5강좌] 16. Web Worker
    [HTML5강좌] 17. Web Socket
    [HTML5강좌] 18. Geolocation API
    [HTML5강좌] 19. SVG
    [HTML5강좌] 20. File API



    HTML5 동영상 강좌 리스트
    [HTML5 동영상 강좌] 1. HTML 5 개요
    [HTML5 동영상 강좌] 2. HTML4 vs HTML5 (1)
    [HTML5 동영상 강좌] 3. HTML4 vs HTML5 (2)
    [HTML5 동영상 강좌] 4. Sementic Element (1)
    [HTML5 동영상 강좌] 5. Sementic Element (2)
    [HTML5 동영상 강좌] 6. Strong Web Form
    [HTML5 동영상 강좌] 7. Rich Text Edit API
    [HTML5 동영상 강좌] 8. Video Element
    [HTML5 동영상 강좌] 9. Audio Element
    [HTML5 동영상 강좌] 10. Canvas Element
    [HTML5 동영상 강좌] 11. Drag & Drop API
    [HTML5 동영상 강좌] 12. Offline Web Application
    [HTML5 동영상 강좌] 13. Communication API
    [HTML5 동영상 강좌] 14. Web Storage
    [HTML5 동영상 강좌] 15. Web SQL Database
    [HTML5 동영상 강좌] 16. Web Worker
    [HTML5 동영상 강좌] 17. Web Socket
    [HTML5 동영상 강좌] 18. Geolocation API
    [HTML5 동영상 강좌] 19. SVG
    [HTML5 동영상 강좌] 20. File API


    행복한 고수되십시요.

    [출처] SQLER.COM http://www.sqler.com/388601

    woojja ))*
    \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\


    http://www.jumptovb.net



    '프로그램&DB > HTML5' 카테고리의 다른 글

    [HTML5강좌] 9. Audio Element by 우정환  (0) 2011.08.02
    [HTML5강좌] 8. Video Element by 우정환  (0) 2011.08.02
    [HTML5강좌] 6. Strong Web Form by 우정환  (0) 2011.08.02
    [HTML5강좌] 5. Sementic Element (2) by 우정환  (0) 2011.08.01
    [HTML5강좌] 4. Sementic Element (1) by 우정환  (0) 2011.08.01

    [HTML5강좌] 6. Strong Web Form by 우정환

    프로그램&DB/HTML5 2011. 8. 2. 00:02 Posted by Josep.H.S
    1. input Element 의 새로운 Type
    web form 은 10년이 넘도록 checkbox, radio, password, select, file, submit, text 와 같은 몇개의 입력타입만 가지고 있었습니다. 많은 이들이 그동안 javascript 와 씨름하느라 몸고생, 맘고생 많이들 하셨으리라... ^^

    이젠 새롭게 몇가지?의 Type 이 추가되었습니다.

    1-1. datetime, week, month, date, time
    날짜 관련 Type 들입니다.
    Web Browser 들마다 지원하는 Form 이 다른데요...
    Opera 가 젤루다 좋은 것 같아요. 그래서 Browser 비교는 internet explore 9 과 opera 11 과 했습니다.
    현재 PC 에 internet explore 10 을 설치할 수 없어서 image Capture 가... ^^;

    Markup은 아래와 같이...
    <input type="datetime">
    <input type="week">
    <input type="month">
    <input type="date">
    <input type="time">
    <input type="datetime-local">

    입력합니다.

    datetime 부터 이미지로 확인해 보죠...

    input_datetime_01.jpg

     



     

    Opera 에서는 날짜 선택 Control 이 rendering 되네요... ^^

    다음은 date Type 입니다.

    input_date_01.jpg

     


    똑같이 날짜 선택 Control 이 나타나죠?
    month Type 은 date Type 과 동일하게 나타납니다.

    다음은 Week Type 입니다.

    input_week_01.jpg

     


    날짜 선택 Control 좌측에 Week 가 표시되어 있는 것을 보실 수 있습니다.

    다음은 time type.

    input_time_01.jpg

     


    시간을 선택할 수 있도록 Spin Control 을 rendering 합니다.



    1-2. email
    email 을 받아들이는 input type 입니다.
    뭐 type 에 email type 을 부여한다고 해서 달라지는 것이 있을까?
    email Type 을 지원하지 않는 Web Browser 는 text type 으로 인식을 할 것이고 Web Browser 에 따라서는 Validation Check 까지 할 수 있도록 지원해 줄 것입니다.

    email_01.jpg

     

    (참고 : naradesign.net)


    또한, iphone 의 경우에는 input field 에 커서를 가져갔을 때 "@" 와 "." 이 포함된 Screen Keyboard 를 띄워 줄것입니다.

    email_02.jpg

     

    (참고 : naradesign.net)

    <input type="email" />


    1-3. url
    이번엔 URL type 입니다.
    Web Browser 에서는 text type 의 외관과 별 차이가 없으므로 iphone 에서 어떻게 보이는지만 확인하도록 하죠.

    input_url.jpg

     

     

    이미지 하단을 보시면 "/" 와 ".com" 버튼이 보이실 겁니다.
    URL 에 맞게 Screen Keyboard 가 배치되어 있군요.

    <input type="url" />


    1-4. color
    Color Type 은 여러분이 생각하시기에도 Color 를 선택할 수 있는 Control 이 나타나야 한다고 생각하지 않으십니까?

    input_color_01.jpg

     


    Opera 에서는 구현이 되어있군요.
    먼저 단순한 Color 선택 Control 이 나타나고 "Other..." 버튼을 Click 하게 되면 Color 대화상자가 뜨는 군요...

    <input type="color" />


    1-5. search
    Search Type 또한 외관은 Text Type 과 다르지 않습니다. 그래서 iphone 의 모양을 살펴보도록 하겠습니다.

    input_search.jpg

     


    보시는 바와 같이 이미지 하단 우측의 버튼이 "Search" 버튼으로 바뀌어 있는 것을 보실 수 있습니다.

    <input type="search" />


    1-6. number
    이번엔 number Type 입니다.

    input_number_01.jpg

     


    일단 숫자를 마우스로도 입력할 수 있도록 Spin Control 로 rendering 하고 있고요.

    input_number_iphone_01.jpg

     


    iphone 에서는 Screen Key Board 의 상단에 숫자 Key 가 배열되어 있는 것을 보실 수 있습니다.

    <input type="number" min="1" max="100" />


    1-7. range
    range Type 은 입력형태를 number Type 에서 제공할 수 있는 Spin Control 과는 다르게 Slide Control 로 rendering 합니다.

    input_range_01.jpg

     


    <input type="range" min="0" max="100" step="10" value="0" />



    1-8. tel
    tel Type 의 경우는 완전히 숫자만 입력하지요.
    iphone 에서는 아래와같이 숫자 입력 Screen Keyboard 가 나타나는 군요... ^^

    input_tel.jpg

     


    <input type="tel" />

    1-9. file
    file Type 의 경우 예전에는 하나의 input Tag 에 하나의 파일만 선택할 수 있었습니다.
    하지만 HTML 5 에서는 multiple 속성을 주어 여러 파일들을 선택할 수 있고
    accept 속성을 사용하여 MIME type 을 선택하여 파일들을 filtering 할 수 있습니다.

    <input type="file" accept="image/*" multiple />

    위 Tag 를 Markup 하면 아래 이미지와 같은 파일 선택 대화상자가 나타나며 image 를 Filtering 할 수 있습니다.

    input__multipleimages_01.jpg

     

     




    2. input Element 의 새로운 Attribute

    2-1. placeholder

    PlaceHolder 가 뭐냐구요?

     

    Placeholder_01.PNG

     

     

    Placeholder_02.PNG

     


     위 이미지를 보시면 비어있는 TextBox 에 미리 Text을 넣어 두는 것인데요... 사용자가 Click 을 하거나 Control 에 Focus 가 가게되면 Placeholder Text 는 잽싸게 사라지죠.
    이젠 이 기능을 javascript 의 도움없이도 사용할 수 있게 되었답니다.

    <input name="w" placeholder="Email 을 적어주셔요.">

    input_placeholder_01.PNG

     


    이렇게 말이죠...

    2-2. autofocus
    기존의 페이지들은 Autofocus 기능을 Javascript 를 이용해서 구현을 했습니다. 하지만, 구현하는 것이 그리 만만하지는 않았죠. 구현보다도 구현후에 페이지 Loading 과 사용자의 엑션 사이에서 문제가 좀 있었습니다. Page Loading 중 사용자가 입력을 하고 있는 상황이라면 사용자가 원하지 않는 곳(Page Loading 후에 autofocus 가 위치한 곳) 에 입력을 하고 있을 수 있습니다.
    사이트 로그인을 하겠다고 id 란에 id 를 입력하고 password 란에 password 를 입력하고 있는데... 그 순간 Focus 가 javascript 에 의해서 다른 입력 Field 에 가 버려서... 입력한 Password 가 훤히 다 보인다면? ㅋㅋㅋ
    사용자는 쬐끔 퐝당하겠죠? 이런 경험 한번쯤 있으실지도...

    이젠 javascript 를 사용하지 않아도 됩니다. autoscript 속성을 설정하면 page 가 Load 되자마자 Focus 가 설정된 곳으로 이동할 것입니다.
    또 Script 가 아닌 Markup 으로 동작하는 것이기 때문에 모든 Web Browser 에서 똑같이 동작할 것이구요. (Web Browser 가 설정해 놓았다면요... 옵션으로 제공할 수도 있겠죠.)

    그리고 autofocus 는 다음과 같이 설정하면 됩니다.

    <input name="w" autofocus>


    2-3. formaction
    formaction 속성을 사용하면 Page Form 의 action 이 되는 대상 Page에 가기전에 input Element 단에서 대상 Page 를 바꾸어 버릴수 있습니다.

    <form action="woolla.aspx" method="post">
    <input type="submit" formaction="woojja.aspx" value="Submit" />
    </form>
    위 Markup 의 내용을 보면 "woolla.aspx" 페이지로 이동할 것이 "woojja.aspx" 페이지로 이동하게 되겠죠...


    3. 새로 추가된 Element

    3-1. Keygen Element
    Keygen Element 는 form 을 전송할 때 키를 생성하는 Control 입니다. form 이 전송되면 비밀키와 공개 키를 생성하여 비밀키는 Client 측에 저장하고 공개키는 서버에 전송합니다. HTML 5 에서 규정하는 Key 의 Type 은 "RSA" 뿐이므로 keytype 속성에는 "rsa" 만을 사용할 수 있습니다. 지정하지 않아도 기본값으로 지정합니다.
    이젠 Keygen 요소를 사용하여 기존 ActiveX 를 사용하던 방식을 떨쳐버릴수 있을 것입니다. 기다려보도록 하죠...

    <keygen name="key" type="rsa">


    3-2. Output Element
    Output Element 는 무언가의 계산 결과를 나타냅니다.
    range Element 와 output Element 를 함께 사용하는 예를 살펴보도록 하지요.

    <input type="range" id="rng" value="0"><output onformchange="value=form.elements.rng.value" for="rng">0</output>

    outputElement_01.jpg

     

     


    output Element value 속성을 넣을 수 없으므로 주의하시길...

    3-3. progress Element
    Progress Element 는 작업의 진행정도를 나타냅니다.

    <progress value="0.75" max="1">0</progress>

    progressElement_01.jpg

     

     



    3-4. meter
    meter Element 는 한정된 범
    meter Element 는 한정된 범위에서의 값을 나타내고 싶을때 사용하는 것으로 최솟값과 최댓값을 지정할 수 없는 곳에서는 meter Element 를 사용할 수 없습니다.

    예를 한번 볼까요?

    <meter value="25" min="0" low="30" high="70" max="100" optimum="100">25점</meter>


    meterElement_01.jpg

     



    지금까지 새로 추가된 Element 들 중 중요하다고 생각한 것들을 중심으로 간략하게 살펴보았습니다.

    어떤가요? 지금까지 고생하던 것들이 조금은 사라질 것 같지 않습니까? ^^
    저만 기분이 좋아진걸 까효? ^^;

    마지막으로 페이지하나 소개하려합니다.
    사용하는 Web Browser 를 이용하여 아래 Page 를 가셔서 input type 의 속성 지원여부를 확인할 수 있습니다.
    http://miketaylr.com/code/input-type-attr.html

    한번 방문해 보시기 바랍니다.

    아 참...
    위 내용들은 본인의 생각도 물론 많이? 포함되어 있지만


    등을 참고했습니다.


    HTML5 시리즈 강좌 리스트
    [HTML5강좌] 1. HTML5 개요
    [HTML5강좌] 2. HTML4 vs HTML5 (1)
    [HTML5강좌] 3. HTML4 vs HTML5 (2)
    [HTML5강좌] 4. Sementic Element (1)
    [HTML5강좌] 5. Sementic Element (2)
    [HTML5강좌] 6. Strong Web Form
    [HTML5강좌] 7. Rich Text Edit API
    [HTML5강좌] 8. Video Element
    [HTML5강좌] 9. Audio Element
    [HTML5강좌] 10. Canvas Element
    [HTML5강좌] 11. Drag & Drop API
    [HTML5강좌] 12. Offline Web Application
    [HTML5강좌] 13. Communication API
    [HTML5강좌] 14. Web Storage
    [HTML5강좌] 15. Web SQL Database
    [HTML5강좌] 16. Web Worker
    [HTML5강좌] 17. Web Socket
    [HTML5강좌] 18. Geolocation API
    [HTML5강좌] 19. SVG
    [HTML5강좌] 20. File API



    HTML5 동영상 강좌 리스트
    [HTML5 동영상 강좌] 1. HTML 5 개요
    [HTML5 동영상 강좌] 2. HTML4 vs HTML5 (1)
    [HTML5 동영상 강좌] 3. HTML4 vs HTML5 (2)
    [HTML5 동영상 강좌] 4. Sementic Element (1)
    [HTML5 동영상 강좌] 5. Sementic Element (2)
    [HTML5 동영상 강좌] 6. Strong Web Form
    [HTML5 동영상 강좌] 7. Rich Text Edit API
    [HTML5 동영상 강좌] 8. Video Element
    [HTML5 동영상 강좌] 9. Audio Element
    [HTML5 동영상 강좌] 10. Canvas Element
    [HTML5 동영상 강좌] 11. Drag & Drop API
    [HTML5 동영상 강좌] 12. Offline Web Application
    [HTML5 동영상 강좌] 13. Communication API
    [HTML5 동영상 강좌] 14. Web Storage
    [HTML5 동영상 강좌] 15. Web SQL Database
    [HTML5 동영상 강좌] 16. Web Worker
    [HTML5 동영상 강좌] 17. Web Socket
    [HTML5 동영상 강좌] 18. Geolocation API
    [HTML5 동영상 강좌] 19. SVG
    [HTML5 동영상 강좌] 20. File API



    행복한 고수되셔요.

    [출처] SQLER.COM http://www.sqler.com/388439

    woojja ))*
    \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

    http://www.jumptovb.net


    '프로그램&DB > HTML5' 카테고리의 다른 글

    [HTML5강좌] 8. Video Element by 우정환  (0) 2011.08.02
    [HTML5강좌] 7. Rich Text Edit API by 우정환  (0) 2011.08.02
    [HTML5강좌] 5. Sementic Element (2) by 우정환  (0) 2011.08.01
    [HTML5강좌] 4. Sementic Element (1) by 우정환  (0) 2011.08.01
    [HTML5강좌] 3. HTML4 vs HTML5 (2) by 우정환  (0) 2011.08.01

    [HTML5강좌] 5. Sementic Element (2) by 우정환

    프로그램&DB/HTML5 2011. 8. 1. 23:42 Posted by Josep.H.S
    2-3. article Element
    article Element 는 블로그에 포스트된 글들, 뉴스사이트의 기사들의 묶음 같은 독립된 하나의 컨텐츠를 나타내며, 게시판 글이나 블로그 포스트의 댓글들, 위젯, 가젯영역 또한 article Element 의 영역이라 할 수 있겠다.
    아래 그림을 참고하자.
    각 포스트들은 Section 으로 나뉘고 Section 들을 하나의 article Element로 감싸고 있는 모습을 볼 수 있다.
    단순히 페이지의 메인 컨텐츠라고 해서 전체를 article Element 로 감싸서는 안되므로 해당 컨텐츠가 영역의 성격에 적합한지 항상 다시한번 체크해 보아야 할 것이다.

    Simentic.jpg

     
    2-4. aside Element
    aside Element 는 보충기사, 사이드바, 광고 와 같이 Main 컨텐츠와는 관련이 적어 분리될 수 있다고 생각되는 것에 사용한다.
    또한 이전 글의 nav Element 에서 살펴봤듯이 nav Element 들을 Group 화 할때도 사용할 수 있다.
    컨텐츠에 직접적으로 관련이 되어 있어서 만약 삭제되면 컨텐츠내용이 구성되지 않는 내용이 있다면 그 부분은 aside Element 를 사용하면 안된다.
    위 이미지의 경우는 main Content 로서 내용을 설명하고 있으므로 aside Element 를 사용하면 안되겠지만. 위 그림의 aside 부분이나 아래 그림의 도서쇼핑몰의 추천 도서과 같은 내용은 Main Contents 와는 직접적인 관계는 없으므로 aside Element 를 사용하기에 적합하다고 할 수 있다.

    Section_05.jpg

     


    aside Element 의 경우 컨텐츠의 내용과 제작자의 의도에 따라서 다른 Element 로 사용할 수 있으므로 Outline 구성 Element 중에서 조심스럽게 사용해야하는 Element 중 하나다.

    2-5. hgroup Element
    hgroup Element 는 제목과 이에 따르는 소제목이나 부제, Catchphrase 를 그룹화하기 위해 사용하는데, h1~h6 Element 만 포함할 수 있다.

    HTML 5 의 hgroup Element 를 사용하기 이전, HTML 4.01 에서 아래와 같은 index 를 가진 Page를 제작하기 위해서는

    hgoup_01.jpg

    뭐 간단히 만든다하면...
    <h1>HTML 5</h1>
    <h2>3. Semantics, structure, and APIs of HTML documents</h2>
    <h3>3.2 Elements</h3>
    <h4>3.2.5 Content models</h4>
    <h5>3.2.5.1 Kinds of content</h5>
    <h6>3.2.5.1.7 Interactive content</h6>
    <p>
    Interactive content is content that is specifically intended for user interaction.</br></br> aaudio (if the controls attribute is present)buttondetailsembediframeimg (if the usemap attribute is present)input (if the type attribute is not in the Hidden state)keygenlabelmenu (if the type attribute is in the toolbar state)object (if the usemap attribute is present) selecttextareavideo (if the controls attribute is present)
    </p>

    아래 같이 표현이 될 것이다.

    hgoup_02.jpg

     

    그런데, 만약에 한 Depth 더 내려가야한다면? ㅡㅡ'
    어떻게 표현해야 할까?

    HTML 4.01 까지는 한계가 있었다.
    HTML 5 부터는 Outline 구성Element 에는 HeadLine Element Level의 높고 낮음에 따라 Outline 이 결정되며 H1 이나 H2와 같은 높은 Level 의 Headline Element 들도 이제는 각 Section 이나 Article 같은 Outline 구성Element 어디에서나 사용할 수 있게되었다. 

    그럼, 이번엔 다음 이미지를 보자

    hgoup_03.jpg

     

    이 HTML 문서의 붉은 색 줄
    Headline Tag 다음 P Tag 를 이용해서 Headline 을 설명해주고 있다.
    겉으로 보기엔 차이가 나지 않는다.
    하지만 아래 Mark UP 을 보면 둘의 차이를 알 수 있는데 hgroup 의 용도를 알 수있을 것이라 생각한다.

    <!DOCTYPE HTML>
    <html lang="ko">
    <HEAD>
    <meta charset="UTF-8">
     <title>HTML 5 예제</title>
    </HTAD>
    <body>
     <header>
      <h1>HTML 5</h1>
     </header>
     <section>
      <h1>3. Semantics, structure, and APIs of HTML documents</h1>
      <p>....</p>
      <section>
       <h1>3.2 Elements</h1>
       <p>....</p>
       <section>
         <h1>3.2.5 Content models</h1>
        <p>....</p>
        <section>
          <h1>3.2.5.1 Kinds of content</h1>
         <h2>3.2.5.1.6 Embedded content</h2>
         <p>
          Embedded content is content that imports another resource into the document, or content from another vocabulary that is inserted into the document.
         </p>
        </section>
        </section>
       </section>
       <section>
         <hgroup>
          <h1>4. The elements of HTML</h1>
          <h2>4.8 Embedded content</h2>
          <h3>4.8.1 The img element</h3>
          <h4>4.8.1.1 Requirements for providing text to act as an alternative for images</h4>
          <h5>4.8.1.1.1 General guidelines</h5>
         </hgroup>
         <p>
          Except where otherwise specified, the alt attribute must be specified and its value must not be empty; the value must be an appropriate replacement for the image. The specific requirements for the alt attribute depend on what the image is intended to represent, as described in the following sections.      </p>
        </section>
     </section>
     <footer>
      footer
     </footer>
    </body>
    </html>

    위 파란색 Section 의 <P> Tag 는 H2 Headline 의 내용임을 나타낸다.
    하지만 붉은색 Section 의 <P> Tag 는 Hgroup 에 해당되는 내용임을 나타낸다. 이와 같이 Headline 을 여러개로 묶을 필요성이 있을때 Hgroup Element  를 사용하게 된다.


    아래 내용의 경우 위 Headline 을 Hgroup 으로 묶을 수 있을 것이다.

     

    hgoup_04.jpg

     

    2-6. Header, Footer Element
    Header Element 는 Section 의 Header 를 나타낸다.
    Header Element 에는 HeadLine Element 나 hgroup, nav Element 를 넣는다.
    Footer Element 는 Section이나 Page 의 Footer 를 표현한다.
    Section 의 저자정보나, 관련링크, 저작권표기등을 표현하는데 사용한다.
    몇번을 사용가능하지만, 사용하는 위치에 따라서 각각의 의미가 달라진다.
    page 의 Body Tag 내의 Footer 는 Page 의 Footer, 블로그 포스트등의 article 내의 Footer 는 블로그 포스트에 관한 Footer 정보가 된다.
    Footer Element 는 주로 페이지나 Section 의 마지막에만 사용하는 것은 아니다.   

    아래는 스타일시트가 적용되어 있지는 않아 썰렁하지만, Blog Site 의 Header 와 Footer 를 표현해 보았다.
    <!DOCTYPE HTML>
    <html lang="ko">
    <HEAD>
    <meta charset="UTF-8">
     <title>Jump To VB.NET</title>
    </HTAD>
    <body>
     <header>
      <hgroup>
        <h1>Jump To VB.NET</h1>
        <h2>Have a nice day~!</h2>
      <hgroup>
      <nav>
        <ul>
          <li><a href="...">home</a></li>
          <li><a href="...">tag</a></li>
          <li><a href="...">media</a></li>
          <li><a href="...">location</a></li>
          <li><a href="...">guest</a></li>
          <li><a href="...">admin</a></li>
          <li><a href="...">write</a></li>
        </ul>
      </nav>
     </header>
     <section>
     <p>...</p>
     </section>
     <footer>
      <nav>
        <ul>
          <li><a href="...">home</a></li>
          <li><a href="...">tag</a></li>
          <li><a href="...">media log</a></li>
          <li><a href="...">location log</a></li>
          <li><a href="...">guestbook</a></li>
          <li><a href="...">admin</a></li>
          <li><a href="...">write</a></li>
        </ul>
      </nav>
      <p><small>Copyright &#169;2007-2009 woojja All Rights Reserved</small></p>
     </footer>
    </body>
    </html>

    hgoup_05.jpg

     

    hgoup_06.jpg

     

    hgoup_07.jpg

     


    3. Text 의미 부여 Element
    Text 의미 부여 Elemnet 에는 a, em, strong, small, cite, i, b, span 등 여러 Element들이 있다. 그 중 HTML 5 에 추가된 대표적인 mark, date Element 에 대해서 알아보도록 하겠다.

    3-1. mark Element
    mark Element 는 설명을 위해 특정키워드를 강조한다거나 인용문의 일부를 강조하기위해 또는 검색결과의 검색 키워드를 강조하는등의 시각적 주목효과를 Text 에 주려 한다는 것을 표현하기 위해 사용한다.

    mark_01.jpg

     

    보는 바와 같이 mark Element 를 사용하여도 외관상 Browser 에는 나타나지 않는다. 외관은 CSS 를 사용하여 표현을 해야할 것이다.

    3-2. Time Element
    Time Element 는 Browser 나 Robot 등이 시간을 정확히 이해할 수 있어야 한다는 것을 전제로 만든 Element 라고 한다. 그러므로 애매한 시점을 나타내는 표현에 이 Element를 사용하면 안된다.

    <time>06:43:21</time>
    <time>2011-05-31</time>
    <time>2011-05-31T06:43</time>
    <time>2011-05-31T06:43:21+09:00</time>

    Time Element 표현하는 방법은 아래와 같다.
    연월일 : 붙임표 ==> 2011-05-31
    연월일 시각 구분:대문자 T ==> 2011-05-31T06:43
    시분초 구분 : 콜론(:) ==> 2011-05-31T06:43:21
    타임존 포맷 추가 : +,- 표시  ==> 2011-05-31T06:43:21+09:00

    년도, 월, 월일, 일, 시, 분, 초 만을 나타낼 수는 없다.
    Time Element 는 두가지 속성이 있다. datetime 과 pubdate 인데

    datetime 속성의 경우 아래와 같이 사용하여
    <time datetime="2011-05-31">05월 31일</time>
    <time datetime="04:30">기상시간</time>
    표현하려는 내용을 컴퓨터가 이해할 수 있는 날짜 형식으로 넣을 수 있다.

    pubdate 는 말그대로 published date 다.
    블로그 article 을 작성한 시간, 페이지를 작성한 시간등을 나타낼 때 사용한다.
    당연히 각 Section 마다 단 한번만 사용할 수 있다.
    아래와 같이 사용할 수 있을 것이다.

    time_01.jpg




    4. 상호작용 Element

    4-1. Details Element
    Details Element 는 사용자에게 추가적인 상세 정보를 제공할때 사용한다. 
    Detail Element 에는 제일 처음에 Summary Element 를 넣어 추가정보의 요약이나 설명을 제공하고 Summary Element 다음에 상세한 정보를 입력하는데 그 순서를 반대로 해서는 안된다.
    반듯이 Summary Element 를 제일 처음으로...

    또 한가지 기억해야 할 것은 Details Element 를 보충설명이나 각주등의 용도로 사용해서는 안된다는 것이다.
    <!DOCTYPE HTML>
    <html lang="ko">
    <HEAD>
    <meta charset="UTF-8">
     <title>Jump To VB.NET</title>
    </HTAD>
    <body>
      <header>
        <hgroup>
          <h1>Jump To VB.NET</h1>
          <h2>Have a nice day~!</h2>
        <hgroup>   </header>   <section>
        <hgroup>
          <h1>사진촬영갑니다.</h1>
          <h2>석모도 낙조</h2>
        <hgroup>
     
        <details open="open">
          <summary>석모도 출사 정보</summary>
            <p>석모도 낙조 촬영정보 아래와 같습니다. 참고하세요.</p>
            <ul>
              <li>모델:woojja</li>
              <li>시간:<time datetime="2011-06-30T18:00:00+09:00">2011년 6월 30일 저녁 6시</time>입니다.</li>
              <li>장소:석모도 언저리</li>
            </ul>
        </details>
      </section></body>
    </html>


    details_01.jpg

     

    Summary Element 는 Open 속성을 가지고 있는데 이 속성은 Details Element 의 상세정보를 기본적으로 보여줄지, 숨길지 여부를 나타낸다.

    위 Markup 과 그림을 보면 알수 있 듯이 단순히 Text 를 표시하고 있는데... 내용을 표시하고 숨기는 기능은 javascript 를 사용하여 제어한다.

    아래 Site 를 참고 해보면 어떨까?  ^^
    http://remysharp.com/demo/details-with-js.html

     
    4-2. Menu Element 와 Command Element
    Command Element는 사용자가 호출할 수있는 명령을 나타낸다.
    아래 그림과 같은 명령아이콘을 구성할 수 있을 것이다.

    command_01.jpg

     

    Menu Element 는 Form Control List 나 Command List 를 만들때 사용하는데 Command Element 는 Menu Element 내에 포함시켜 사용해야하며 Radio Button 이나 CheckBox, Button 을 이용하여 명령어 박스를 만들 수 있게 해준다.
    Command Element 는 nav Element 와는 성격이 조금 달라서 URL 링크나 Form Action 을 처리하지 않는다.

    아래는 Command Element 와 Menu Element 에 대한 Markup 예이다.

      <div>
        <menu type="toolbar">
          <command type="radio" radiogroup="alignment" checked="checked"
              label="Left" icon="icons/alL.png" onclick="setAlign('left')">
          <command type="radio" radiogroup="alignment"
              label="Center" icon="icons/alC.png" onclick="setAlign('center')">
          <command type="radio" radiogroup="alignment"
              label="Right" icon="icons/alR.png" onclick="setAlign('right')">
          <hr>
          <command type="command" disabled
              label="Publish" icon="icons/pub.png" onclick="publish()">
        </menu>
      </div>


      <div>
        <menu type="toolbar">
          <li>
            <menu label="File">
              <button type="button" onclick="fnew()">New...</button>
              <button type="button" onclick="fopen()">Open...</button>
              <button type="button" onclick="fsave()">Save</button>
              <button type="button" onclick="fsaveas()">Save as...</button>
            </menu>
          </li>
          <li>
            <menu label="Edit">
              <button type="button" onclick="ecopy()">Copy</button>
              <button type="button" onclick="ecut()">Cut</button>
              <button type="button" onclick="epaste()">Paste</button>
            </menu>
          </li>
          <li>
            <menu label="Help">
              <li><a href="help.html">Help</a></li>
              <li><a href="about.html">About</a></li>
            </menu>
          </li>
        </menu>
      </div>
    (출처:http://www.w3.org/TR/html5/interactive-elements.html)

    아래 이미지는 위 menu Element Makrup 을 표현한 화면이다.
     

    sample-toolbar-1.jpg

    (출처:http://www.w3.org/TR/html5/interactive-elements.html)



    여기까지 Sementic Element 들에 대해서 간단히? 짚어 보았다.

    글을 진행하면서 계속 느끼는 것이지만 조금더 간단히 쓸수 있지 않을까를 생각한다.
    언제쯤 글이 간단명료해져서 내용이 확~! 줄어들수 있을까? ㅋㅋㅋ
    오늘도 긴글 읽어 주신분들 수고하셨습니다.



    HTML5 시리즈 강좌 리스트
    [HTML5강좌] 1. HTML5 개요
    [HTML5강좌] 2. HTML4 vs HTML5 (1)
    [HTML5강좌] 3. HTML4 vs HTML5 (2)
    [HTML5강좌] 4. Sementic Element (1)
    [HTML5강좌] 5. Sementic Element (2)
    [HTML5강좌] 6. Strong Web Form
    [HTML5강좌] 7. Rich Text Edit API
    [HTML5강좌] 8. Video Element
    [HTML5강좌] 9. Audio Element
    [HTML5강좌] 10. Canvas Element
    [HTML5강좌] 11. Drag & Drop API
    [HTML5강좌] 12. Offline Web Application
    [HTML5강좌] 13. Communication API
    [HTML5강좌] 14. Web Storage
    [HTML5강좌] 15. Web SQL Database
    [HTML5강좌] 16. Web Worker
    [HTML5강좌] 17. Web Socket
    [HTML5강좌] 18. Geolocation API
    [HTML5강좌] 19. SVG
    [HTML5강좌] 20. File API



    HTML5 동영상 강좌 리스트
    [HTML5 동영상 강좌] 1. HTML 5 개요
    [HTML5 동영상 강좌] 2. HTML4 vs HTML5 (1)
    [HTML5 동영상 강좌] 3. HTML4 vs HTML5 (2)
    [HTML5 동영상 강좌] 4. Sementic Element (1)
    [HTML5 동영상 강좌] 5. Sementic Element (2)
    [HTML5 동영상 강좌] 6. Strong Web Form
    [HTML5 동영상 강좌] 7. Rich Text Edit API
    [HTML5 동영상 강좌] 8. Video Element
    [HTML5 동영상 강좌] 9. Audio Element
    [HTML5 동영상 강좌] 10. Canvas Element
    [HTML5 동영상 강좌] 11. Drag & Drop API
    [HTML5 동영상 강좌] 12. Offline Web Application
    [HTML5 동영상 강좌] 13. Communication API
    [HTML5 동영상 강좌] 14. Web Storage
    [HTML5 동영상 강좌] 15. Web SQL Database
    [HTML5 동영상 강좌] 16. Web Worker
    [HTML5 동영상 강좌] 17. Web Socket
    [HTML5 동영상 강좌] 18. Geolocation API
    [HTML5 동영상 강좌] 19. SVG
    [HTML5 동영상 강좌] 20. File API

    행복한 고수되십시요.

    [출처] SQLER.COM http://www.sqler.com/385760

    woojja ))*
    \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

    http://www.jumptovb.net



    '프로그램&DB > HTML5' 카테고리의 다른 글

    [HTML5강좌] 7. Rich Text Edit API by 우정환  (0) 2011.08.02
    [HTML5강좌] 6. Strong Web Form by 우정환  (0) 2011.08.02
    [HTML5강좌] 4. Sementic Element (1) by 우정환  (0) 2011.08.01
    [HTML5강좌] 3. HTML4 vs HTML5 (2) by 우정환  (0) 2011.08.01
    [HTML5강좌] 2. HTML4 vs HTML5 (1) by 우정환  (0) 2011.08.01
     

    티스토리툴바