HTML5 썸네일형 리스트형 [HTML5] Web Worker Web Worker는 Javascript 코드를 background에서 실행시키기 위한 기술이다. 일종의 Thread 개념이 도입되었다고 보면되겠다. 브라우져 내에서 긴시간의 Javascript 처리를 위해서는 setInterval이나 Timer등을 사용해서 시분할 처리했어야 했다. 하지만 HTML5에서 부터 제공하는 Web Worker를 이용하면 훨씬 수월하게 이런 일을 감당해낼 수 있다. Thread가 만능이 아니듯이 Web Worker도 만능은 아니다. 무조건 Web Worker를 만들어 사용할 수는 없다. 즉, 쓸데가 있고 쓰면 안되는 경우가 있으니 아래에서 소개하는 전체적인 내용을 쭉 훑어보고 이해한 뒤 사용하는 것이 좋겠다. 개념자체는 아주 심플한 편이므로 학습하는데 큰 어려움은 없을 것이다... 더보기 [HTML5] Web Storage : 웹 스토리지 Web Storage란? 웹 스토리지란 클라이언트쪽에 소량의 데이터를 저장해 두기 위한 스토리지입니다. 웹 스토리지를 다룰때는 그동안 일반적으로 사용되던 쿠키와 많이 비교를 하게 되는데요, 간단하게 한번 보도록 하겠습니다. 쿠키 4KB의 저장 용량, 크기가 작다. 같은 사이트내에서 둘 이상의 탭을 열었을 때, 둘 이상의 트랜젝션 추적에 어려움이 있다. 이 외에도 여러 보안문제가 있다. 웹 스토리지 사양에 따르면 크기 제한이 없다. 서버로 보내지 않는다.(원하면 명시적으로 보낼 수 있다.) 유효기간이 없다. JavaScript 객체를 저장할 수 있다.(정확하게는 객체의 복사본이 저장된다.) 웹 스토리지에는 Session Storage와 Local Storage가 있다. 키와 값 Web Storage는 간단.. 더보기 HTML5 사이트 모음집 HTML5 Gallery (http://html5gallery.com/) HTML5 Mania (http://www.html5mania.com/) HTML5 Elite (http://html5elite.com/) HTML-FIVE (http://html-five.net/) Site En HTML5 (http://sitenhtml5.com/) HTML5 Arena (http://www.html5arena.com/) HTML5 Awesome (http://html5awesome.com/) 더보기 [HTML5] 개요(목차)를 생각하는 마크업 개요, 아웃라인, 목차 국어사전에서 보면 개요는 아래와 같은 의미를 가지고 있습니다. 국어사전개요 (槪要) [개ː요] 맞춤법·표기법[명사] 간결하게 추려 낸 주요 내용. 영어사전에서는 아래와 같은 의미를 가지고 있습니다. 영어사전개요 (槪要) 예문보기outline, summary 개요와 아웃라인은 같은 의미로 사용됩니다. 아래에서는 개요, 아웃라인을 HTML 도큐먼트에서 추출해 내어서 목차를 작성할 것을 생각한 마크업에 대해서 얘기하려고 합니다. HTML4 와 HTML5 비교 HTML4 HTML4에서는 div를 이용한 구조를 사용했었습니다. div 요소의 id를 다르게 하여 여러 구조를 만들어 내는 방식을 사용했었죠. HTML에서의 개요를 시각화 해보면 아래처럼 볼 수 있습니다. 거의 모든 웹사이트들이 .. 더보기 HTML5 Guide 실전 HTML5 가이드 본 가이드는 웹 개발자들이 HTML5의 기본 개념을 배우고 모바일 웹에서 실질적으로 사용할 수 있도록 하기 위해 만들어졌습니다. 한국 웹 표준 커뮤니티가 주최한 HTML5 오픈 콘퍼런스의 다섯명의 발표자들이 각자 자원 봉사로 작성하였습니다. 총 5장으로 구성 되어 있으며, HTML5 소개 및 마크업, CSS3, HTML5 APIs 및 iPhone에서의 웹 앱 개발이 포함되어 있습니다. A4크기로 총 170페이지이고, B5크기로 206페이지입니다. 우선 A4에서 출력가능한 PDF 파일을 배포합니다. 많은 이용 바랍니다. 실전 HTML5 가이드 다운로드(A4 인쇄용) | B5 인쇄용 별도의 고지가 없는 한, 본 사이트의 모든 콘텐츠는 Creative Commons Attribution.. 더보기 기술 관점에서의 HTML5 주요 개념 출처 : http://cafe.naver.com/requirements/1178 세간의 이목이 HTML5에 집중되고 있는 것 같습니다. 아름다운 단어들이 많이 회자되고 있습니다만, 기술 관점에서 HTML5의 주요 개념을 써보려고 합니다. *** 기술 관점에서 HTML5를 나타내는 주요 개념 키워드는 구조와 구성이라고 할 수 있습니다. 구조는 좌우상하의 얼개 형태에 중점을 두며 구성은 요소를 모아 전체를 형성하는 것에 중점을 둡니다. 예를 들어 건물 구조라고 하고 책의 구성이라고 합니다. 건물 구조는 좌우상하 얼개가 면밀하게 연결되어 있는 반면, 책의 구성은 각 장이 연결되지 않고 독립적인 내용을 갖더라도 책 전체가 나타내려는 의도에 맞으면 됩니다. 바로 이 개념이 HTML과 HTML5의 차이입니다. HT.. 더보기 HTML5 크롬실험실 http://www.chromeexperiments.com/ HTML5 를 이용한 각종 실험들을 볼 수 있다. 더보기 Youtube는 이미 HTML5로 시험적 동영상 서비스를 진행중 Flash나 Silverlight와 같은 플러그인 설치없이도 HTML5는 동영상 재생을 가능하게 해준다. 더보기 html5 컨텐츠를 쉽게 제공하는 사이트 소개 아래 2개의 사이트는 HTML5에 대해서 공부하는데 매우 유익한 사이트이다. http://html5gallery.com/ http://html5doctor.com/ HTML5로 만들어진 사이트를 제대로 보기 위해서는 이것을 지원하는 브라우져에서 실행하자. 현재는 오페라, 파이어폭스, 구글크롬 등이다. IE8은 지원하지 않고 있다. 더보기 HTML5 CANVAS를 이용한 그림판 - Sketchpad HTML5 를 이용하여 만든 그림판이다. 거의 포토샵 수준의 툴이 구현되어있다. CANVAS가 구현되지 않은 인터넷 익스플로러(IE)는 사용할 수 없다. IE를 제외한 최신브라우저에서 가능하다.(Firefox, Safari, Chrome, Opera) 제작사에서는 추후 IE에서도 사용 가능하도록 IECanvas를 이용하여 IE에서도 사용 가능한 버전을 발표할 예정이라고 한다. Demo 보기 : http://mugtug.com/sketchpad/ 제작사 블로그 : http://www.colorjack.com/blog/ 제목이 있는 모든 창들은 드래그&드랍으로 이동시킬 수 있으며, 다 그린 결과물은 PNG파일로 저장이 가능하다. 라운딩 모서리나 반투명 표현이 CSS3로 되어있지 않은 것이 아주 조금 아쉽지만.. 더보기 HTML5 를 이용한 클라이언트 사이드 데이타베이스 저장소 이용하기 HTML5 표준스펙에 따르면 사용자 PC에 로컬 데이타베이스를 사용할 수 있는 기능을 사용할 수 있다고 한다. 일명 Web SQL Database라고 하는 이 기능을 이용하면 SQLlite와 같이 SQL문으로 사용자 PC에 데이타베이스를 만들어 다양한 응용을 가능하게 만들었다. 기존에는 쿠키등과 같은 단편적인 자료만 저장이 가능했다는 것을 감안한다면 매우 혁신적인 접근방법이 아닌가 생각한다. 아래 링크는 이 기능을 이용해 일종의 포스트잇과 같은 기능을 수행할 수 있도록 만들어졌다. 정상적인 동작모습을 보기 위해서는 Webkit엔진을 채용한 오페라나 Chrome에서 봐야한다. Demo보기 : http://webkit.org/demos/sticky-notes/index.html 포스트잇을 생성하고 글을 쓰고.. 더보기 HTML5 Canvas와 Audio 실험 Canvas와 Audio 를 이용한 HTML5 실험 데모입니다. 실험데모 : http://9elements.com/io/projects/html5/canvas/ 제작자 블로그 : http://9elements.com/io/?p=153 단, FlexFox 3.5, Safari 4, Opera, Google Chrome에서만 구동되는 모습을 볼 수 있습니다. HTML5는 IE9부터 지원한다고 하죠? 원래 이 데모는 Flash/ActionScript 3.0으로 만들어진 파티클 렌더링 기법을 javascript로 변형한거라고 합니다. Flash의 일부 기술을 HTML5를 이용하면 이렇게 적절히 변형할 수 있다는 것이 매우 흥미롭죠? 이 실험데모는 HTML5 렌더링 프레임워크인 processing.js와 HTML.. 더보기 팀 블로그에 대해 HTML5와 CSS3에 대한 자료 정리 및 공유를 위한 공간입니다. 개인적으로 HTML5에 대한 관심이 생겼고 앞으로 HTML5가 현 RIA를 주도할 것으로 예상하기 때문에 이에 대한 기술을 습득할 필요가 있다고 느꼈습니다. 몇년 더 지나야 이 기술을 사용하겠지만 웹표준의 대세로 굳힐 가능성이 상당히 크기 때문에 준비할 필요가 있을 것이라 생각합니다. 자주는 아니겠지만 지속적으로 관리하며 좋은 자료를 모아갈 예정입니다. 참여자 지돌스타(http://blog.jidolstar.com) mkyoon(http://starpl.com/mkyoon) 더보기 HTML5를 통한 개발 - Lachlan Hunt Miya님이 Lachlan Hunt가 공개한 HTML5를 통한 개발 슬라이드를 PPT로 번역한 자료입니다. Developing with HTML5.ppt 출처 : Miya님의 블로그 더보기 이전 1 다음
