Canvas Element 는 HTML 5 에서 가장? 많이 주목받고 있는 새롭게 추가된 element 들 중 하나입니다.
요 녀석때문에 세간에 말이 많죠...
특히나 개발자들한테요...

실버라이트나 플래쉬는 이제 죽는거냐?
"Microsoft 는 이제 Silverlight 를 어떻게 할거냐?" (뭐 이런주제가 Canvas 때문만은 아니겠지만요... ㅋㅋ)

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

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

9-1. 사용법
<canvas id="vas" width="200" hegiht="300"></canvas>

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

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

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

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

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



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

9-2. 2D 도형그리기

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

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML 5 Canvas 예제</title>
</head>
<body>
    <canvas id="woojjaCanvas" width="200" hegiht="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>


 


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


 함수  
 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 로 봤습니다.

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

9-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>



직선말고도 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>


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

9-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 에 음영을 적용할 수 있습니다.


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


9-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 에 그려넣습니다.



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

9-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>



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

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

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

2. Tron


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

3. MugTug



http://mygtug.com/sketchpad/

4. Pacman



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



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

그럼...



행복한 고수되셔요..



woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
반응형

'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 12. Offline Web Application  (0) 2011.06.18
[HTML 5] 11. Drag & Drop API  (0) 2011.06.18
[HTML 5] 10. Canvas Element  (2) 2011.06.18
[HTML 5] 9. Audio Element  (0) 2011.06.14
[HTML 5] 8. Video Element  (3) 2011.06.10
[HTML 5] 7. Rich Text Edit API  (0) 2011.06.08
  1. maniru 2011.08.25 14:03

    좋은 강좌 감사합니다. 스터디에 많은 도움이 되었습니다.
    그런데 곳곳의 오타는 스스로 코딩을 하도록 유도하기 위해 의도하신 건가요?^^;;

    • Favicon of https://www.jumptovb.net BlogIcon woojja 2011.09.04 19:44 신고

      헙!!! 댓글! 정말 감사합니다.
      허접한 강좌가 도움이 되었다니...
      블로그라도 알려주시면 찾아뵐텐데요... 아이디만 적으셨네요... ^^;

      어디 오타가 났나요? ㅋㅋ 의도아닌 의도가 되버렸네요...
      알려주시면 고쳐 놓도록 하겠습니다. (고쳐놓지 말까요? ㅋㅋ)

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


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>




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


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

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

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


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
반응형

'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 11. Drag & Drop API  (0) 2011.06.18
[HTML 5] 10. Canvas Element  (2) 2011.06.18
[HTML 5] 9. Audio Element  (0) 2011.06.14
[HTML 5] 8. Video Element  (3) 2011.06.10
[HTML 5] 7. Rich Text Edit API  (0) 2011.06.08
[HTML 5] 6. Strong Web Form  (0) 2011.06.05

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 를 하셔야 보실 수 있을 겁니다.
^^
아래 이미지는 설치 과정입니다.

 

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


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

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

확인하시고요...

설치가 다 끝났나 봅니다.


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



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


IE 의 모양입니다.


FireFox 의 모양입니다.


Safari 의 모양입니다.


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

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


행복한 고수되셔요...

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


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

'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 10. Canvas Element  (2) 2011.06.18
[HTML 5] 9. Audio Element  (0) 2011.06.14
[HTML 5] 8. Video Element  (3) 2011.06.10
[HTML 5] 7. Rich Text Edit API  (0) 2011.06.08
[HTML 5] 6. Strong Web Form  (0) 2011.06.05
[HTML 5] 5. Sementic Element (2)  (1) 2011.06.01
  1. 스터드 2011.10.20 12:00

    정말 감사합니다 html5에 관해서 이렇게 잘 정리된 곳은 드물 것 같네요!!! 강력추천

    • Favicon of https://www.jumptovb.net BlogIcon woojja 2011.11.08 17:50 신고

      허접한 글에... 과찬이십니다.

      행복한 하루되셔요... ^^

  2. BlogIcon 감사용 2014.07.04 07:04

    정말


이번엔 사용자들이 쉽게 웹페이지를 편집할 수 있게하는 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 입문)


위 이미지를 보면 상단 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 를 제작하면 더 좋았을 듯 하지만 그 내용은 추후에 추가해 보도록 하겠습니다.
(제일 짧은 글이네요... 성의없어 보이는 것은... ㄷㄷㄷ ㅡㅡ'


행복한 고수되십시요.


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



반응형

'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 9. Audio Element  (0) 2011.06.14
[HTML 5] 8. Video Element  (3) 2011.06.10
[HTML 5] 7. Rich Text Edit API  (0) 2011.06.08
[HTML 5] 6. Strong Web Form  (0) 2011.06.05
[HTML 5] 5. Sementic Element (2)  (1) 2011.06.01
[HTML 5] 4. Sementic Element (1)  (0) 2011.05.29

+ Recent posts