Facebook Joinc 그룹
Joinc QA 사이트
Tweet
joinc는 Firefox와 chrome에서 테스트 했습니다. IE에서는 테이블이 깨지거나 이미지가 보이지 않을 수 있습니다. 특히 구글 Docs이미지의 경우 엑박처리될 수 있습니다.
HTML5를 지원하는 브라우저에서 제대로 테스트 할 수 있음. Firefox, Chrome, 사파리, 오페라, IE는 9.0부터 지원할 계획이라고 한다. Chrome를 기준으로 테스트 하는 중. 역동적인 웹문서를 만들려면 자바 스크립트를 해야 하는건가.
Tweet
joinc는 Firefox와 chrome에서 테스트 했습니다. IE에서는 테이블이 깨지거나 이미지가 보이지 않을 수 있습니다. 특히 구글 Docs이미지의 경우 엑박처리될 수 있습니다.
HTML5를 지원하는 브라우저에서 제대로 테스트 할 수 있음. Firefox, Chrome, 사파리, 오페라, IE는 9.0부터 지원할 계획이라고 한다. Chrome를 기준으로 테스트 하는 중. 역동적인 웹문서를 만들려면 자바 스크립트를 해야 하는건가.
1 HTML5
그동안 잊어버리고 있었는데, HTML5의 주요 (특히 비쥬얼 측면에서)기능인 SVG와 Canvas 관련 데모 사이트를 보면서, 다시 HTML에 관심을 가지게 되었다.
이것 저것 좀 정리를 해보려고 한다.
지금의 인터넷을 만든 가장 큰 공헌을 한 장본인 이라면 TCP, IP와 HTML일 것이다. HTML의 하이퍼 링크로 전 지구적 규모의 정보 네트워크를 이룰 수 있었다. HTML,TCP,IP는 투명하게 공개되어 있으며, 구조가 단순하다는 특징을 가지고 있다. 이들 프로토콜이 성공한 이유이기도 하다.
HTML은 매우 쉬우며 정보를 전달하고, 정보의 위치를 가리키는데 효과적이긴 하지만 몇 가지 문제를 가지고 있다.
- 구조적이지 않다. 정보를 전달하는 문서라는 측면에서 봤을 때, HTML은 구조적이지 못하다. HTML4까지의 태그들은 문서에서의 요소를 표현할 수 있지만 구조적인 구성을 위한 태그들은 지원하고 있지 않다. 문서가 구조적이지 못하다는 것은 체계적인 문서 분류가 힘들다는 것을 의미한다. 특히 정확한 검색 환경을 만드는 데 문제가 된다. 현재의 HTML문서는 해당 단어가 본문에 위치하는 것인지, 메뉴에 위치하는 것인지 부가 정보영역에 위치하는 것인지 (footer)알 수가 없다. 때문에 해당 단어가 문서를 대표하는 것인지에 대한 판단이 애매모호할 수 밖에 없다. 검색의 품질을 떨어트리게 된다. 검색 개발자들은 이런 문제를 해결하기 위해서, table 혹은 div를 근거로 사이트의 구조적인 모습을 재구성 해서 본문만을 가져와서 색인을 하는 등의 편법을 쓰기도 한다. 물론 어디까지나 편법일 뿐이다.
- 애플리케이션 개발에 적합하지 않다. 현대적인 애플리케이션의 핵심은 이미지와 이미지에 대한 프로시져의 실해이다. 데스크탑 애플리케이션은 아이콘과 이벤트로 이를 구현할 수 있다. GUI환경에서 이미지 처리는 기본이기 때문에, 표준화된 애플리케이션 환경을 만들 수 있다. 예컨데, 데스크탑 애플리케이션 개발자들은 이미 표준화된 메뉴/아이콘/슬롯,이벤트 체계를 이용해서 애플리케이션을 개발할 수 있다. HTML은 이미지 처리에 매우 취약하다. 역동적인 애플리케이션의 구현이 힘들다는 의미다. HTML5에서는 canvas로 문제의 상당 부분이 해결되리라 생각된다.
- 멀티미디어 데이터 처리에서의 문제. HTML은 text문서를 해석하고 재현한다. 멀티미디어 데이터는 재현하지 않는다. 때문에 플레쉬와 같은 외부 프로그램의 도움을 받아야 했다.
1.1 HTML 문서의 구조화
HTML문서를 구조화 하기 위한 태그들이 추가되었다. 태그 이름만으로도 문서에서의 위치를 알 수 있게 되었다. 좀더 구조적인 문서의 개발이 가능할 것 같다.
HTML4에서 이런 식으로 구성했다면
HTML5에서는 아래와 같은 식으로 구성할 수 있다.
예컨데 <nav>태그는 다음과 같이 메뉴를 구성하기 위해서 사용할 수 있다.
<nav><a href=#>대문</a><a href=#>함수사전</a><a href=#>주제별 보기</a></nav>결과는 다음과 같다.
1.2 멀티 미디어 지원
별다른 플러그인 없이 멀티미디어를 지원한다. 이를 위해서 audio,video 태그를 지원한다. DJ TAKA와 Gouryella의 곡들로 채워봤음.
1.3 Canvas
HTML5에 추가되는 많은 기능 중 하나다. Javascript를 이용해서 문서에 드로잉 영역을 만들고 그래픽 작업이 가능하도록 하는 강력한 툴이다. canvas, svg로 RIA환경이 만들어지지 않을까 생각해 본다.
Opera,Firefox,Konueror, Safari 등이 2D canvas를 지원한다. IE는 테스트를 해봐야 할 것 같다. opera는 3D canvas를 지원한다. Firefox도 애드온을 설치하면 3D canvas를 사용할 수 있다.
다음과 같이 캔버스를 만들 수 있다.
<canvas id="myCanvas" width=400 height=300> 이 브라우저는 canvas를 지원하지 않습니다. </canvas>
실질적인 canvas의 제어는 Javascript로 이루어진다. getElementById 메서드를 이용해서 캔버스의 래퍼런스를 만들고 canvas api를 이용해서 그래픽 작업을 한다.
1.4 문서들
이름 | 제목 | 변경일 | 크기 | |
 | Diving In HTML5
| 2010/09/11 00:21 | 16753 | |
| HTML5 - Drawing
| 2010/04/02 23:25 | 1311 | |
| HTML5 가이드
| 2011/03/22 23:11 | 193 |