HTML5 Drag and Drop

HTML5를 하나둘씩 공부해 가면서 Drag & Drop(이하 D&D)을 만났다. HTML5 이전에도 
D&D를 구현해서 사용은 하였지만 너무 복잡해서 문제를 야기 시키기도 했다. HTML5 에서는 API 차원에서 
D&D를 지원하여 보다 쉽게 구현할 수 있다.



HTML5에서 D&D 위해 추가된 속성은 Draggable 이고 관련하여 추가된 이벤트는 아래와 같다.

onDrag - Script to be run when an element is dragged

onDragEnd - Script to be run at the end of a drag operation

onDragEnter - Script to be run when an element has been dragged to a valid drop target

onDragLeave - Script to be run when an element leaves a valid drop target

onDragOver - Script to be run when an element is being dragged over a valid drop target

onDragStart - Script to be run at the start of a drag operation

onDrop - Script to be run when dragged element is being dropped



하지만 가장 간단하게 구현하는 방법은  드래그 하고자하는 엘리먼트에 대해서 Draggable 속성을 true로 설정하고 드래그 되는 대상에 드래그가 시작되었을 때의 처리와 놓여지는 대상에 드래그 되어 올라올 경우와 놓여지는 경우에 대한 처리를 해 주면 된다.(
onDragStart , 
onDragOver, 
onDrop)



우선 드래그 하고자 하는 대상에 대하여 Draggable 속성을 true로 부여하면 드래그 되어 진다.

<div id="zone1" class="zone">
    <img id="DragItem" draggable="true" src="html5_logo.jpg"/>
</div>
<br/>
<div id="zone2" class="zone">
</div>

위의 코드 만드로 이미지를 드래그 할 수 있는 준비를 한 것이다. 위에서 부여된 속성에 의해 아래처럼 드래그가 된다.

이제 D&D 관련되는 이벤트를 설정해 주었다.

드래그 시작되는 엘리먼트에 시작되었을때 발생하는 onDragStart 에 핸들러를 부여하고 받고자 하는 엘리먼트에 드래그 되어 올라오는 경우의 이벤트 onDragOver에 핸들러는 부여했다.

<script>
function dragStart(ev)
{
    ev.dataTransfer.setData("text/plain", ev.target.id);
}

function dragOver(ev)
{
    ev.preventDefault();
}
<script>
    <div id="zone1" class="zone">
        <img id="DragItem" draggable="true" src="html5_logo.jpg" onDragStart="dragStart(event)"/>
    </div>
    <br/>
    <div id="zone2" class="zone" onDragOver="dragOver(event)">
    </div>

그렇게 하면 드래그 하고자하는 것을 놓고자 하는 곳으로 드래그 하면 커서 아이콘도 바뀐다.

마지막으로 드래그 되어져서 놓였을때 받을 대상에 대한 onDrop 이벤트에 핸들러를 부여하여 처리 한다.

<script>
function dragStart(ev)
{
    ev.dataTransfer.setData("text/plain", ev.target.id);
}

function dragOver(ev)
{
    ev.preventDefault();
}
function dragDrop(ev)
{
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text/plain");
    ev.target.appendChild( document.getElementById( data ) );
}
<script>
    <div id="zone1" class="zone">
        <img id="DragItem" draggable="true" src="html5_logo.jpg" onDragStart="dragStart(event)"/>
    </div>
    <br/>
    <div id="zone2" class="zone" onDrop="dragDrop(event)" onDragOver="dragOver(event)">
    </div>

그러면 대상에 Drop을 하면 Drop 대상체가 핸들러에 의해 이를 수용 한다.

마지막으로 두 개의 Div에 대해서 Drop을 받을 수 있도로 하였다.

<script>
function dragStart(ev)
{
    ev.dataTransfer.setData("text/plain", ev.target.id);
}

function dragOver(ev)
{
    ev.preventDefault();
}
function dragDrop(ev)
{
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text/plain");
    ev.target.appendChild( document.getElementById( data ) );
}
<script>
    <div id="zone1" class="zone" onDrop="dragDrop(event)" onDragOver="dragOver(event)">
        <img id="DragItem" draggable="true" src="html5_logo.jpg" onDragStart="dragStart(event)"/>
    </div>
    <br/>
    <div id="zone2" class="zone" onDrop="dragDrop(event)" onDragOver="dragOver(event)">
    </div>

이제 두 Div 사이에 이미지를 옮길 수 있다.


드래그 시작할 때 부여되는 핸들러인 dragStart는 드래그 되어지는 대상에 대한 정보를 저장한다.

event.dataTransfer.setData("text/plain", ev.target.id);


이 명령으로 드래그 되어지는 대상의 ID를 저장한다.  드래그 되어 올려지는 대상체에 부여된 핸들러 함수는 간단하게 한 줄로 되었다.

ev.preventDefault();


이 코드는 기존의 UR을 드래그 하는 기본적인 핸들링을 방지하고 새로 정의된 D&D를 사용하기 위한 것이다.


마지막으로 Drop 되어 놓여지는 대상체에 대한 처리를 위한 dragDrop 함수 이다. 그래그 되어진 엘리먼트를 놓여지는 곳으로 이동한다. 


보다 많은 이벤트 핸들러가 있고 더 많은 기능을 구현할 수 있지만 기본 기능은 아주 간단한 코드로 구현할

Original Post : http://neodreamer-dev.tistory.com/673

HTML5 Video

HTML5에 Multimedia를 위해 Video element가 추가 되었다. video 태그를 이용하여 쉽게 웹페이지에서 동영상을 보여 줄 수 있다.



보여줄 수 있는 코덱은 MPEG4, WebM, Ogg 가 있다. Audio 와 마찬가지로 표준이 없다. 브라우저마다 지원하는 코덱이 서로 달라서 하나의 포맷으로 모든 브라우저을 대응할 수 없다. Mpeg4와 Ogg정도 구성을 해야 대부분의 브라우저를 대응할 수 있다.



video 태그 속성

• autoplay
  
  value - autoplay
  
  페이지 로딩을 마치고 동영상을  자동으로 재생할 지 여부를 설정한다. "autoplay"를 설정할 경우 동영상을 자동재생한다.
  
   


• controls
  
  value - controls
  
  동영상 재생을 제어할 제어 컨트롤을 보여줄지를 설정한다. "controls"로 설정한 경우 화면에 재생 트랙과 Volume 을 조정할 수 있는 컨트롤을 보여준다.
  
   


• height
  
  value - pixels
  
  video player 높이를 설정. 실제 영상의 비율은 유지되며 재생한다.
  
   


• width
  
  value - pixels
  
  video player 폭을 설정. 실제 영상의 비율은 유지되며 재생한다. 
  
   


• loop
  
  value - loop
  
  반복 여부를 설정한다. "loop" 설정시 재생 완료 후 반복해서 재생한다.
  
   


• muted
  
  value - muted
  
  동영상 재생시 소리 재생 여부를 설정한다. "muted"를 설정한 경우 소리는 재생되지 않는다.
  
   


• poster
  
  value - URL
  
  동영상을 불러오는 동안에 표시하는 이미지 이다. 미리 읽기가 끝나 재생이 시작되거나 사용자가 클릭한 경우 poster 이미지는 사라진다.
  
   


• preload
  
  value - auto, metadata, none
  
  동영상 데이터의 미리읽기를 할지 여부를 설정한다. "auto"로 설정한 경우 페이지 로딩이 끝나고 동영상 데이티를 읽어 들인다.
  
   


• src
  
  value - URL
  
  재생할 동영상 주소를 설정한다.
  
   

video 태그는 아래 source와 track element를 포함할 수 있다.

source는 재생하고자 하는 동영상의 정보를 담고 있으며 아래 와 같은 속성을 포함 한다.

source tag 속성

• media
  
  value - media_query
  
  Audio 리소스의 type 대한 정의라 하는데 거의 사용이 되지 않는 듯 하다.
  
  
  
  


• src
  
  value - URL
  
  재생하고자 하는 파일의 경로를 지정한다.
  
  
  
  


• type
  
  value - MIME_type (video/mp4, video/ogg, video/webm)
  
  재생하고자 하는 파일의 형식을 지정한다.
  
  video/mp4 : MPEG 4 (H264 video + AAC audio codec)
  
  video/ogg : Ogg (Theora video + Vorbis audio codec)
  
  video/webm : WebM (VP8 video codec + Vorbis audio codec)
  
   

 track은 자막에 대한 설정을 아래와 같은 속정을 포함 한다.

• default
  
  value - default
  
  기본 자막 설정
  
   


• kind
  
  value - captions, chapters, descriptions, metadata, subtitle
  
  자막 종류 설정
  
   


• label
  
  value - text
  
  기본 자막 설정
  
   


• src
  
  value - URL
  
  기본 자막 설정
  
   


• srclang
  
  value - language_code (en, ko...)
  
  기본 자막 설정
  
    

자막의 경우 WebVTT 형식을 지원한다고 하는데 이에 대해서는 좀 더 정보를 알아봐야겠다.



아래 코드는 간단하게 동영상을 재생하는 코드이다.

<!DOCTYPE html>
<HTML>
    <HEAD>
        <TITLE> HTML5 Video </TITLE>
    </HEAD>
    <BODY>
        <video controls="controls">
            <source src="Friends - [1x01] - The One where Monica gets a Roommate.mkv" type="audio/mpeg" />
            Your browser does not support the video element.
        </vedeo>
    </BODY>
</HTML>

 

&

Original Post : http://neodreamer-dev.tistory.com/664

HTML5 Audio

HTML5 에서는 Audio를 재생할 수 있는 <audio> 태그를 지원해 별도의 작업없이 바로 Audio를 재생할 수 있다.

HTML5 에서 지원하는 Audio 형식은  .mp3 .wav .ogg .m4a 이지만 모든 형식을 모든 브라우저에서 지원하지는 않는다 그렇다고 표준이 정해져 있어 모든 브라우저에서 재생되는 형식도 없다.



ogg와 mp3를 함께 구성해 놓으면 거의 모든 브라우저에서 재생이 가능 하다.

서로다른 형식의 파일을 모두 source 태그에 포함해 두면 지원되는 형식이 재생이 된다.



audio tag는 5가지 속성과 1개의 하위 항목을 가질 수 있다.



audio tag 속성

• autoplay
  
  value - autoplay
  
  자동 재생 여부를 설정 한다. "autoplay"로 설정한 경우 페이지 로딩 후 mp3를 재생한다. 
  
  
  
  


• controls
  
  value - controls
  
  재생 동작을 조작할 수 있는 제어화면 출력 여부를 설정 한다. Track 및 Volume을 조정할 수 있다. 
  
  
  
  


• loop
  
  value - loop
  
  재생 완료 후 다시 재생 여부를 설정 한다. "loop"가 설정된 경우 자동으로 다시 재생을 한다. 
  
  
  
  


• preload
  
  value - auto, metadata, none
  
  재생 해야 할 Audio를 미리 읽어들일지 여부를 설정 한다. "auto"로 설정한 경우 페이지 로딩 후 미리 읽기를 한다. 
  
  
  
  


• src
  
  value - URL
  
  재생하고자 하는 Audio 파일의 경로를 설정 한다. 
  
  

  

Audio tag 의 하위 항목 으로 <source> 를 포함 할 수있다.

<source>는 재생을 하고자 하는 Audio 파일에 대한 자세한 정보를 담고 있다. <audio> 의 속성에 src 있어 지정을할 수 있지만 Audio 파일의 형식을 지정할 수 없어 <source>를 사용하는 것이 좋다.



source tag 속성

• media
  
  value - media_query
  
  Audio 리소스의 type 대한 정의라 하는데 거의 사용이 되지 않는 듯 하다.
  
  
  
  


• src
  
  value - URL
  
  재생하고자 하는 파일의 경로를 지정한다.
  
  
  
  


• type
  
  value - MIME_type (audio/aac, audio/mp4, audio/mpeg, audio/ogg, audio/wav, audio/webm)
  
  재생하고자 하는 파일의 형식을 지정한다.
  
  

아래 HTML5 소스는 간단하게 MP3 파일을 재생하는 코드이다. audio 태그의 controls 속성만 부여하여 화면에 보이도록 하였다.

<!DOCTYPE html>
<HTML>
    <HEAD>
        <TITLE> HTML5 Audio </TITLE>
    </HEAD>
    <BODY>
        <audio controls="controls">
            <source src="rainymood30a.mp3" type="audio/mpeg" />
            Your browser does not support the audio element.
        </audio>
    </BODY>
</HTML>

 



이 파일을 Chrome 에서 불러오면 아래와 같은 재생 화면을 볼 수 있다.

&

Original Post : http://neodreamer-dev.tistory.com/663

HTML5 이건 뭐지?

요 몇일 HTML5가 뭔지 거들떠 보고 있다.

띠엄띠엄 거들떠 보고는 있는데 당최 뭐가 뭔지 모르겠다.


몇 가지 거들떠 본 바로는 문서를 구조적으로 구성할 수 있는 태그들이 추가되고 확장된 태그들도 있고 CSS로 대채할 수 있는 문자를 꾸미는 태그들을 지원하지 않는다 한다.


구성에 필요한 태그들 이외에 멀티미디어 및 Offline API가 추가 되었다. 

HTML5가 XHTML을 포함하는지 태그 사용 규약이 더 엄격해진 것 같다. 태그 사용하면서 닫는 태그 하나 빠뜨린 것으로 페이지가 정상 출력되지 않았다.


앞으로 HTML5를 틈틈이 띠엄띠엄 거들떠 보려 하는데 만만치 않은 녀

Original Post : http://neodreamer-dev.tistory.com/662

Windows Gadget에 HTML5 적용하기

Windows Gadget에 HTML5를 적용하는 방법을 찾아 보았다.

검색을 해 보았지만 쉽게 나오지 않았다. 어렵사리 찾았는데 방법이 생각보다 쉬웠다. 레지스트리를 수정하는 것도 아니고 단순히 HTML 파일에 아래 내용만 더 기술하면 되는 것이였다.

<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>

물론 시스템에 IE9가 설치 되어 있어야 한다.



HTML5의 중요한 속성중 하나인 Canvas를 테스트 해 봤다.

(HTML5 Canvas 소스 출처: http://www.w3schools.com/html5/html5_canvas.asp)

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=9"/>
        <meta http-equiv="Content-Type"    content="text/html;    charset=Unicode" />
        <style type="text/css">
        body
        {
            margin: 0;
            width: 200px;
            height: 100px;
            font-family: verdana;
            font-weight: bold;
            font-size: 20px;
        }
        #gadgetContent
        {
            margin-top: 0px;
            width: 100%: middle;
            text-align: center;
            overflow: hidden;
        }
        </style>
    </head>
    
    <body>
        <div id="gadgetContent">
        Canvas
        <canvas    id="myCanvas" width="200" height="50"></canvas>
        </div>
    </body>

<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var grd=ctx.createLinearGradient(0,0,175,50);
    grd.addColorStop(0,"#FF0000");
    grd.addColorStop(1,"#00FF00");
    ctx.fillStyle=grd;
    ctx.fillRect(0,0,175,50);
</script>
</html>

실행한 결과 아래와 같이 HTML5 Canvas위에 그라데이션이 그려졌다.

&

Original Post : http://neodreamer-dev.tistory.com/657