'html5'에 해당되는 글 5건

  1. 2010.09.16 IE9 beta1 공개
  2. 2010.09.07 Web App 개발
  3. 2010.07.05 HTML5에 추가된 새로운요소들
  4. 2010.04.26 HTML5와 HTML4의 차이점
  5. 2010.04.26 HTML5의 모든것
it/etc2010. 9. 16. 17:14

한국시간으로 9월16일 새벽 ‘인터넷 익스플로러9 베타1′이 정식 공개됐다. 쉽고, 빠르고, 편리하고, 안전한 웹 경험을 제공한다는 마이크로소프트(MS) 최신 웹브라우저다. 공개된 지 만 하루가 안 지났음에도, 곳곳에서 찬사가 들린다. 새 IE9의 변화에 대한 기대감이 엿보인다. 왜 아니겠는가.

MS 조사에 따르면, PC를 쓰는 시간 가운데 절반이 넘는 57%가 웹브라우징에 쓰인다고 한다. 한국 인터넷 이용자 100명 가운데 96명은 IE로 웹을 즐긴다. 이 IE 이용자 10명 가운데 4명은 아직도 IE6를 쓴다. 태어난 지 10년도 더 된 낡은 웹브라우저로 웹을 소비하다보면 곳곳에서 구멍이 뚫리게 마련이다. 발전하는 기술을 제대로 담아내기도 버거울 뿐더러 보안 빗장도 느슨한 탓이다.

그러니 새 IE9를 보노라면 격세지감을 느끼게 된다. 무엇보다 웹표준을 적극 지원하려는 노력이 눈에 띈다. IE9는 차세대 웹표준인 HTML5나 CSS3을 온전히 지원하는 웹브라우저다. 10여년 전만 해도 어땠나. 액티브X 같은 자체 기술이나 비표준 태그로 도배된 웹사이트를 돌아다니며 별다른 불편함을 느끼지 못했다. 그저 IE에서 잘 보이면 그 뿐이었다. 다양한 웹브라우저에서 똑같은 웹 경험을 제공해야 한다는 당연한 사실은 무시됐다.

‘웹표준’이란 개념을 국내에서 인식하게 된 것도 불과 5년 남짓. 그 전까지 ‘가두리 웹’ 주범으로 손꼽히던 MS IE가 이젠 웹표준 지원을 핵심 기치로 내건다. 격세지감을 느끼되, 반가운 일이다.

MS는 2009년 3월 IE8을 내놓을 때부터 웹표준 지원 의지를 공공연히 드러냈다. IE8은 W3C 웹표준 준수 테스트인 ACID2를 통과한 MS 첫 웹브라우저였다. IE9는 더욱 표준에 가깝게 다가섰다. HTML5와 CSS3, SVG와 DOM에 대한 지원을 강화했고 ACID3 테스트에서도 100점 만점에 95점을 받았다.

웹표준을 따르게 되면 개발자는 여러 웹브라우저 환경에 맞게 일일이 따로 웹사이트나 콘텐츠를 개발할 필요가 없다. 한 번 개발하면 서로 다른 OS나 웹브라우저, 다른 기기에서 똑같은 이용자 경험을 제공할 수 있기 때문이다. 이용자도 플러그인을 따로 설치할 필요 없이 웹브라우저 그 자체로 풍부한 웹 콘텐츠 경험을 즐길 수 있게 된다. 누이 좋고 매부 좋은 일이다.

“현재 웹이 아닌, 미래 웹 환경을 담을 수 있어야 개발자와 이용자를 모두 만족시킬 수 있다고 판단하고 그런 웹브라우저를 만들려고 고민하고 주력했다”고 정근욱 한국MS 상무는 IE9 기획 의도를 설명했다.

이 밖에도 IE9에선 크고 작은 변화들이 여럿 보인다. 무엇이 바뀌었을까.

먼저, 이용자 화면(UI)부터 보자. IE9는 매우 단순한 UI를 채택했다. 그 흔한 메뉴 바도 없다. 창 윗쪽엔 검색창과 앞·뒤 버튼, 탭 영역이 자리잡고 있고, 기존 메뉴 바 대신 ‘홈’, ‘즐겨찾기’, ‘설정’ 아이콘만 화면 오른쪽 위에 배치했다. 꼭 필요한 명령 메뉴만 드러내는 대신 웹사이트가 부각되도록 디자인한 모양새다. 플러그인을 설치하거나 각종 경고를 내보내는 알림창도 웹브라우저 화면 아랫쪽에 뜨도록 바꿨다. 화면을 가리거나 웹브라우징 경험을 방해받지 않도록 한 배려다.

화면 윗쪽에 따로 배치돼 있던 검색창은 주소창과 통합됐다. 주소창에서 웹사이트 주소 대신 검색어를 넣으면 미리 지정해둔 기본 검색엔진의 검색 결과로 바로 이동할 수 있다. 굳이 검색 결과 화면으로 이동하지 않아도 미리보기 형태로 곧바로 확인할 수도 있다. IE8부터 제공하던 ‘비주얼 서치’ 기능이 IE9에도 그대로 들어가 있는 덕분이다.

속도도 빨라졌다. IE9는 IE8보다 11배 빠른 새로운 자바스크립트 엔진을 적용했다. PC의 GPU 기능을 활용하는 하드웨어 가속 기능을 제공해 비디오 스트리밍이나 온라인게임처럼 대용량 그래픽 작업이 필요할 때도 PC 하드웨어 자원을 100% 활용할 수 있게 했다.

웹을 돌아다니다보면 자신도 모르게 깔리는 각종 플러그인들은 PC와 웹브라우저를 느리게 만드는 주범 가운데 하나다. IE9에선 이를 막고자 ‘추가기능(Add-on) 성능 관리자’ 기능을 제공한다. 만약 이용자가 툴바 같은 추가기능을 설치했다면 웹브라우저 하단에 경고 메시지가 뜨고, 이를 누르면 해당 추가기능이 어느 정도 웹브라우징 시간을 지연시키는 지 확인할 수 있도록 했다. 이용자는 이를 보고 추가기능 사용 여부를 조절하면서 웹브라우징 속도를 빠른 상태로 유지할 수 있게 된다.

윈도우7 이용자라면 IE9를 보다 쉽고 편리하게 쓸 수 있다. 윈도우7 주요 기능과 유기적으로 결합된 기능들이 여럿 덧붙었기 때문이다. 예컨대 즐겨찾는 웹사이트를 마우스로 끌어다 작업표시줄에 고정해두면 편리하다. 작업표시줄 아이콘만 누르면 곧바로 해당 웹사이트를 띄워 쓸 수 있으며, 웹브라우저 앞·뒤 버튼도 그 웹사이트 색상에 맞춰 바뀐다. 이렇게 작업표시줄에 고정된 웹사이트는 윈도우7 ‘점프목록’ 기능을 이용해 웹사이트 미리보기, 추가 명령어 실행 등을 할 수 있다. 고정된 웹사이트 목록을 마우스로 누른 채로 위로 드래그하면 추가 명령어 목록이 뜬다.

‘탭 분리’ 기능도 윈도우7 기본 기능을 활용한 사례다. 탭 브라우징을 하다 보면 서로 다른 두 개 화면을 나란히 놓고 비교하고플 때가 있다. 이 때 각 탭을 번갈아 오가는 대신, 탭을 마우스로 끌어다 모니터 왼쪽·오른쪽에 붙여보자. 두 개 화면을 나란히 보면서 비교할 수 있다. 윈도우7의 ‘에어로 스냅’ 기능을 IE9 탭 분리 기능과 접목한 셈이다.

보안도 더욱 강화됐다. IE9는 멀웨어 차단 비율을 85%로 높이고 1억6천만건에 이르는 피싱 사이트 데이터베이스를 제공한다. ‘다운로드 매니저’ 기능도 보안을 강화했다. 잘 알려지지 않았거나 문제가 있는 파일을 내려받으면 경고 메시지와 더불어 해당 프로그램을 내려받을 지 삭제할 지 여부를 묻는 창이 따로 뜬다. 의심되는 파일을 한두 단계 더 거쳐 내려받도록 함으로써 보안 위협을 줄인 모양새다.

IE9 베타1은 한국어를 포함해 33개 언어로 제공된다. MS는 IE9 베타1 출시에 발맞춰 이용자가 직접 성능을 체험해볼 수 있는 테스트 페이지를 제공한다. IE9 베타1을 설치하고 테스트 페이지에 접속하면 빨라진 속도나 웹표준 지원 여부를 직접 확인할 수 있다.

이번에 공개된 IE9는 베타1 버전이다. 국내 금융서비스 이용시 아직까지 호환성이 완벽히 확보된 제품이 아니란 뜻이다. 이석현 한국MS 부장은 “내부 테스트 결과로는 전체 웹사이트의 70% 정도는 현재 IE9 베타에서도 이용하는 데 문제 없으며, 시중은행 웹사이트도 절반 정도는 현재 상태로도 이용하는 데 아무 문제가 없는 것으로 파악됐다”라며 “120여곳 금융권 웹사이트를 대상으로 조사를 진행하고 있으며, 정식 버전 출시 때는 문제 없도록 최대한 지원할 예정”이라고 말했다.

IE9는 윈도우 비스타 이상 OS에서 이용할 수 있다. 정식 버전은 내년 봄께 선보일 예정이다.

정근욱 상무는 “앞으로의 웹은 아름답고, 풍부하고, 빠르고, 직관적이고, 안전한 웹으로 탈바꿈할 것”이라며 “한국 이용자가 웹의 아름다움을 충분히 만끽할 수 있도록 IE9 정식버전이 출시될 때까지 최선의 노력을 다하겠다”고 말했다.

'it > etc' 카테고리의 다른 글

ACID3 테스트  (0) 2010.09.16
Posted by 수라
web standard/mobile2010. 9. 7. 15:52

출처 : http://xguru.net/551


2009년 이후로 HTML5 는 예전 AJAX 때와 비슷하게 웹 개발의 대세 처럼 인식되고 있습니다. 이 추세는 애플/구글 이 HTML5 에 대한 적극적인 지원을 표명하면서 더욱 활발해 지고 있는데요. 애플/구글 둘다 모바일에서 아이폰/안드로이드로 대결구도가 펼쳐지면서 앞서거니 뒷서거니 HTML5 를 이용한 혁신을 이끌어 내고 있습니다.

전 개인적으로 모바일 웹 어플리케이션에 관심을 가지고, 모바일 시작페이지인 m.xguru.net sizac.kr을 비롯하여 , 지름도우미 with RedLaser 처럼 앱과 웹을 연동하거나, 아이폰에 사진으로 전화걸기 아이콘 만들기 – QuickGuru 처럼 데스크탑/모바일이 연동된 아이폰 웹 어플리케이션을 테스트해 왔습니다.

이제 HTML5 를 이용해서 좀 더 네이티브 앱과 비슷한 웹 앱(Web App)을 만드는 방법을 소개합니다.

아래 자료는 6월12~13일간 열린 KT 의 Econovation 개발자 캠프에서 먼저 발표를 했는데요. 아직은 국내 아이폰 앱 개발자분들이 Objective-C 를 이용한 네이티브 앱에 관심들이 많으셔서 그런지, 조금 생소한 주제였던듯 합니다. 하지만 모바일에서의 HTML5 를 이용한 어플리케이션 개발은 분명한 장점을 가지고 있습니다. 한번만 작성하면 아이폰/안드로이드/블랙베리/심비안등 여러개의 플랫폼에 큰 문제없이 바로 적용이 가능하다는 것이죠. 강의에서는 이 모바일에서의 HTML5 를 이용한 개발의 장점에 대해 설명하고 어떻게 앱을 만드는지를 소개하려고 노력했습니다.

HTML5 로 iPhone App 만들기

자료의 내용은 4가지 주제로 이루어 집니다.

  • HTML5 – HTML5 자체의 기능에 대한 설명입니다. 이건 따로 웹사이트에 HTML5 slide 오픈소스를 수정해서 자료를 만들어 두었습니다. http://dev.xguru.net/html5 에서 보실수 있습니다.
  • iPhone Web Application 아이폰의 웹 어플리케이션 작성방법에 대한 간략한 소개입니다. 기존 웹 사이트 관리자들도 참고하실만 합니다
  • jQTouch, iUI , WebApp.Net 웹에서 아이폰 UI 스타일을 표현하기 위한 UI 프레임워크 들을 간략히 소개합니다.
  • PhoneGap 웹 어플리케이션을 아이폰 네이티브 어플리케이션으로 만들어주는 Phonegap 프레임워크를 소개합니다.

기본적으로 HTML,CSS,Javascript 에 대한 약간의 지식은 있다고 가정하고 작성을 했구요. ^^;

강의는 먼저 HTML5 의 기능중에서 모바일에 중요한 기능들을 설명하고, 아이폰에서 웹 앱을 만드는 방법에 대한 소개, 그리고 웹에서 아이폰 스타일의 UI 를 작성하는 방법 , 그리고이렇게 작성된 웹 앱을 네이티브 앱으로 만들어주는 Phonegap 을 소개하는 순으로 진행됩니다. 제가 말이 좀 많고 빠른편이라 슬라이드에는 설명은 그리 많지 않습니다. ^^;

아무래도 발표용 자료로 만든것이라 슬라이드만 보고 전체를 이해하시기에는 조금 어려울듯도 한데요. 궁금한 부분 있으시면 저에게 문의 주세요.
앞으로 미진한 부분을 조금씩 보강해 나가겠습니다. 혹시 필요하시다면 이 주제에 대한 세미나 요청은 메일로 보내 주세요

Posted by 수라
web standard/html52010. 7. 5. 11:27
HTML5에서 삭제된 태그 HTML5에서 생성된 태그
태그 설명 버전 속성들
<!— —> 주석 – Comment 4 / 5 없음
<!DOCTYPE> 문서 타입 – document type 4 / 5 없음
<a> 하이퍼링크 – hyperlink 4 / 5 href | hreflang | media | ping | rel | target | type
<abbr> 약어, 약자 – abbreviation 4 / 5 Global Attributes
<acronym> 두문자어 – abbreviation 4 -
<address> 주소 요소 – address element 4 / 5 Global Attributes
<applet> 애플릿 – applet 4 -
<area> 이미지맵 범위 – area inside in image map 4 / 5 alt | coords | href | hreflang | media | ping | rel | shape | target | type
<article> 구역, 섹션 – article 5 Global Attributes
<aside> outside the main flow of the narrative 5 Global Attributes
<sound> 사운드 콘텐츠 – sound content 5 autobuffer | autoplay | controls | loop | src
<b> 텍스트 진하게 – bold text 4 / 5 Global Attributes
<base> 페이지 내 모든 링크의 기본 링크 – base URL for all the page links 4 / 5 href | target
<basefont> 문서 내 기본 폰트 – base font for the document 4 -
<bb> 유저 에이젼트 호출 – invoked user agent 5 type
<bdo> 텍스트 출력 방향 – direction of text display 4 / 5 dir
<big> 큰 텍스트 – big text 4 -
<blockquote> 긴 인용문 – long quotation 4 / 5 cite
<body> body 엘리먼트 – body element 4 / 5 Global Attributes
<br> 한 줄 바꿈 – insert a single line break 4 / 5 Global Attributes
<button> 버튼 – push button 4 /5 autofocus | disabled | form | formaction | formenctype | formmethod | formnovalite | formtarget | name | type | value
<canvas> 그래픽 범위 – canvas area 5 width | height
<caption> 테이블 제목 – table caption 4 / 5 Global Attributes
<center> 텍스트 중앙 정렬 – centerd text 4 -
<cite> 인용 – citation 4 / 5 Global Attributes
<code> 컴퓨터 코드 텍스트 – computer code text 4 / 5 Global Attributes
<col> 테이블 컬럼 속성 – attributes for table columns 4 / 5 span
<colgroup> 테이블 컬럼 그룹 – groups of table columns 4 / 5 span
<command> 명령 버튼 – command button 5 checked | default | disabled | hidden | icon | label | radiogroup | type
<datagrid> 트리, 리스트, 테이블의 데이터 – data in a tree, list or tabular 5 disabled
<datalist> 드롭다운 리스트 – dropdown list 5 Global Attributes
<dd> 정의 설명 – definition description 4 / 5 Global Attributes
<del> 삭제된 텍스트 – deleted text 4 / 5 cite | datetime
<details> 요소의 세부 항목 – details of an element 5 open
<dialog> 대화 (회화) – dialog (conversation) 5 Global Attributes
<dir> 디렉토리 리스트 – directory list 4 -
<div> 문서 섹션 – setion in a document 4 / 5 Global Attributes
<dfn> 용어 정의 – definition term 4 / 5 title
<dl> 정의 목록 – definition list 4 / 5 Global Attributes
<dt> 용어 정의 – definition term 4 / 5 Global Attributes
<em> 텍스트 강조 – emphasized text 4 / 5 Global Attributes
<embed> 외부 인터렉션 콘텐츠 또는 플러그인 – external interactive content or plugin 5 height | src | type | width
<fieldset> 필드셋 – fieldset 4 / 5 disabled | form | name
<figure> 미디어 콘텐츠 그룹과 그것들의 제목 – group of media content, and their caption 5 Global Attributes
<font> 텍스트 폰트, 사이즈, 색상 – text font, size, and color 4 -
<footer> 섹션 또는 페이지 풋터 – footer for a section or page 5 Global Attributes
<form> 서식(폼) – form 4 / 5 action | data | replace | accept | accept-charset | enctype | method | target
<frame> 서브 윈도우 – sub window 4 -
<frameset> 프레임 세트 – set of frames 4 -
<h1> ~ <h4> 헤드 요소 – header 1 to header 6 4 / 5 Global Attributes
<head> 문서에 대한 정보 – information about ther document 4 / 5 -
<header> 세션 또는 페이지의 헤더 5 Global Attributes
<hgroup> 헤딩 섹션 – heading section 5 Global Attributes
<hr> 수평 선 – horizontal rule 4 / 5 Global Attributes
<html> html 문서 – html document 4 / 5 manifest
<i> 텍스트 기울기 – italic text 4 / 5 Global Attributes
<iframe> 내부 서브 윈도우(프레임) – inline sub window(frame) 4 / 5 src | name | sandbox | seamless | width | height
<iframe> 내부 서브 윈도우(프레임) – inline sub window(frame) 4 / 5 src | name | sandbox | seamless | width | height
<img> 이미지 – image 4 / 5 alt | src | height | ismap | usemap | width
<input> 입력 필드 – input field 4 / 5 accept | alt | autocomplete | autofocus | checked | disabled | form | formaction | formenctype | formmethod | formnovalite | formtarget | height | list | max | maxlength | min | multiple | name | patter | placeholder | readonly | required | size | src | step | type | value | width
<ins> 삽입된 텍스트 – inserted text 4 / 5 cite | datetime
<isindex> 한 줄 입력 필드 – single-line input field 4 -
<kbd> 키보드 텍스트 – keyboard text 4 / 5 Global Attributes
<label> 폼 콘트롤에 대한 라벨 – label for a form control 4 / 5 for
<legend> 필드셋 타이틀 – fieldset title 4 / 5 Global Attributes
<li> 리스트 아이템 – list item 4 / 5 value
<link> 참조 리소스 – resource reference 4 / 5 href | rel | media | hreflang | type |sizes
<mark> 기호 텍스트 – marked text 5 Global Attributes
<map> 이미지 맵 – image map 4 / 5 id
<menu> 메뉴 리스트 – menu list 4 / 5 id
<meta> 메타 정보 – meta information 4 / 5 charset | content | http-equiv | name
<meter> 정의 된 범위내에서의 측정 – measurement within a predefined range 5 Global Attributes
<nav> 내비게이션 링크들 – navigation links 5 Global Attributes
<noframes> 노 프레임 섹션 – noframe section 4 -
<noscript> 노 스크립트 섹션 – noscript section 4 / 5 -
<object> 오브젝트 임베디드 – embeded object 4 / 5 data | height | type | usemap | width | object
<ol> 순서 리스트 – ordered list 4 / 5 start | reversed
<optgroup> 옵션 그룹 – option group 4 / 5 disabled | label
<option> 드롭-다운 리스트의 옵션 – option in a drop-down list 4 / 5 disabled | label | selected | value
<output> 출력의 몇가지 형식들 – some types of output 5 form
<p> 단락 – paragraph 5 Global Attributes
<param> 오브젝트 파라미터 – parameter for an object 4 / 5 name | value
<pre> 설정된 텍스트 – preformatted text 4 / 5 Global Attributes
<progress> 어떠한 작업의 진행 사항 – progress of a task of any kind 4 / 5 Global Attributes
<q> 짧은 인용문 – short quotation 4 / 5 cite
<ruby> 루비 주석 – ruby annotations 5 Global Attributes
<rp> 루비 텍스트 주위로 괄호를 생성 – provide parentheses around a ruby text 5 Global Attributes
<rt> 루비 텍스트 콤포넌트 – ruby text component 5 Global Attributes
<s> 중간라인 텍스트 – strikethrough text 4 -
<samp> 샘플 컴퓨터 코드 – sample computer code 4 / 5 Global Attributes
<script> 스크립트 – script 4 / 5 async | type | defer | src | charset
<section> 섹션 – section 5 cite
<select> 선택 가능한 리스트 – selectable list 4 / 5 autofocus | data | disabled | form | multiple | name
<small> 작은 텍스트 – small text 4 / 5 Global Attributes
<source> 미디어 리소스 – media resources 5 media | src | type
<span> 내부 섹션 – inline section 4 / 5 Global Attributes
<strike> 중간라인 텍스트 – strikethrough text 4 -
<strong> 굵은 글씨 – strong text 4 / 5 Global Attributes
<style> 스타일 선언 – style definition 4 / 5 media | type | scoped
<sub> 아래 첨자 – subscripted text 4 / 5 Global Attributes
<sup> 위 첨자 – superscripted text 4 / 5 Global Attributes
<table> 테이블 – table 4 / 5 Global Attributes
<tbody> 테이블 body – table body 4 / 5 Global Attributes
<td> 테이블 쉘 – table cell 4 / 5 colspan | rowspan | headers
<textarea> 텍스트 text area 4 / 5 autofocus | cols | disabeld | form | name | readonly | required | rows | maxlength | placeholder | wrap
<tfoot> 테이블 풋터 – table footer 4 / 5 Global Attributes
<th> 테이블 헤더 – table header 4 / 5 colspan | rowspan | scope
<thead> 테이블 헤더 – table header 4 / 5 Global Attributes
<time> 날자 시간 – date / time 4 / 5 Global Attributes
<title> 문서 타이틀 – document title 4 / 5 -
<tr> 테이블 행 – table row 4 / 5 Global Attributes
<tt> 텔레 타이프 텍스트 – teletype text 4 -
<u> 텍스트 밑줄 – underlined text 4 -
<ul> 비정렬 리스트 – unordered list 4 Global Attributes
<var> 변수 – variable 4 / 5 Global Attributes
<video> 비디오 – video 5 src | poster | autobuffer | autoplay | loop | controls | width | height
<xmp> preformatted text 4 -

 

둘러보다 괜찮은정보인거같아 퍼다날랏습니다.ㅋ

'web standard > html5' 카테고리의 다른 글

[펌]2011년 웹디자인 트렌드 - WDL  (0) 2011.01.10
HTML5와 HTML4의 차이점  (0) 2010.04.26
HTML5의 모든것  (0) 2010.04.26
Posted by 수라
web standard/html52010. 4. 26. 22:41
출처 : http://channy.creation.net/blog/429

올해 3월 새로 조직된 W3C HTML 워킹 그룹에서 Invited Expert로 활동하고 있습니다. 소수 전문가에게만 제한적으로 열었던 Invited Expert 제도로 480여명의 웹 관련 기술자들이 새 HTML 규격에 대한 토론을 벌이고 있습니다.

많은 토론 끝에 WHATWG에서 만든 Web Application 1.0 즉, HTML5를 W3C에서 Working Draft 초안 문서로 가져오기로 하였습니다. 특별한 이견이 없는 한 이 문서를 기초로 HTML5의 첫 워킹 드래프트가 나올 예정입니다. 덕분에 WHATWG에서 조금 기여했던 부분에 이름이 올랐던 이유로 W3C Editor’s Draft에 제 한글 이름이 올라 있네요.

아울러 워킹그룹에서 활발한 활동을 벌이고 있는 사람 중 한명인 Opera의 Anne van KesterenHTML 5 differences from HTML 4라는 문서를 만들어 HTML5에 첫 입문을 하는 사람에 대한 도움을 주고 있습니다.

저도 도움이 되고자 HTML5와 HTML4의 차이점이라는 한국어 번역본을 만들었습니다. 제가 첫 번역문을 올리자 이 문서를 번역하겠다는 사람들이 잇달아 이 문서에 대한 워킹 드래프트 작업과 번역을 HTML 워킹 그룹 정식 Task로 올라갈 준비를 하고 있습니다.

여러분들도 HTML5에 대한 이해를 높히시기 바랍니다. 그리고 지금까지 HTML5에 대한 히스토리는 아래를 참고하시기 바랍니다.

HTML5에 대한 정보
- WHATWG의 도전
- 팀 버너스 리, 위기의 W3C 구하기 1편
- 팀 버너스 리, 위기의 W3C 구하기2편
- RFC: HTML의 미래에 대한 의견 청취
- HTML5에 대한 FAQ
- HTML5와 웹 표준 전망에 대한 발표 자료

'web standard > html5' 카테고리의 다른 글

[펌]2011년 웹디자인 트렌드 - WDL  (0) 2011.01.10
HTML5에 추가된 새로운요소들  (0) 2010.07.05
HTML5의 모든것  (0) 2010.04.26
Posted by 수라
web standard/html52010. 4. 26. 22:37
출처 : http://channy.creation.net/blog/776

애플 iPad 논란과 유튜브 HTML5 지원 이슈와 Flash vs. HTML 5 이슈를 거치면서 HTML 5에 대한 반응이 국내에서 커지고 있군요.

지난 주에 했던 블로터 포럼 인터뷰가 어제 올라간 후 저에게 이런 저런 문의를 해 주신 분들이 많습니다. 제가 가지고 있는 지식이나 경험은 짧지만 최대한 가지고 있는 것을 하나의 글에 제공해 드려 보도록 하겠습니다. 아래 글은 개인적으로 관리하던 HTML 자료 모음집을 합친 것입니다.

트위터를 검색하면 맨 위에 있는 Twitter의 모든 것 처럼 HTML5에 궁금증이 있으신 분들을 위해 모아서 공유 합니다. 앞으로 좋은 자료를 찾는 대로 계속 업데이트 해 보겠습니다.

I. HTML 5 소개

HTML 5는 W3C에서 만들고 있는 차세대 웹 표준으로서 마이크로소프트, 모질라, 애플, 구글, 오페라 등 모든 웹 브라우저 벤더가 참여하고 있는 산업 표준이기도 합니다. 2004년 WHATWG의 초안으로 부터 시작된 이 표준안은 시맨틱 마크업, 편리한 웹폼 기능, 리치 웹 애플리케이션 API 들을 담고 있으며 2007년 부터 W3C HTML W/G에서 표준안이 만들어 지고 있습니다.

HTML5의 주요 목적은 과거 HTML의 호환성을 유지하면서 웹 개발자들이 실질적으로 부딫히는 문제를 해결 하고 HTML 문서가 좀더 의미 있으면서도 리치 웹 애플리케이션 기능을 수행할 수 있는 범용 표준을 만드는 데 있습니다. 즉, 웹 문서 기반을 그대로 유지하면서 웹 브라우저 간의 상호 운용성을 위한 세부적인 지침을 담고 있으며 필요에 따라 각 이해 관계자를 위한 별도 문서도 제작해서 배포하고 있습니다.

HTML5는 향후 웹 브라우저의 가장 표준 기반 렌더링 엔진의 문서 타입이 될 것입니다.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>예제 문서</title>
  </head>

  <body>
    <p>예제 단락</p>
  </body>
</html>

1. 시맨틱 마크업

HTML 5에서는 기존의 HTML4 보다 확장된 태그들을 지원합니다. 특히, 문서 구조에 적합하게 header, footer, nav, section 같은 구조화 마크업을 사용할 수 있습니다.

또한, time, mark, meter, datalist 등과 같은 특정 의미 기반 태그들이 추가로 지원 됩니다. b의 경우 b는 키워드, i는 학명에 사용하도록 기존 많이 사용하는 요소도 그대로 이용할 수 있습니다.

하지만, CSS로 완전 대체 가능한 big, center, font, s, strike 같은 스타일 기반 요소는 완전히 없어집니다. 또한, frame과 applet, acronym 같은 부정적인 요소들도 사용하지 않습니다.

2. 편리한 웹 폼(WebForm) 기능

HTML5는 개발자의 수고를 들어 줄 Form 기능 개선을 담고 있습니다. input 태그의 각종 type 속성이 추가되어 다양한 기능을 제공해 줍니다.

datetime 속성값을 사용하면 달력을 웹 브라우저에서 제공해 주며, range 속성은 스크롤바를, url은 웹 사이트 목록, email은 메일 주소 유효성 확인을 해 주기도 합니다. color 속성은 색상표를 별도 개발 없이 사용할 수 있습니다.

Form 양식은 모두 유효성 확인 기능을 켜거나 끌 수 있어 클라이언트 데이터 검증에 매우 도움을 주게 됩니다.

3. 리치 웹 애플리케이션

HTML 5는 웹 어플리케이션 작성에 도움을 줄 다양한 API를 제공 합니다. 새로 만든 HTML 요소들과 함께 더 좋은 어플리케이션 개발에 사용할 수 있습니다.

  • 2차원 그래픽 API에 사용할 수 있는 canvas 요소.
  • 내장 비디오 및 오디오 재생을 위한 video, audio 요소.
  • 내장 저장소. 키/값이나 SQL 기반 데이터베이스 지원을 위한 기능.
  • 오프라인 웹 애플리케이션 기반 API.
  • 웹 애플리케이션이 독립적으로 특정 프로토콜 및 미디어 형식을 등록할 수 있는 API.
  • contenteditable 속성과 함께 지원 되는 편집 API 기능.
  • draggable 속성과 함께 지원 되는 드래그앤 드롭 API 기능.
  • 페이지 앞/뒤 네비게이션을 지원할 방문 기록 표시용 API 기능. (보안 제한 모델이 있음)
  • (원격) 다중 메시징 처리 기능.

II. HTML 5 표준 문서 소개

웹 표준을 만드는 웹 컨소시움(W3C)의 표준 문서들은 대체로 읽기 어려운 것으로 알려져 있다. HTML 워킹그룹에서는 이용자와 가장 친숙하게 접근할 수 있도록 이러한 문제점을 보완하기 다양한 관점에서 각기 다른 표준 문서를 제공하고 있습니다.

본 문서는 HTML5를 접하는 이용자들을 위해 어떠한 표준 문서가 제작되고 있는지 소개해 주고자 한다. 2009년 4월 이전에는 아래 소개된 문서들이 HTML 5 표준안에 함께 담겨 있었으나 분량이 많고 기존 마크업 기반 내용과 혼란을 준다는 측면에서 분리해서 관리하고 있습니다.

1. 일반 문서

1.1 HTML 5 :A vocabulary and associated APIs for HTML and XHTML
HTML 5의 원래 표준안으로 분량이나 내용이 모두 웹 브라우저 개발자를 위해서 만들어져 있다. 가급적이면 HTML 5 표준안 보다 아래에 있는 대로 관점에 따라 적당한 문서를 보는 것이 좋겠다.

1.2 HTML 4와 HTML 5의 차이점 (한국어)
HTML 5 differences from HTML 4라는 문서는 기존 HTML에 익숙하던 사람들이 HTML5에서 무엇이 바뀌었는지 알 수 있도록 만든 소개 문서이다. 이 문서는 HTML 5 입문자들이 읽기에 적당하며 연도별 주요 변경 내용도 담고 있으며 한국어로 번역되어 제공된다.

1.3 HTML 디자인 원칙
이 문서는 HTML5 표준을 만드는 데 있어, 의사 결정의 기본 원칙이 되는 사항을 모아 두고 있다.

  1. 호환성 – 기존의 HTML 문서를 최대한 지원, 단계적 기능 축소(Graceful degradation), 기존 기능 재사용 및 엄격한 잣대를 대지 않는 것
  2. 유용성 – 실제 웹 개발자들이 겪고 있는 가장 중요한 문제를 순위에 따라 나누되 문제점을 분리해서 독립적으로 해결 함.
  3. 상호 호환성 – 브라우저 엔진 호환을 위해 최대한 자세한 스펙을 기술하되 복잡하지 않고 오류 처리 방법을 꼭 기술.
  4. 보편적 접근성 – 미디어 포맷 독립성, 전 세계 언어 지원, 웹 접근성 보장

2. 웹 퍼블리셔

2.1 HTML5 표준안(웹 개발자 관점)
기존 HTML 5 스펙은 웹 브라우저 개발 회사를 위해 기술된 표준안이다. 개발자 관점에서 무엇이 어떻게 바뀌었고 어떻게 사용할 수 있는지 보여 줄 수 있는 문서가 필요하다. 과거 W3C 표준안들의 문제점이 바로 이용자가 아닌 개발자 위주로 만들어져 있어 읽기 어려웠다는 것이다. 이 문서는 바로 이용자 즉, 웹 개발자를 위한 스펙이다.

2.2 HTML 마크업(저작자 관점)
이 문서는 HTML5 표준안(웹 개발자 관점)의 하부 문서로서 HTML 문서를 주로 저작하는 웹 퍼블리셔 혹은 HTML 코더를 위해 만들어진 문서이다.

2.3 HTML Microdata
마이크로 데이터는 흔히 마이크로 포맷으로 알려진 시맨틱 데이터 정의를 범용적으로 만든 것이다. itemprop라는 속성을 통해 사용자 정의로 의미를 부여해 검색 엔진이나 시맨틱 엔진이 이를 처리할 수 있게 하였다. 사실상 비슷한 역할을 하는 RDFa와 함께 논의 되고 있는 중이다.

3. Rich UI 개발자

3.1 HTML Canvas 2D API
HTML5의 Canvas 태그 내 각종 객체를 그리고 생성하는 데 필요한 API를 기술하고 있다.

3.2 HTML Canvas 2D Context
HTML5의 Canvas 태그 내 각종 객체를 회전, 변환하고 그레디언트, 이미지 생성 등 각종 효과를 주는 기능 부분을 기술하고 있다.

참고로 Mozilla의 Canvas 튜토리얼이나 애플의 Canvas 예제를 보면 편할 것이다.

4. 웹 애플리케이션 및 백엔드 개발자

4.1 Server-Sent Events
웹 서버로 부터 전달(Push)되는 데이터 예를 들어 SMS 같은 것을 받을 수 있도록 EventSource를 정의하고 이벤트를 기다릴 수 있도록 하는 API를 기술하고 있다.

4.2 HTML5 Communications
이 스펙은 기존 Ajax의 단점으로 알려진 크로스 도메인 문서 접근을 가능하게 해 주는 스펙이다. 마이크로소프트의 XHR 때문에 약간 논의가 지지부진한 면이 있지만 텍스트를 위한 서버 통신을 지원해 준다. 물론 보안 사항에 대한 부분도 중요하게 다루어지고 있다.

4.3 Web SQL Database
자바 스크립트를 이용해 웹 브라우저 내장 데이터베이스에 SQL을 통해 질의하는 API이다. 오프라인 웹 애플리케이션 개발이나 모바일에서 로컬 데이터 캐싱이 필요할 때 유용하게 사용할 수 있으며, 일반적인 DB 라이브러리 수준의 메소드를 지원해 준다.

4.4 Web Sockets API
한 웹 페이지에서 서로 다른 서버에 있는 웹 페이지에 양방향 통신을 할 수 있는 별도 프로토콜을 정의할 수 있는 API이다.

4.5 Web Workers
웹 애플리케이션이 주 문서와 병렬적으로 스크립트를 백그라운드로 수행할 수 있게 해 주는 API. 쓰레드 기반 메시지 처리를 가능하게 해 준다. CPU 부하를 많이 잡는 작업을 여러 워커(worker)로 나누어 작업하거나 클라이언트 DB를 업데이트 하거나 나누어서 작업이 가능한 자바 스크립트 API를 제공해 준다. 흥미로운 점은 암호화 작업에 대한 유즈케이스를 담고 있어서 웹 브라우저들이 지원만 한다면 향후 전자 서명 기능을 제공해 줄 수도 있을 듯.

III. HTML 5 관련 발표 자료 및 글모음

본 문서는 제가 2005년 부터 HTML 5에 관심을 가져 오면서 만들었던 자료와 블로그 글 모음입니다. 예전 자료들인 만큼 낡은 내용도 있지만, 그간의 발전 과정 및 관련 이슈를 상세하게 다루고 있으므로 HTML 5의 역사를 파악하는데 도움이 될 것 입니다.

1. 발표 자료

HTML5와 모바일 웹 (2009)

View more presentations from Channy Yun.

HTML5 역사와 현황 (2008)

History and Status of HTML5
View more presentations from Channy Yun.

웹 표준의 미래 – HTMl5 (2006)

View more presentations from Channy Yun.

2. 블로그 글 모음

  1. IE9, HTML5 준수한다! 2009-11-19
  2. 요즘 HTML5에 무슨 일이… 2009-09-27
  3. 모바일과 HTML5 – 미래웹포럼 후기 2009-09-10
  4. HTML5 킬러앱은 ‘모바일’? 2009-08-28
  5. 마크업의 미래에 대한 오해 2009-08-24
  6. 구글은 왜 on2를 샀을까? 2009-08-07
  7. XHTML2.0 역사속으로? 2009-07-03
  8. Mozilla, 오픈 비디오 지원 10만불 쏜다! 2009-01-28
  9. 웹 애플리케이션은 전쟁 중! 2008-02-28
  10. 웹 표준, 나쁜 뉴스와 좋은 뉴스 2008-01-24
  11. HTML5에서 미디어 포맷 논쟁 중… 2007-12-12
  12. 반론: 차세대 웹은 브라우저를 초월하여… 2007-11-28
  13. 파이어폭스 SVG 비디오 시연 2007-08-22
  14. HTML5를 주목해야 하는 이유 2007-07-11
  15. HTML5와 HTML4의 차이점 2007-07-01
  16. 웹어플리케이션 전쟁 본격화 되나? 2007-06-07
  17. W3C HTML 워킹 그룹 부활! 2007-03-14
  18. HTML5와 웹 표준 전망에 대한 발표 자료 2006-12-04
  19. 팀 버너스리, 위기의 W3C 구하기 (2) 2006/11/09
  20. 팀 버너스리, 위기의 W3C 구하기 (1) 2006/11/03
  21. RFC: 새 HTML에 대한 의견 청취 2006-11-10
  22. 2차 웹 브라우저 전쟁, 관전 포인트는? 2006-11-01
  23. WHATWG의 도전 2005-9-15

3. 외부 기고

4. 만화

HTML 5가 대두되면서 기존 XHTML과의 관계에 대한 이야기를 만화로 만든 것으로 Jeremy Keith 원작이며 마크업의 미래에 대한 오해에 한국어 전문이 있다.

IV. HTML5 외부 자료

본 문서는 HTML5에 대한 외국에 있는 각종 웹 사이트, 튜토리얼, 데모, 참고 문헌 등을 모은 것입니다. 모두 영문으로 되어 있지만 많은 것을 얻을 수 있습니다. 관련 자료가 한국어로도 제공됐으면 하는 바램이 있습니다.

1. 웹 사이트

  • HTML5 Doctor – HTML5 이용 시 궁금증에 대한 해답을 제공.
  • HTML FIVE – HTML5에 대한 일반적인 정보 제공
  • HTML5 Gallery – HTML5 문서 형식으로 만든 웹 사이트 모음
  • HTML5 Tutorials- 간단한 예제를 튜토리얼 형식으로 소개
  • Planet HTML5 – HTML5 관련 전문가 블로그 모음

2. 문서 저작 튜토리얼

HTML5 기반 WordPress 테마

3. 리치 기능 데모

  1. SketchPad – HTML 5 Canvas 기반 그래픽 저작 도구 – by Colorjack
  2. Sublime Video Player – HTML 5 Video Player (H.264만 지원)
  3. RGraph – HTML5 Canvas Graph 라이브러리
  4. Offline Image Editor and Uploader – Drag & Drop API, DOM Storage, Application Cache, Canvas, Cross Domain Sharing 기능 등을 활용. by Mozilla Hack
  5. HTML5 Adventure – Google I/O 2009 컨퍼런스 때 선 보였던 데모 모음.
  6. HTML 5 Demos and Examples Remy Sharp가 만드는 간단한 데모 사이트
  7. Mozilla Hack Demos Firefox에 탑재된 HTML5 등 신 기능 기반 데모 모음

4. 참고 자료

각 웹 브라우저에서 HTML5의 기능을 어디까지 구현하고 있는 지 현황을 담은 문서를 제공한다.

  1. When can I use… HTML5, CSS3, SVG 등 최신 기술에 대한 브라우저 호환도표
  2. HTML5 Comparison of Layout Engines 위키피디아의 HTML5 기능별 렌더링 엔진 호환도표
  3. List of Known Implementations of HTML 5 in Web Browsers WHATWG에서 관리하고 있는 웹 브라우저 구현 문제점 목록
  4. HTML 5 coverage WHATWG 표준안 기초 호환 도표
  5. HTML5 Compatibility Quirksmode에서 관리하는 HTML5 DOM 관련 기능 호환표.
  6. HTML5 Cheat Sheet

'web standard > html5' 카테고리의 다른 글

[펌]2011년 웹디자인 트렌드 - WDL  (0) 2011.01.10
HTML5에 추가된 새로운요소들  (0) 2010.07.05
HTML5와 HTML4의 차이점  (0) 2010.04.26
Posted by 수라