긍적적인 사고, 음식의 절제, 규칙적인 운동: HTML5 태그 글 목록http://ngio.co.kr/tc/2011-03-27T18:20:52+09:00Textcube 1.8.3.1 : Secondary Dominant[Web] HTML5 로 만드는 animation & UX홍반장http://ngio.co.kr/tc/59822011-03-23T14:21:19+09:002011-03-23T11:20:48+09:00모바일웹 모범사례 : <a href="http://www.w3c.or.kr/Translation/mwbp_flip_cards/">http://www.w3c.or.kr/Translation/mwbp_flip_cards/</a>
<br /><br />
HTML5 makes web standalone application<br />
HTML5 Showcase: 48 Potential Flash-Killing Demos<br />
<a href="http://www.hongkiat.com/blog/48-excellent-html5-demos/">http://www.hongkiat.com/blog/48-excellent-html5-demos/</a><br />
<br />
<br />
CSS3 gives rich user experiences<br />
47 Amazing CSS3 Animation Demos<br />
<a href="http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/">http://www.webdesignerwall.com/trends/ ··· demos%2F</a>
<br />
<br />
Making native apps with Web Technology<br />
•PhoneGap - <a href="http://phonegap.com">http://phonegap.com</a><br />
•Titanium appcelerator - <a href="http://www.appcelerator.com/products/">http://www.appcelerator.com/products/</a><br />
•Jo App - <a href="http://joapp.com/">http://joapp.com/</a><br />
<br />
Web UI Framework : iUI<br />
•iUI: iPhone User Interface Framework<br />
•Javascript, HTML, CSS<br />
•Demo : <a href="http://chriscarey.com/projects/mythtv/iphone/">http://chriscarey.com/projects/mythtv/iphone/</a><br />
<br />
Web UI Framework : JQTouch<br />
•JQTouch<br />
•Similar to native app UI<br />
•Javascript, HTML, CSS<br />
•JS Library<br />
•<a href="http://www.jqtouch.com/preview/demos/main/#home">http://www.jqtouch.com/preview/demos/main/#home</a>
<br /><br />
Web UI Framework : Sencha<br />
HTML5, CSS3, Javascript<br />
Resolution independent<br />
JS Library<br />
<a href="http://touchstyle.mobi/app/">http://touchstyle.mobi/app/</a><br />
<br />
Widget Runtime Demo<br />
•<a href="http://www.youtube.com/watch?v=0RYvNl1mO3M&feature=related">http://www.youtube.com/watch?v=0ryvnl1 ··· Drelated</a><br />
•<a href="http://widget.developer.vodafone.com/en/">http://widget.developer.vodafone.com/en/</a><br />
•<a href="http://www.youtube.com/watch?v=3xpS21aR-BQ">http://www.youtube.com/watch?v=3xpS21aR-BQ</a><br />
<br />
Extending Web Spec<br />
•JIL (Joint Innovation Lab)<br />
–Vodafone, VZW, Softbank, China Mobile <a href="http://www.jil.org/">http://www.jil.org/</a><br />
•BONDI(OMTP driven)<br />
•W3C Device APIs and Policy <a href="http://www.w3.org/2009/dap/">http://www.w3.org/2009/dap/</a><br />
<br />
Waikiki –WAC engine<br />
•<a href="http://public.wholesaleappcommunity.com/redmine/embedded/wac2pubrev/index.html">http://public.wholesaleappcommunity.co ··· dex.html</a><br />
•Widget Runtime<br />
1. Spec (Core + DeviceAPIs)<br />
2. Tools (SDK + RI[Reference Implementation])<br />
3. Testing (Compliance process)<br />
<br />
UI Element Kits<br />
20 Free Web UI Element Kits and Stencils<br />
<a href="http://speckyboy.com/2010/07/21/20-free-web-ui-element-kits-and-stencils/">http://speckyboy.com/2010/07/21/20-fre ··· ncils%2F</a><br />
iPhone GUI PSD Version 4<br />
<a href="http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/">http://www.teehanlax.com/blog/2010/06/ ··· sd-v4%2F</a><br />
<br />
IAd JS - <a href="http://developer.apple.com/iad/">http://developer.apple.com/iad/</a><br />
<br />MobiOne 테스트 센터 : <a href="http://www.genuitec.com/mobile/">http://www.genuitec.com/mobile/</a><br />
MobiOne 디자인 센터 : <a href="http://labs.blackbaud.com/NetCommunity/Page.aspx?pid=249">http://labs.blackbaud.com/netcommunity ··· id%3D249</a><br />
<br />
OpenAPI 개발자 사이트 : <a href="http://www.programmableweb.com/">http://www.programmableweb.com/</a><br />
<a href="http://www.openonweb.com/api">http://www.openonweb.com/api</a><br />
<a href="http://mashupkorea.org">http://mashupkorea.org</a><br />
<a href="http://code.google.com/intl/ko-KR/more/#google-apis">http://code.google.com/intl/ko-KR/more/#google-apis</a><br />
<a href="http://www.smac.or.kr/jsp/front/index.jsp">http://www.smac.or.kr/jsp/front/index.jsp</a><br />
<br />
트위터API<br />
1. Twitter API Key 받기(<a href="https://twitter.com/apps/new">https://twitter.com/apps/new</a>)<br />
2. Consumer secret, Request token 등록<br />
3. 대부분 스크립트 언어 형태 지원(JSP, PHP, ASP..)<br />
4. Twitter API(Search API, REST API)<br />
5. Twittwer4J(<a href="http://twitter4j.org/en/index.jsp">http://twitter4j.org/en/index.jsp</a>) Lib를 사용<br />
※ 참고 사항 - 개발 시 한 시간 100쿼리, 하루 1000 쿼리 테스트 제약<br />
<br />
<br />
<fieldset style="margin:20px 0px 20px 0px;padding:5px;"><legend><span><strong>크리에이티브 커먼즈 라이센스</strong></span></legend><!--Creative Commons License--><div style="float: left; width: 88px; margin-top: 3px;"><a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/2.0/kr/" target=_blank><img alt="Creative Commons License" style="border-width: 0" src="http://i.creativecommons.org/l/by-nc-nd/2.0/kr/88x31.png"/></a></div><div style="margin-left: 92px; margin-top: 3px; text-align: justify;">이 저작물은 <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/2.0/kr/" target=_blank>크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스</a>에 따라 이용하실 수 있습니다.
<!-- Creative Commons License-->
<!-- <rdf:RDF xmlns="http://web.resource.org/cc/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<Work rdf:about="">
<license rdf:resource="http://creativecommons.org/licenses/by-nc-nd/2.0/kr/" />
</Work>
<License rdf:about="http://creativecommons.org/licenses/by-nc-nd/">
<permits rdf:resource="http://web.resource.org/cc/Reproduction"/>
<permits rdf:resource="http://web.resource.org/cc/Distribution"/>
<requires rdf:resource="http://web.resource.org/cc/Notice"/>
<requires rdf:resource="http://web.resource.org/cc/Attribution"/><prohibits rdf:resource="http://web.resource.org/cc/CommercialUse"/></License></rdf:RDF> --></div></fieldset><iframe src="http://www.facebook.com/plugins/like.php?locale=ko_KR&href=http%3A%2F%2Fngio.co.kr%2Ftc%2F&layout=standard&show_faces=true&width=550&action=like&colorscheme=light&" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow=hidden; width:550px; height:60px; margin-top:10px; margin-left:5px"></iframe><script type="text/javascript" src="http://tweetmix.net/js/widgetV2.js"></script><script type="text/javascript">if(("TMXW" in window)) { new TMXW.Widget({"shape":"default","target_url":"http://ngio.co.kr/tc/","widget_title":"\uc774 \uae00\uacfc \uc5f0\uad00\ub41c \ud2b8\uc717","default_msg":"","width":"550","height":"450","color_upper_back":"93C9E6","color_upper_text":"FFFFFF","color_tweet_back":"FFFFFF","color_border":"EBEBEB","color_text":"888888","color_link":"2ABBD4","widget_type":"1","btn_type":"1","max_messages":"10","is_show_avatar":"1"}).render().start();} </script><p><strong><a href="http://ngio.co.kr/tc/5982?commentInput=true#entry5982WriteComment">댓글 쓰기</a></strong></p>[Web] 모바일OK - MOK홍반장http://ngio.co.kr/tc/59812011-03-23T11:01:17+09:002011-03-23T10:52:18+09:00<span class="c_36a bold">"<strong>모바일OK</strong>"</span> 란, 웹 사이트 또는 웹 응용에 대하여 유무선 단말의 종류에 구애 받지 않고 자유롭게 이용할 수 있도록 하는 국제 웹 표준 기술의 총칭을 의미함<br><br>한국형 모바일 웹사이트 유효성 검사 - <a href="http://v.mobileok.kr/" target="_blank">http://v.mobileok.kr/</a><br>모바일OK시범사업 메인 사이트 - <a href="http://www.mobileok.kr/" target="_blank">http://www.mobileok.kr/</a><br><br><strong>MOKStore란?
</strong><p class="mgb_20 c_36a lh15">모바일웹사이트를 제공하는 제공자에게는 모바일웹 애플리케이션의 스타트 페이지를 통한 홍보채널의 장을 제공하고, 일반 사용자에게는 우수 모바일 웹 정보 및 순위의 제공으로 모바일 웹 이용 활성화 도모함<br><a href="http://m.mokstore.com/site/list" target="_blank">http://m.mokstore.com/site/list</a></p><br>모바일OK아카데미 - <a href="http://www.mobileokacademy.or.kr/" target="_blank">http://www.mobileokacademy.or.kr/</a>
: <br> : HTML5 에 대한 강의와 자료 다운로드 가능.<br><br>
<p style="language:ko;margin-top:0pt;margin-bottom:0pt;text-align:left;
direction:ltr;unicode-bidi:embed;vertical-align:baseline;word-break:break-hangul"><span style="font-size:14.0pt;font-family:"맑은 고딕";mso-ascii-font-family:"맑은 고딕";
mso-fareast-font-family:"맑은 고딕";mso-bidi-font-family:+mn-cs;color:#0070C0;
mso-font-kerning:12.0pt;language:en-US;text-combine:letters;font-weight:bold">MOIBA
</span><span style="font-size:14.0pt;font-family:"맑은 고딕";mso-ascii-font-family:
"맑은 고딕";mso-fareast-font-family:"맑은 고딕";mso-bidi-font-family:+mn-cs;color:#0070C0;
mso-font-kerning:12.0pt;language:ko;text-combine:letters;font-weight:bold">한국무선인터넷산업연합회
</span><span style="font-size:14.0pt;font-family:굴림;mso-ascii-font-family:굴림;
mso-fareast-font-family:굴림;mso-bidi-font-family:+mn-cs;color:#0070C0;
mso-font-kerning:12.0pt;language:en-US;text-combine:letters;font-weight:bold"><span style="mso-spacerun:yes"> </span>(</span><u style="text-underline:single"><span style="font-size:14.0pt;font-family:굴림;mso-ascii-font-family:굴림;mso-fareast-font-family:
굴림;mso-bidi-font-family:+mn-cs;color:#0070C0;mso-font-kerning:12.0pt;
language:en-US;text-combine:letters;font-weight:bold">http://m.moiba.or.kr/</span></u><span style="font-size:14.0pt;font-family:굴림;mso-ascii-font-family:굴림;mso-fareast-font-family:
굴림;mso-bidi-font-family:+mn-cs;color:#0070C0;mso-font-kerning:12.0pt;
language:en-US;text-combine:letters;font-weight:bold">)</span></p>
<br><fieldset style="margin:20px 0px 20px 0px;padding:5px;"><legend><span><strong>크리에이티브 커먼즈 라이센스</strong></span></legend><!--Creative Commons License--><div style="float: left; width: 88px; margin-top: 3px;"><a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/2.0/kr/" target=_blank><img alt="Creative Commons License" style="border-width: 0" src="http://i.creativecommons.org/l/by-nc-nd/2.0/kr/88x31.png"/></a></div><div style="margin-left: 92px; margin-top: 3px; text-align: justify;">이 저작물은 <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/2.0/kr/" target=_blank>크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스</a>에 따라 이용하실 수 있습니다.
<!-- Creative Commons License-->
<!-- <rdf:RDF xmlns="http://web.resource.org/cc/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<Work rdf:about="">
<license rdf:resource="http://creativecommons.org/licenses/by-nc-nd/2.0/kr/" />
</Work>
<License rdf:about="http://creativecommons.org/licenses/by-nc-nd/">
<permits rdf:resource="http://web.resource.org/cc/Reproduction"/>
<permits rdf:resource="http://web.resource.org/cc/Distribution"/>
<requires rdf:resource="http://web.resource.org/cc/Notice"/>
<requires rdf:resource="http://web.resource.org/cc/Attribution"/><prohibits rdf:resource="http://web.resource.org/cc/CommercialUse"/></License></rdf:RDF> --></div></fieldset><iframe src="http://www.facebook.com/plugins/like.php?locale=ko_KR&href=http%3A%2F%2Fngio.co.kr%2Ftc%2F&layout=standard&show_faces=true&width=550&action=like&colorscheme=light&" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow=hidden; width:550px; height:60px; margin-top:10px; margin-left:5px"></iframe><script type="text/javascript" src="http://tweetmix.net/js/widgetV2.js"></script><script type="text/javascript">if(("TMXW" in window)) { new TMXW.Widget({"shape":"default","target_url":"http://ngio.co.kr/tc/","widget_title":"\uc774 \uae00\uacfc \uc5f0\uad00\ub41c \ud2b8\uc717","default_msg":"","width":"550","height":"450","color_upper_back":"93C9E6","color_upper_text":"FFFFFF","color_tweet_back":"FFFFFF","color_border":"EBEBEB","color_text":"888888","color_link":"2ABBD4","widget_type":"1","btn_type":"1","max_messages":"10","is_show_avatar":"1"}).render().start();} </script><p><strong><a href="http://ngio.co.kr/tc/5981?commentInput=true#entry5981WriteComment">댓글 쓰기</a></strong></p>html5game - http://html5games.net/홍반장http://ngio.co.kr/tc/59782011-03-23T10:52:38+09:002011-03-22T18:26:49+09:00http://html5games.net/ HTML5 만든 게임. jQuery 사용.<br><br>Google Pacman - <a href="https://github.com/macek/google_pacman" target="_blank">https://github.com/macek/google_pacman</a><br><br>Classic Bricks - <a href="http://billmill.org/static/canvastutorial/index.html" target="_blank">http://billmill.org/static/canvastutorial/index.html</a><br><br><br><fieldset style="margin:20px 0px 20px 0px;padding:5px;"><legend><span><strong>크리에이티브 커먼즈 라이센스</strong></span></legend><!--Creative Commons License--><div style="float: left; width: 88px; margin-top: 3px;"><a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/2.0/kr/" target=_blank><img alt="Creative Commons License" style="border-width: 0" src="http://i.creativecommons.org/l/by-nc-nd/2.0/kr/88x31.png"/></a></div><div style="margin-left: 92px; margin-top: 3px; text-align: justify;">이 저작물은 <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/2.0/kr/" target=_blank>크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스</a>에 따라 이용하실 수 있습니다.
<!-- Creative Commons License-->
<!-- <rdf:RDF xmlns="http://web.resource.org/cc/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<Work rdf:about="">
<license rdf:resource="http://creativecommons.org/licenses/by-nc-nd/2.0/kr/" />
</Work>
<License rdf:about="http://creativecommons.org/licenses/by-nc-nd/">
<permits rdf:resource="http://web.resource.org/cc/Reproduction"/>
<permits rdf:resource="http://web.resource.org/cc/Distribution"/>
<requires rdf:resource="http://web.resource.org/cc/Notice"/>
<requires rdf:resource="http://web.resource.org/cc/Attribution"/><prohibits rdf:resource="http://web.resource.org/cc/CommercialUse"/></License></rdf:RDF> --></div></fieldset><iframe src="http://www.facebook.com/plugins/like.php?locale=ko_KR&href=http%3A%2F%2Fngio.co.kr%2Ftc%2F&layout=standard&show_faces=true&width=550&action=like&colorscheme=light&" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow=hidden; width:550px; height:60px; margin-top:10px; margin-left:5px"></iframe><script type="text/javascript" src="http://tweetmix.net/js/widgetV2.js"></script><script type="text/javascript">if(("TMXW" in window)) { new TMXW.Widget({"shape":"default","target_url":"http://ngio.co.kr/tc/","widget_title":"\uc774 \uae00\uacfc \uc5f0\uad00\ub41c \ud2b8\uc717","default_msg":"","width":"550","height":"450","color_upper_back":"93C9E6","color_upper_text":"FFFFFF","color_tweet_back":"FFFFFF","color_border":"EBEBEB","color_text":"888888","color_link":"2ABBD4","widget_type":"1","btn_type":"1","max_messages":"10","is_show_avatar":"1"}).render().start();} </script><p><strong><a href="http://ngio.co.kr/tc/5978?commentInput=true#entry5978WriteComment">댓글 쓰기</a></strong></p>[Web] Html5 적용되는 브라우저별 테스트 - http://html5test.com/홍반장http://ngio.co.kr/tc/59562011-03-18T11:16:34+09:002011-03-18T10:47:21+09:00<font size="4"><a href="http://html5test.com/" target="_blank">Html5 적용되는 브라우저별 테스트 - http://html5test.com/<br><span style="color: rgb(0, 0, 0);">위 주소를 실행시키면 해당 브라우저의 적용 가능한 html5 Tag 가 나오고 점수가 매겨진다. </span><br style="color: rgb(0, 0, 0);"><span style="color: rgb(0, 0, 0);">브라우저 업데이트도 아마 영향이 있을 것이다. </span></a></font><br><br>Firefox 4버전으로 변경하고 테스트 해보니 무려 255점이나온다. 헐~ <br><br><br><br><fieldset style="margin:20px 0px 20px 0px;padding:5px;"><legend><span><strong>크리에이티브 커먼즈 라이센스</strong></span></legend><!--Creative Commons License--><div style="float: left; width: 88px; margin-top: 3px;"><a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/2.0/kr/" target=_blank><img alt="Creative Commons License" style="border-width: 0" src="http://i.creativecommons.org/l/by-nc-nd/2.0/kr/88x31.png"/></a></div><div style="margin-left: 92px; margin-top: 3px; text-align: justify;">이 저작물은 <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/2.0/kr/" target=_blank>크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스</a>에 따라 이용하실 수 있습니다.
<!-- Creative Commons License-->
<!-- <rdf:RDF xmlns="http://web.resource.org/cc/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<Work rdf:about="">
<license rdf:resource="http://creativecommons.org/licenses/by-nc-nd/2.0/kr/" />
</Work>
<License rdf:about="http://creativecommons.org/licenses/by-nc-nd/">
<permits rdf:resource="http://web.resource.org/cc/Reproduction"/>
<permits rdf:resource="http://web.resource.org/cc/Distribution"/>
<requires rdf:resource="http://web.resource.org/cc/Notice"/>
<requires rdf:resource="http://web.resource.org/cc/Attribution"/><prohibits rdf:resource="http://web.resource.org/cc/CommercialUse"/></License></rdf:RDF> --></div></fieldset><iframe src="http://www.facebook.com/plugins/like.php?locale=ko_KR&href=http%3A%2F%2Fngio.co.kr%2Ftc%2F&layout=standard&show_faces=true&width=550&action=like&colorscheme=light&" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow=hidden; width:550px; height:60px; margin-top:10px; margin-left:5px"></iframe><script type="text/javascript" src="http://tweetmix.net/js/widgetV2.js"></script><script type="text/javascript">if(("TMXW" in window)) { new TMXW.Widget({"shape":"default","target_url":"http://ngio.co.kr/tc/","widget_title":"\uc774 \uae00\uacfc \uc5f0\uad00\ub41c \ud2b8\uc717","default_msg":"","width":"550","height":"450","color_upper_back":"93C9E6","color_upper_text":"FFFFFF","color_tweet_back":"FFFFFF","color_border":"EBEBEB","color_text":"888888","color_link":"2ABBD4","widget_type":"1","btn_type":"1","max_messages":"10","is_show_avatar":"1"}).render().start();} </script><p><strong><a href="http://ngio.co.kr/tc/5956?commentInput=true#entry5956WriteComment">댓글 쓰기</a></strong></p>HTML5 referencR - https://developer.mozilla.org/en-US/docs홍반장http://ngio.co.kr/tc/58232011-01-20T10:05:20+09:002011-01-20T10:05:20+09:00HTML5 referencR - https://developer.mozilla.org/en-US/docs<br><br><img src="http://ngio.co.kr/tc/attach/1/6720618119.jpg" width="670" height="614" /><br><fieldset style="margin:20px 0px 20px 0px;padding:5px;"><legend><span><strong>크리에이티브 커먼즈 라이센스</strong></span></legend><!--Creative Commons License--><div style="float: left; width: 88px; margin-top: 3px;"><a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/2.0/kr/" target=_blank><img alt="Creative Commons License" style="border-width: 0" src="http://i.creativecommons.org/l/by-nc-nd/2.0/kr/88x31.png"/></a></div><div style="margin-left: 92px; margin-top: 3px; text-align: justify;">이 저작물은 <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/2.0/kr/" target=_blank>크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스</a>에 따라 이용하실 수 있습니다.
<!-- Creative Commons License-->
<!-- <rdf:RDF xmlns="http://web.resource.org/cc/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<Work rdf:about="">
<license rdf:resource="http://creativecommons.org/licenses/by-nc-nd/2.0/kr/" />
</Work>
<License rdf:about="http://creativecommons.org/licenses/by-nc-nd/">
<permits rdf:resource="http://web.resource.org/cc/Reproduction"/>
<permits rdf:resource="http://web.resource.org/cc/Distribution"/>
<requires rdf:resource="http://web.resource.org/cc/Notice"/>
<requires rdf:resource="http://web.resource.org/cc/Attribution"/><prohibits rdf:resource="http://web.resource.org/cc/CommercialUse"/></License></rdf:RDF> --></div></fieldset><iframe src="http://www.facebook.com/plugins/like.php?locale=ko_KR&href=http%3A%2F%2Fngio.co.kr%2Ftc%2F&layout=standard&show_faces=true&width=550&action=like&colorscheme=light&" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow=hidden; width:550px; height:60px; margin-top:10px; margin-left:5px"></iframe><script type="text/javascript" src="http://tweetmix.net/js/widgetV2.js"></script><script type="text/javascript">if(("TMXW" in window)) { new TMXW.Widget({"shape":"default","target_url":"http://ngio.co.kr/tc/","widget_title":"\uc774 \uae00\uacfc \uc5f0\uad00\ub41c \ud2b8\uc717","default_msg":"","width":"550","height":"450","color_upper_back":"93C9E6","color_upper_text":"FFFFFF","color_tweet_back":"FFFFFF","color_border":"EBEBEB","color_text":"888888","color_link":"2ABBD4","widget_type":"1","btn_type":"1","max_messages":"10","is_show_avatar":"1"}).render().start();} </script><p><strong><a href="http://ngio.co.kr/tc/5823?commentInput=true#entry5823WriteComment">댓글 쓰기</a></strong></p>[HTML] <canvas> tag홍반장http://ngio.co.kr/tc/56102010-11-02T21:58:56+09:002010-11-02T21:58:56+09:00<h1>HTML 5 <span class="color_h1"><canvas></span> Tag</h1>
<hr>
<table class="example" width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td>
<h2 class="example">Example</h2>
<p>How to display a red square, with the canvas element:</p>
<table class="example_code notranslate" width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td><canvas id="myCanvas"></canvas><br>
<br>
<script type="text/javascript"><br>
<br>
var canvas=document.getElementById('myCanvas');<br>
var ctx=canvas.getContext('2d');<br>
ctx.fillStyle='#FF0000';<br>
ctx.fillRect(0,0,80,100);<br>
<br>
</script></td>
</tr>
</tbody></table>
<br>
<a target="_blank" href="http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_canvas" class="tryitbtn">Try it yourself »</a></td>
</tr>
</tbody></table>
<hr>
<h2>Definition and Usage</h2>
<p>The <canvas> tag is used to display graphics.</p>
<p>The <canvas> tag is only a container for graphics, you must use
a script to actually paint graphics. </p>
<hr>
<h2>Differences Between HTML 4.01 and HTML 5</h2>
<p>The <canvas> tag is new in HTML 5.</p>
<hr>
<h2>Tips and Notes</h2>
<p><strong>Tip:</strong> You can write text between the start and end tags, to show
older browser that they do not support this tag.</p>
<p><strong>Note:</strong> Some browsers already support the <canvas> tag, like
Firefox, Chrome, and Opera.</p>
<hr>
<h2>Attributes</h2>
<p><span class="new" style="float: left;">New</span> : New in HTML 5.</p>
<table class="reference" width="100%" border="1" cellpadding="0" cellspacing="0">
<tbody><tr>
<th valign="top" width="20%" align="left">Attribute</th>
<th valign="top" width="20%" align="left">Value</th>
<th valign="top" width="50%" align="left">Description</th>
</tr>
<tr>
<td valign="top">height<span class="new">New</span></td>
<td valign="top"><em>pixels</em></td>
<td valign="top">Sets the height of the canvas</td>
</tr>
<tr>
<td valign="top">width<span class="new">New</span></td>
<td valign="top"><em>pixels</em></td>
<td valign="top">Sets the width of the canvas</td>
</tr>
</tbody></table>
<h2>Standard Attributes</h2>
<p>The <canvas> tag also supports the <a href="http://www.w3schools.com/html5/html5_ref_standardattributes.asp">Standard Attributes in HTML 5</a>.</p>
<hr>
<h2>Event Attributes</h2>
<p>The <canvas> tag also supports the <a href="http://www.w3schools.com/html5/html5_ref_eventattributes.asp">Event Attributes
in HTML 5</a>.</p><fieldset style="margin:20px 0px 20px 0px;padding:5px;"><legend><span><strong>크리에이티브 커먼즈 라이센스</strong></span></legend><!--Creative Commons License--><div style="float: left; width: 88px; margin-top: 3px;"><a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/2.0/kr/" target=_blank><img alt="Creative Commons License" style="border-width: 0" src="http://i.creativecommons.org/l/by-nc-nd/2.0/kr/88x31.png"/></a></div><div style="margin-left: 92px; margin-top: 3px; text-align: justify;">이 저작물은 <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/2.0/kr/" target=_blank>크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스</a>에 따라 이용하실 수 있습니다.
<!-- Creative Commons License-->
<!-- <rdf:RDF xmlns="http://web.resource.org/cc/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<Work rdf:about="">
<license rdf:resource="http://creativecommons.org/licenses/by-nc-nd/2.0/kr/" />
</Work>
<License rdf:about="http://creativecommons.org/licenses/by-nc-nd/">
<permits rdf:resource="http://web.resource.org/cc/Reproduction"/>
<permits rdf:resource="http://web.resource.org/cc/Distribution"/>
<requires rdf:resource="http://web.resource.org/cc/Notice"/>
<requires rdf:resource="http://web.resource.org/cc/Attribution"/><prohibits rdf:resource="http://web.resource.org/cc/CommercialUse"/></License></rdf:RDF> --></div></fieldset><iframe src="http://www.facebook.com/plugins/like.php?locale=ko_KR&href=http%3A%2F%2Fngio.co.kr%2Ftc%2F&layout=standard&show_faces=true&width=550&action=like&colorscheme=light&" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow=hidden; width:550px; height:60px; margin-top:10px; margin-left:5px"></iframe><script type="text/javascript" src="http://tweetmix.net/js/widgetV2.js"></script><script type="text/javascript">if(("TMXW" in window)) { new TMXW.Widget({"shape":"default","target_url":"http://ngio.co.kr/tc/","widget_title":"\uc774 \uae00\uacfc \uc5f0\uad00\ub41c \ud2b8\uc717","default_msg":"","width":"550","height":"450","color_upper_back":"93C9E6","color_upper_text":"FFFFFF","color_tweet_back":"FFFFFF","color_border":"EBEBEB","color_text":"888888","color_link":"2ABBD4","widget_type":"1","btn_type":"1","max_messages":"10","is_show_avatar":"1"}).render().start();} </script><p><strong><a href="http://ngio.co.kr/tc/5610?commentInput=true#entry5610WriteComment">댓글 쓰기</a></strong></p>[도서구매] 마이크로소프트웨어 7월호, 오리진이 되라.홍반장http://ngio.co.kr/tc/53722010-07-19T10:51:04+09:002010-07-19T10:51:04+09:00<span style="font-weight: bold; color: rgb(0, 0, 255);">마이크로소프트웨어 7월호</span>(2010.07)<br><img src="http://ngio.co.kr/tc/attach/1/8717969855.jpg" width="225" height="280" /><br><br><span style="font-weight: bold; color: rgb(0, 0, 255);">오리진이 되라</span> : 운명을 바꾸는 창조의 기술<br><img src="http://ngio.co.kr/tc/attach/1/3432143709.jpg" width="187" height="280" /><br><strong>[ 목 차 ]</strong><br>책을 내면서 | 대한민국 창조학교를 꿈꾸며 <br>프롤로그 | 창조 : 놀랍고 재미있는 것들을 보았을 때 나온 영감을 끝까지
잡아채서 만든 요리<br><br><strong>1. 목숨 걸고 사랑하라 : High Love</strong><br>예술은 우리에게 무엇인가<br>르
네상스가 인본주의인 이유<br>진정한 사랑과 담배회사가 만나면?<br>‘애절함’으로 만든 와인 이름 암기법<br>상상력의 근원은
애절함<br>Inspiration Box 변기회사 토토의 애절한 사랑<br><br><b>2. 고통을 모르면 그를 기쁘게 할 수
없다 : High Pain & Joy</b><br>창조를 만드는 두 가지 원천 <br>남이 보지 못한 아픔을 보면 새로움이
보인다<br>남이 주지 못한 기쁨을 주는 것이 새로움이다<br>Inspiration Box 아픔과 기쁨의 세계, 인문학<br>Inspiration
Box 기쁨 주고 사랑받는다! 광고에서의 하이 페인 앤 조이<br><br><b>3. 창조의 목적지, 새로운 시공간을 선사하라 :
High Time & Place</b><br>창조적인 플레이의 기본조건<br>핵심조건 : 예상을 뛰어넘는 새로운 시간과
공간 만들기<br>시간이 바뀌면 미래가 바뀐다<br>Inspiration Box 당신은 퓨처마킹을 하고 있는가?<br><br><b>4.
뒤집고 섞어야 새로운 세상이 열린다 : High Mix</b><br>아오모리 메시지<br>무엇을 섞을 것인가 : 융합의 종류<br>하
이믹스 1 : 예상을 뛰어넘는 엉뚱한 것과의 융합<br>하이믹스 2 : 문화예술과의 융합<br>영감은 어디에서 오는가?<br>Inspiration
Box 창조집안 가계도<br><br><strong>5. 컨셉이 없으면 창조도 없다 : High Concept</strong><br>컨셉 있음과
컨셉 없음<br>열광의 조건 : 컨셉<br>컨셉이 있어야 상상력을 꺼낼 수 있다<br>그렇다면, 컨셉이란 무엇인가<br>매력적인
컨셉의 두 가지 조건 <br>하이컨셉의 핵심 : ‘엉뚱하고 가치 있는’<br>Inspiration Box 자판기 앞에서 생각하는
‘자판기 인생’<br><br><strong>6. 내가 먼저 주면, 그가 내 것이 된다 : High Touch</strong><br>[시크릿]
이야기에서 내가 얻은 것<br>남자화장실을 통해 본 하이터치의 세계<br>하이터치, 첫 번째로 주어야 할 것 : ‘웃음, 재미
그리고 약간의 야함과 역발상’<br>하이터치, 두 번째로 주어야 할 것 : ‘인간관계의 미묘한 감정을 풀어주는 것들’ <br>하이
터치, 세 번째로 주어야 할 것 : ‘사람들이 공감하고 행동할 의미와 명분’<br>하이터치, 네 번째로 주어야 할 것 : ‘꿈과
판타지’<br>Inspiration Box 줄탁동시(?啄同時)<br><br><strong>7. 마음의 벽을 깨라 : High Soul</strong><br>하
이소울의 첫 번째 키워드 : ‘미치도록 아름다운’<br>하이소울의 두 번째 키워드 : ‘겁나게(?) 착한’<br>하이소울의 세
번째 키워드 : ‘대담하고 상상을 뛰어넘는’<br>하이소울의 네 번째 키워드 : ‘너무나도 완벽한’<br>하이소울의 다섯 번째
키워드 : ‘그까이꺼!’<br>주의사항 : 고집과 똥고집을 구분하라!<br>Inspiration Box 소울의 높이가 상상력의
높이를 결정한다<br><br><strong>8. 예상을 깨는 이야기를 만들어라 : High Story</strong><br>로댕은 왜 10년 동안
[칼레의 시민]에 몰두했는가<br>이야기 만드는 법 : 이야기의 원형(原型) 20가지<br>비즈니스에서 이야기를 만드는 법 :
‘드림 소사이어티’<br>뱀장수는 최고의 이야기꾼<br>Inspiration Box 세계 최고의 판타지 스토리, 라스베이거스<br><br><b>9.
새로운 세상과 만나는 위대한 느림 : High Slow</b><br>정수기와 메가트렌드<br>다시 생각해보는 물질주의와 GNH<br>월
악산 기 수련원에서 얻은 가르침<br>슬로 라이프, ‘FINISH & T’<br>산화와 환원, 그리고 라마단의 지혜를 우리
삶에도!<br>Inspiration Box 클리나멘(clinamen)<br><br><b>10. 오리진이 되어 세상을 바꿔라 :
High Action</b><br>스스로 창조하는 자, 오리진이 되는 법<br>새로운 영감의 뒤에는 새로운 전쟁이 기다리고 있다<br>집
중력 발휘조건 1 : ‘할 수 있다’는 자신감<br>집중력 발휘조건 2 : 즐겁게 미쳐라<br>집중력 발휘조건 3 :
올인(all-in)<br><br>에필로그 | 운명을 바꾸는 만남이었기를 희망하며<br>감사의 글<br>참고문헌<br><br><br>.<br><br><br><br><fieldset style="margin:20px 0px 20px 0px;padding:5px;"><legend><span><strong>크리에이티브 커먼즈 라이센스</strong></span></legend><!--Creative Commons License--><div style="float: left; width: 88px; margin-top: 3px;"><a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/2.0/kr/" target=_blank><img alt="Creative Commons License" style="border-width: 0" src="http://i.creativecommons.org/l/by-nc-nd/2.0/kr/88x31.png"/></a></div><div style="margin-left: 92px; margin-top: 3px; text-align: justify;">이 저작물은 <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/2.0/kr/" target=_blank>크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스</a>에 따라 이용하실 수 있습니다.
<!-- Creative Commons License-->
<!-- <rdf:RDF xmlns="http://web.resource.org/cc/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<Work rdf:about="">
<license rdf:resource="http://creativecommons.org/licenses/by-nc-nd/2.0/kr/" />
</Work>
<License rdf:about="http://creativecommons.org/licenses/by-nc-nd/">
<permits rdf:resource="http://web.resource.org/cc/Reproduction"/>
<permits rdf:resource="http://web.resource.org/cc/Distribution"/>
<requires rdf:resource="http://web.resource.org/cc/Notice"/>
<requires rdf:resource="http://web.resource.org/cc/Attribution"/><prohibits rdf:resource="http://web.resource.org/cc/CommercialUse"/></License></rdf:RDF> --></div></fieldset><iframe src="http://www.facebook.com/plugins/like.php?locale=ko_KR&href=http%3A%2F%2Fngio.co.kr%2Ftc%2F&layout=standard&show_faces=true&width=550&action=like&colorscheme=light&" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow=hidden; width:550px; height:60px; margin-top:10px; margin-left:5px"></iframe><script type="text/javascript" src="http://tweetmix.net/js/widgetV2.js"></script><script type="text/javascript">if(("TMXW" in window)) { new TMXW.Widget({"shape":"default","target_url":"http://ngio.co.kr/tc/","widget_title":"\uc774 \uae00\uacfc \uc5f0\uad00\ub41c \ud2b8\uc717","default_msg":"","width":"550","height":"450","color_upper_back":"93C9E6","color_upper_text":"FFFFFF","color_tweet_back":"FFFFFF","color_border":"EBEBEB","color_text":"888888","color_link":"2ABBD4","widget_type":"1","btn_type":"1","max_messages":"10","is_show_avatar":"1"}).render().start();} </script><p><strong><a href="http://ngio.co.kr/tc/5372?commentInput=true#entry5372WriteComment">댓글 쓰기</a></strong></p>플러그인 기반의 RIA를 대체하라! HTML5와 웹의 미래홍반장http://ngio.co.kr/tc/53652010-07-16T13:38:27+09:002010-07-16T13:38:27+09:00<P class=title2><STRONG><FONT color=#0000ff size=2>플러그인 기반의 RIA를 대체하라!</FONT></STRONG></P>
<P class=title1><STRONG><FONT color=#0000ff size=2>HTML5와 웹의 미래</FONT></STRONG> </P><BR>
<P class=contentsbox><EM>애플의 아이폰과 아이패드가 플래시 지원을 하지 않기로 하면서 HTML5에 대한 관심이 폭발적으로 증가했다. HTML5가 화두가 되고 시간이 어느 정도 흘렀지만, 여전히 HTML5와 웹의 미래에 관한 의견들은 여러 갈래로 나뉘어져 있다. 앞으로 다가올 웹의 미래가 어떨지 아무도 정확히 알 수는 없다. 하지만 현재의 상황을 잘 파악한다면 좋은 예측은 가능할 것이다. 이 글에서는 HTML5와 웹의 미래에 대해 생각해 본다.</EM> </P>
<P>사실 웹에 관심을 가지고 있던 사람이 아니라면, HTML에 버전이 있었다는 사실에 당황했을지도 모른다. 그냥 간단한 태그로 이뤄진 언어 정도로만 생각하고 있었을 것이다. 그럼 HTML5에 대해 간략히 설명하기 위해 영문 위키피디아에 있는 HTML5의 정의를 인용해 보도록 하겠다.<BR><BR>‘HTML5는 현재 사용되고 있는 HTML 4.01과 XHTML 1.0의 다음 버전으로 사용될 예정으로 개발 진행 중이다. HTML5의 목적은 플러그인 기반의 RIA(Rich Internet Application) 사용을 줄이는 데 있다. 대표적인 예로는 어도비의 플래시, 마이크로소프트의 실버라이트가 있다. HTML5는 또한 CSS3의 추가적 사용도 포함되는데, 두 기술은 함께 개발 중인 상태다.’ <BR><BR>여기에 HTML5의 특징을 한 가지 덧붙이자면, 강화된 자바스크립트 API를 꼽을 수 있다. 플러그인 기반의 RIA 기술을 대체하기 위한 가장 중요한 요소 중 하나이기도 하다. 그럼 HTML5의 새로운 기술들을 살펴보기 전에 먼저 HTML5의 기본이 되는 HTML과 CSS의 역사에 대해 간략히 살펴보자.<BR><BR><STRONG>■ HTML과 CSS의 역사</STRONG><BR>HTML은 1989년 팀 버너스리(Tim Berners-Lee)라는 물리학자에 의해 시작되었다. 그 후 약 3년을 주기로 버전이 올라가다가 1999년 12월 마침내 HTML4.01이 W3C의 권고안(Recom mendation)을 받는다(W3C의 권고안을 받는다는 것은 최종 심사를 마치고 표준으로 인정받는 것을 뜻한다). HTML5는 2004년 6월 작업이 시작되었으며 현재 W3C에서 작업 초안 상태(Working Draft state)이다. CSS는 HTML과 XHTML은 물론이고 XML의 웹페이지 스타일을 표현하는 것도 가능한 언어다. CSS는 1996년 12월에 W3C의 권고안을 받아 CSS1이 공식적으로 나왔다. 그 후 1998년 5월에 다시 W3C 권고안을 받으며 CSS2가 나온다. 그리고 같은 해 CSS3의 개발에 들어갔지만 아직도 진행 중인 상태다. <BR>HTML과 CSS의 발전 속도를 살펴보면 급변하는 웹의 발전 속도에 비해 더딘 편임을 알 수 있다. 물론 같은 수준으로 비교 할 수는 없겠으나, 웹의 일부라고 할 수 있는 어도비의 플래시의 경우 처음 출시된 이후 2~3년마다 한 번씩 새로운 버전이 출시되고 있으며, 마이크로소프트의 실버라이트 또한 2007년 출시된 후 벌써 네 번째 버전이 나온 상태이다.<BR><BR><STRONG>■ HTML5의 소개</STRONG><BR><BR>HTML5 표준의 범위를 정확히 구분하는 데에는 다소 애매한 부분이 없지 않다. 기존 HTML 표준의 한계를 극복하기 위한 차세대 표준으로서의 목적과 플러그인 없이 RIA를 제공하려는 목적을 동시에 가지고 있기 때문이다. HTML5의 새로운 부분들을 크게 HTML, CSS, 자바스크립트 API 이렇게 세 가지로 나눠 소개해 보도록 하겠다.<BR><BR><STRONG>■ HTML의 변화</STRONG><BR><BR>HTML5의 두드러진 변화로 먼저 새로운 태그들의 등장을 꼽을 수 있다. 기존의 웹페이지 레이아웃을 구성할 때는 각 부분의 특성과는 관계없이
<DIV>태그를 이용해 나누는 방식이었다. 그리고 id 속성을 주어 각 부분을 구분했다. 이렇게 웹 개발자가 임의로 id를 넣는 방식을 취하다 보니 일관성이 없는 문제가 있었다. 예를 들어 각 메뉴들을 선택할 수 있는 내비게이션이 있는 영역의 id는 “nav”가 되기도 하고 “menu”가 되기도 하는 것이다. 그래서 <HEADER>, <NAV>와 같이 의미 있는(Semantic) 태그들이 등장했다. 새로운 태그들을 이용하면 <그림 1>과 같은 구조로 웹페이지를 구성할 수 있다. 이런 변화는 겉으로 드러나지 않기 때문에 사용자들에게는 큰 의미가 없을 수도 있다. 하지만 검색엔진의 크롤링 능력 향상과 일관성 있는 웹페이지 구조 설계가 가능하다는 효과를 기대할 수 있다.<BR>
<P><div class="imageblock center" style="text-align: center; clear: both;"><img src="http://ngio.co.kr/tc/attach/1/6640770693.jpg" alt="사용자 삽입 이미지" height="307" width="368" /></div></P>
<P>다음 기능으로 웹폼2.0이 있다. 기존의 웹폼에 있는 <INPUT> 태그에 새로운 타입(type)들이 추가된 버전이다. 기존 <INPUT> 태그의 종류는 텍스트박스, 콤보박스 버튼, 라디오 버튼 등이 있었다. 거기에 달력을 생성해 주는 “date” 타입 시간을 표현해 주는 “time” 타입 등이 추가되었다. 기존에 수십 줄 이상의 자바스크립트 코드가 있어야 가능했던 달력 생성이 단 한 줄의 HTML 코드만으로 표현이 가능해진 것이다(<그림 2> 참고). 그 외에 유효성 검증과 같이 자바스크립트가 추가되어야만 구현이 가능하던 많은 부분들이 간단한 태그만으로 구현이 가능해졌다. 이 기능은 웹 개발자의 입장에서 봤을 때는 놀랍고 가슴 뛰게 하는 부분이다. 하지만 내부를 들여다 볼 수 없는(볼 수 있더라도 보지 않는) 일반 사용자가 경험하기에는 큰 차이를 느낄 수 없는 부분이기도 하다. 아쉽게도 현재 웹폼2.0 기능은 오페라 브라우저에서만 이용할 수 있다.<BR><div class="imageblock center" style="text-align: center; clear: both;"><img src="http://ngio.co.kr/tc/attach/1/4871746819.jpg" alt="사용자 삽입 이미지" height="195" width="277" /></div><BR><BR><STRONG>■ CSS의 새로운 기능</STRONG><BR><BR>HTML5의 일부라고 할 수 있는 CSS3에도 새로운 기능들이 많이 추가되었다. 웹 개발자로서 가장 놀랐던 기능 중에 하나는 애니메이션 기능이다. 기존에는 복잡한 자바스크립트 코드가 들어가야만 가능하던 것이 CSS만으로도 가능하게 된 것이다. 그리고 기존에는 포토샵과 같은 그래픽 툴을 이용해서 작업해야 하던 많은 부분들이 CSS만으로 가능해졌다. 예를 들면 글자에 그림자 효과나 투명도, 테두리를 주는 것이 가능해졌고, 사각 박스 테두리를 둥글게 만들어 주는 효과가 가능해졌다. 이런 기능이 가능해지면 웹페이지에 택스트 이미지와 같은 불필요한 이미지의 사용을 줄일 수 있다. 그러면 웹페이지가 좀 더 웹 친화적이 될 수 있다. 필요한 내용이 있어서 복사를 하려고 드래그했더니 글자들이 하나의 이미지로 되어 있어 불편했던 경험이 한번쯤은 있을 것이다. 그 외에 웹 개발자나 웹 디자이너 입장에서는 웹사이트 수정이 용이해진다는 장점도 있다.<BR>물론 아직은 미흡한 점도 있다. 먼저 가장 큰 문제로 브라우저 지원의 문제가 있다. 조금 전 소개한 기능의 경우 웹킷(Webkit) 레이아웃 엔진을 사용하는 구글 크롬과 애플의 사파리 브라우저 외에는 아직 제대로 지원하는 브라우저가 없다. 그리고 두 번째로 브라우저 호환성 문제가 있다. 현재 CSS3를 지원하고 있는 2개의 브라우저마저도 일부 기능들이 서로 조금씩 다르게 표현되고 있다. 일관된 UX(User Experience)를 제공하고 싶은 기업이라면 사용하기 곤란한 기능이 될 수 있다. <BR><div class="imageblock center" style="text-align: center; clear: both;"><img src="http://ngio.co.kr/tc/attach/1/4498859466.jpg" alt="사용자 삽입 이미지" height="157" width="298" /></div></P>
<br />
<P><STRONG>■ 자바스크립트 API</STRONG><BR><BR>웹 개발자들에겐 희소식이 아닐 수 없는 강력한 자바스크립트 API들도 많이 등장했다. 먼저 소개할 기능은 ‘드래그 앤 드롭’이다. 운영체제상에서 컴퓨터를 이용할 때는 너무나도 자연스럽게 사용해 왔던 기능이지만 정작 웹페이지에서는 플러그인 기반의 애플리케이션 없이는 사용할 수 없었던 기능이다. 쇼핑몰에서 카트에 물건을 넣거나 파일을 웹페이지로 올리는 등의 작업을 할 때 더 편리하게 수행할 수 있을 것??컬에 있는 파일을 드래그해서 넣을 수 있는 기능이 구현되어 있다. 다만 아직 이 기능은 구글 크롬과 파이어폭스에서만 이용이 가능하다.<BR>다음으로 지오로케이션(Geolocation)이라는 기능이 있다. 사용하고 있는 기기의 IP나 MAC 주소, GPS 정보 등을 이용해 현재 위치를 알아내는 기능이다. 위치를 기반으로 한 맛집 정보 제공과 같은 유용한 곳에 활용될 수 있다. 이외에도 같은 도메인에서만 사용이 가능하다는 쿠키의 단점을 극복해 줄 수 있는 Web Storage 기능, 연결이 불안정한 모바일 기기에서 유용하게 쓰일 수 있는 Web SQL Database 기능, 자바스크립트에서 스레드와 같이 두 가지 이상의 작업을 동시에 가능하게 하는 Web Workers 기능 등 유용한 기능들이 많이 추가되었다. 훌륭한 기능들이지만 앞서 설명했던 CSS와 같이 아직은 많은 브라우저들이 안정되게 지원하지 못한다는 아쉬움이 있다.<BR><img src="http://ngio.co.kr/tc/attach/1/6871035688.jpg" width="299" height="235" /></P>
<P><img src="http://ngio.co.kr/tc/attach/1/6677300012.jpg" width="718" height="170" /><BR> </P>
<P><STRONG>■ 플러그인 기반 RIA 대체 가능 기능</STRONG><BR><BR>아직 소개하지 않은 중요한 기능이 있다. 현재 인터넷상의 대부분의 동영상 재생과 애니메이션 효과에 사용되고 있는 플래시를 대체할 수 있는 Video와 Canvas 태그가 그것이다. HTML5 동영상이나 애니메이션을 사용할 때 얻게 되는 장점은 많다. 먼저 플러그인 기반의 소프트웨어가 필요 없어진다는 점이다. 특정 업체의 제품에 의존하지 않고 같은 효과를 낼 수 있게 되는 것이다. 그리고 CSS, 자바스크립트 등과 자연스럽게 연동할 수 있다는 장점도 있다. <BR>반면 여전히 가지고 있는 한계점도 있다. 먼저 HTML5 동영상 기능의 경우, 아직 코덱에 관련된 이슈가 완전히 해결되지 않은 상황이다. 현재 브라우저마다 지원하는 동영상 압축 방식이 달라 하나의 동영상을 제공하기 위해 2~3개의 서로 다른 압축 방식을 사용한 동영상 파일을 이용하고 있는 상황이다. 그리고 전체화면 모드를 지원하지 않는다는 단점도 있다. 이 점은 브라우저에 완전히 종속적인 HTML5의 특성상 상대적으로 해결하기 힘든 문제일 것으로 예상된다. <BR>HTML5를 이용한 애니메이션 기능도 아직은 미비한 점이 많다. HTML5를 이용한 애니메이션 사이트들을 본다면, 웹 개발자들은 “우와! 이런 것도 가능해?”라고 느끼겠지만 플래시 애니메이션에 익숙해져 있던 일반인들은 “이게 새로운 기술이야?”라는 반응을 보일 수 있다. 전용 제작 툴을 이용해 제작한 것과 자바스크립트 코딩만으로 제작한 것의 퀄리티는 크게 차이가 날 수밖에 없다. 성능상의 문제도 있다. 인터넷상에서 조금 검색해 보면, 똑같은 효과를 내는 애니메이션을 HTML5를 이용해 제작한 것과 플래시로 제작해 비교 분석한 사이트들이 많다. 결과를 보면 속도나 CPU 점유율 면에서 플래시가 우세한 것을 볼 수 있다. 이를 보고 “HTML5는 아직 얼마 되지 않은 기술인데 금방 발전해서 따라잡을 수 있지 않을까?”라고 생각할 수 있을 것이다. 물론 HTML5 기술은 아주 빠르게 발전하고 있다. 하지만 플래시와 HTML5의 애니메이션의 속도 차이에는 근본적인 원인이 있다. 먼저 플래시는 미리 컴파일된 상태로 웹에 올라간 후 액션스크립트 가상머신에 의해 실행된다. 반면에 자바스크립트는 인터프리티드 언어(Interpreted language)로 소스 코드가 그대로 웹에 올라가 한 줄씩 읽히며 실행된다. 그로 인해 발생되는 성능 차이는 쉽게 예상할 수 있을 것이다. 렌더링 방식의 차이에서 오는 성능 차이도 있다. 자바스크립트는 Immediate mode를 사용하고 플래시는 Retained mode를 사용하고 있다. 자바스크립트는 한 줄을 읽고 바로 실행하고 실행되는 동안 기다리고 있다가 다시 다음 줄을 읽는 방식이다. 반면에 플래시는 코드를 미리 다 읽은 다음 한꺼번에 실행하는 방식이다. 2개 이상의 코어를 가진 CPU의 경우 렌더링 작업을 나눠 할 수 있는 것이다. <그림 2>를 보면 좀 더 이해가 쉬울 것이다.<BR><BR><STRONG>■ HTML5는 언제 사용 가능할까?</STRONG><BR><BR>그렇다면 HTML5를 언제쯤 사용할 수 있을까? 그것을 알아보기 위해 아직은 HTML5를 사용하기 힘들게 만드는 문제점들을 살펴보자. 문제점은 크게 세 가지로 나눌 수 있다.<BR>먼저 성능과 안전성의 문제다. HTML5는 아직 개발이 진행 중인 기술이다. 빠르게 진행되고 있다고는 하지만, 이때까지의 HTML과 CSS의 발전 속도를 봤을 때 과연 얼마나 빠를 수 있을지에 대해 의문이 생긴다. 영문 위키피디아를 보면, HTML5의 에디터인 Ian Hickson은 HTML5가 2012년 중에 후보 권고안 단계를 밟을 것이고 최종 권고안을 받는 것은 2022년이나 그 후로 예상한다고 되어 있다. 많은 부분들이 현재 안정적이고 구현 가능하다고는 되어 있지만, 또 많은 부분들은 그렇지 않다는 의미다.<BR>다음으로 브라우저 간 호환성 문제가 있다. 앞서 CSS3나 자바스크립트 API를 소개할 때 말했듯이 같은 코드로 작성된 것이 브라우저마다 다르게 보일 수 있다. 자바스크립트의 경우 다르게 보이는 데 그치지 않고 아예 작동조차 하지 않을 수도 있다. 웹사이트 하나를 만들 때마다 2~3개의 브라우저에서 제대로 동작하는지를 확인하며 개발해야 하는 것이다. 그러면 개발 비용도 자연히 올라가게 될 것이다. 이것은 현재도 겪고 있는 문제이긴 하다. 하지만 앞으로 CSS나 자바스크립트를 이용한 개발이 많아지고, 그것의 복잡도가 높아질수록 호환성 문제는 더욱 크게 다가올 것이다.<BR>마지막으로 브라우저의 지원 미비에 따른 문제를 들 수 있다. 앞서 말했던 두 가지 문제들은 어렵더라도 개발자가 노력한다면 극복할 수 있는 문제다. 하지만 이 문제는 사용자들이 변해야 하는 문제라서 시간이 해결해 주길 기다릴 수밖에 없는 부분이다. 현재 많은 브라우저들이 빠른 속도로 HTML5를 지원하기 위해 발전하고 있다. 하지만 가장 시장 점유율이 높은 IE(Internet Explorer)의 HTML5 지원은 많이 부족한 편이다. 다음 버전인 IE9에서는 HTML5 지원을 강화하겠다고는 하지만 현재까지의 상황으로 봐서는 IE9 역시 타 브라우저에 비해서는 부족해 보인다. 사용자들이 브라우저를 업그레이드하는 데 걸리는 시간도 감안해야 한다. 현재 IE8까지 나온 상황이지만 국내 브라우저 점유율을 보면, 2001년도에 출시된 IE6가 여전히 40%를 넘고 있다. IE9이 HTML5 기술들을 타 브라우저들 못지않게 지원하면서 대부분의 사용자들이 동시에 IE9으로 업그레이드하거나, 국내 IE의 점유율이 10% 이하로 떨어지거나 하는 이 둘 중 하나가 가능하다면 HTML5의 사용 시기를 앞당길 수 있겠지만 둘 다 최소한 5년 이내에는 이뤄지지 않을 것으로 예상된다. <BR>그렇다면 HTML5에 대해서는 그 동안 손 놓고 있어야 한다는 말인가? 그건 아니다. 앞으로 HTML5는 모바일 시장에서 매우 중요해질 것으로 예상된다. 아이폰, 안드로이드, 노키아, 팜프리와 같은 대부분(65% 점유율)의 스마트폰 브라우저들이 Webkit을 이용해 만들어졌다. 이것은 앞서 말한 브라우저 호환성 문제와 브라우저 지원 문제를 해결해 주는 부분이다. 현재 다양한 디바이스들에 다양한 플랫폼과 개발 언어들이 존재하고 있다. 기업에서 각 디바이스에 맞춘 애플리케이션을 제작하는 데에는 한계가 있다. 그러한 한계를 극복하기 위한 용도로서도 모바일에서 HTML5의 중요도는 더욱 높아질 것이다. </P>
<br />
<P class=sub1>필자소개</P>
<P><STRONG>이상현</STRONG> hammerha@gmail.com|이스트소프트에서 웹 개발자로서 일하고 있다. 다양한 언어를 이용해 다양한 프레임워크와 다양한 플랫폼에서 자유롭게 개발할 수 있도록 공부 중이다. </P>
<P><STRONG><a href="http://www.imaso.co.kr/" target=_blank><FONT color=#810081><INS>출처 : 한국마이크로소프트</INS></FONT></a></STRONG></P>
<P><A href="/" target=_blank><STRONG><FONT color=midnightblue><INS>제공 : DB포탈사이트 DBguide.net </INS></FONT></STRONG></A><BR><BR><a href="http://www.dbguide.net/knowledge.db?cmd=view&boardUid=146432&boardConfigUid=20&boardStep=&categoryUid=574">http://www.dbguide.net/knowledge.db?cm ··· id%3D574</a></P></DIV><fieldset style="margin:20px 0px 20px 0px;padding:5px;"><legend><span><strong>크리에이티브 커먼즈 라이센스</strong></span></legend><!--Creative Commons License--><div style="float: left; width: 88px; margin-top: 3px;"><a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/2.0/kr/" target=_blank><img alt="Creative Commons License" style="border-width: 0" src="http://i.creativecommons.org/l/by-nc-nd/2.0/kr/88x31.png"/></a></div><div style="margin-left: 92px; margin-top: 3px; text-align: justify;">이 저작물은 <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/2.0/kr/" target=_blank>크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스</a>에 따라 이용하실 수 있습니다.
<!-- Creative Commons License-->
<!-- <rdf:RDF xmlns="http://web.resource.org/cc/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<Work rdf:about="">
<license rdf:resource="http://creativecommons.org/licenses/by-nc-nd/2.0/kr/" />
</Work>
<License rdf:about="http://creativecommons.org/licenses/by-nc-nd/">
<permits rdf:resource="http://web.resource.org/cc/Reproduction"/>
<permits rdf:resource="http://web.resource.org/cc/Distribution"/>
<requires rdf:resource="http://web.resource.org/cc/Notice"/>
<requires rdf:resource="http://web.resource.org/cc/Attribution"/><prohibits rdf:resource="http://web.resource.org/cc/CommercialUse"/></License></rdf:RDF> --></div></fieldset><iframe src="http://www.facebook.com/plugins/like.php?locale=ko_KR&href=http%3A%2F%2Fngio.co.kr%2Ftc%2F&layout=standard&show_faces=true&width=550&action=like&colorscheme=light&" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow=hidden; width:550px; height:60px; margin-top:10px; margin-left:5px"></iframe><script type="text/javascript" src="http://tweetmix.net/js/widgetV2.js"></script><script type="text/javascript">if(("TMXW" in window)) { new TMXW.Widget({"shape":"default","target_url":"http://ngio.co.kr/tc/","widget_title":"\uc774 \uae00\uacfc \uc5f0\uad00\ub41c \ud2b8\uc717","default_msg":"","width":"550","height":"450","color_upper_back":"93C9E6","color_upper_text":"FFFFFF","color_tweet_back":"FFFFFF","color_border":"EBEBEB","color_text":"888888","color_link":"2ABBD4","widget_type":"1","btn_type":"1","max_messages":"10","is_show_avatar":"1"}).render().start();} </script><p><strong><a href="http://ngio.co.kr/tc/5365?commentInput=true#entry5365WriteComment">댓글 쓰기</a></strong></p>