1. W3C 표준 권고안? 그거 뭐야? 먹는거야?
HTML5와 CSS3에 대한 사람들의 관심이 많다. 이 많은 관심 중 잘못된 생각들이 많은 것 같다. 흔히 '조금 아시는 분들'의 입에 자주 오르내리는 'W3C 표준 권고안'에 대한 문제다. W3C에서 HTML5 표준 권고안이 2012년에 나온다느니 그래서 2022년은 되야 HTML5가 안정적으로 쓰일 것이라느니 하는 말은 완전히 시대 착오적인 발언이다.

HTML5와 CSS3의 굵직한 스펙들은 이미 개발이 완료된 상태다. 그리고 표준권고안은 나와도 그만 안나와도 그만인 상황이다. 왜냐하면 많은 브라우저들이 이미 전면적으로 혹은 소극적으로 HTML5와 CSS3의 스펙들을 잘 지원하고 있기 때문이다. 단지 익스플로러만 빼면 말이다. 익스플로러는 버전 9부터 HTML5와 CSS3를 적극 지원하겠다고 했다.

사용자 삽입 이미지

MS의 테스트드라이브 for IE9


2. 구형브라우저, 익스플로러는 버려
우리나라의 의사 결정권자나 중간관리자들이 가장 무서워 하는 것이 익스플로러를 버리는 것이다. 그들이 익스플로러를 버리지 못하고 대는 핑계는 한결같다. "이용자층이 그래도 익스플로러가 가장 많다"는 것이다. 과연 그럴까. 해외에서는 구글이나 트위터 같은 곳이 나서서 익스플로러를 버리고 있고 과감하게 HTML5의 스펙과 CSS3 스펙을 이용하고 있다. 심지어 MS마저도 IE6 버리기 운동에 대해 '감사하다'는 의견을 피력했다. 친구에게 익스플로러6를 쓰지 않도록 인터넷 이용자들의 독려를 부탁하기도 했다.

인터넷 익스플로러에 맞추어 웹사이트를 제작하지 않으면 서비스가 망한다는 것은 달리 말하면 자신이 만드는 서비스에 자신이 없다는 것을 반증한다. 구글을 쓰기 위해 익스플로러를 버리는 사람이 늘어난다면 구글의 서비스가 그만큼 뛰어나다는 것을 의미한다. 만약 네이버가 (현재까지의)익스플로러를 무시하고 HTML5와 CSS3를 적극적으로 지원한다면 과연 네이버는 망할까? 아니면 이용자들이 익스플로러를 버릴까.

또, 익스플로러를 버린다는 표현이 과격해보여도 웹페이지를 HTML5로 만든다고 해서 서비스를 이용할 수 없는 것도 아니다. HTML5는 기존의 HTML과 XHTML문서들의 하위 호환성도 뛰어나니까 익스플로러 이용자도 HTML5 된 웹페이지를 별 문제는 없이 이용할 수 있을 것이다. 까놓고 보면 완전히 말장난인 것이다.

3. 상용 서비스 곳곳에서 찾아볼 수 있는 HTML5와 CSS3, 변화의 물결
지금 곧바로 구글에 접속해서 소스를 보면 확인할 수 있는 사항이 하나있다.

사용자 삽입 이미지

HTML5 독타입을 가지고 있는 구글 메인페이지


문서의 독타입이 HTML5의 독타입임을 확인할 수 있다.

이번에는 트위터에 접속해보자. 위에 있는 그림은 익스플로러로 접속했을 때 아래의 그림은 웹킷엔진을 사용하는 크롬이나 사파리, 혹은 파이어폭스로 접속했을 때의 화면이다.

사용자 삽입 이미지

CSS3를 사용하고 있는 트위터, 익스플로러는 그냥 무시


익스플로러와 파이어폭스나 웹킷을 지원하는 브라우저 등을 이용해서 페이지를 확인해보자. 뭔가 다른점이 있을 것이다. 박스 모서리가 둥글게 디자인 되어 있는데 익스플로러는 무시했음을 알 수 있다. CSS3의 속성 중 하나인 border-radius속성을 익스플로러를 무시하고 과감하게 사용했다. 이미지는 전혀 사용되지 않았다.

사용자 삽입 이미지

동영상을 로드중인 유튜브의 HTML5 플레이어


유튜브와 Vimeo는 HTML5 브라우저를 상용서비스에 이미 적용했고, 점차적으로 플래시로 동작하는 플레이어 개체수를 줄여갈 예정이다.

사용자 삽입 이미지

geolocation API가 적용된 골프존 모바일


이번에는 우리나라의 서비스다. 골프존 모바일 서비스다. 골프존의 매장을 찾아주는 서비스인데 HTML5의 geolocation API가 사용되었다. 아이폰의 사파리에서는 이 API를 지원하기 때문에 차용하였다. 현재 내가 있는 곳의 위치를 자동으로 알아내어 브라우저에 찍어준다.

W3C의 권고안이 문제가 아니고 이미 많은 브라우저가 HTML5와 CSS3 스펙을 잘 지원하고 있다는 것이 문제인 것이다.
Web Resource Depot에 올라온 유용한 포스팅이 있어 소개드립니다. HTML5는 아직 모든 스펙이 완성되어 표준안으로 권고가 되지는 않았습니다만 기본적인 뼈대는 거의 완성된 것 같습니다. 권고안이 2012년에 나오고 HTML5가 완전한 표준스펙으로 자리 잡으려면 2022년까지 가야한다는 이야기도 있지만 변화의 물결은 의외로 빨리 다가올 수도 있을 것 같다는 생각이 드는 요즘입니다.

HTML5와 CSS3의 스펙을 간략하게 정리해 컨닝 페이퍼로 만들어 PDF로 배포하고 있길래 제 블로그에서도 소개드립니다.

HTML5 Visual Cheat Sheet(Gray version)

사용자 삽입 이미지

PDF 파일 다운로드 받기 (1.1MB)


HTML5 Visual Cheat Sheet(White version)

사용자 삽입 이미지

PDF 파일 다운로드 받기 (1.3MB)


HTML5 Cheat Sheet

사용자 삽입 이미지

PDF 파일 다운로드 받기 (73KB)


HTML5 Canvas cheat sheet

사용자 삽입 이미지

PDF 파일 다운로드 받기


CSS3 Cheat Sheet

사용자 삽입 이미지

PDF 파일 다운로드 받기 (123KB)


CSS Property Index

사용자 삽입 이미지

CSS 속성 인덱스 웹사이트 링크

이 녀석들 인쇄해서 짬날때마다 무한반복 모드로 읽으면 머리에 콕콕 박히겠는데요~ 모쪼록 HTML5와 CSS3를 학습하시는 분들께 도움이 되는 자료였으면 좋겠습니다.


어제 제 트위터를 통해서 트윗해드린 내용입니다. HTML5 위에서 돌아가는 추억의 퀘이크2 시연 영상입니다. 물론 어떤 플러그인 설치도 없이 HTML5만으로 퀘이크2를 구동하고 있습니다. HTML5에서 새로이 추가된 canvas요소, audio요소 등의 미래 가능성을 보여주고 있습니다. 더 놀라운 것은 다른 어떤 외부 플러그인이나 프레임워크가 지원되지 않고도 오직 브라우저를 통해서(엄밀하게 HTML5, 웹소켓API를 통해서) 멀티플레이가 된다고 하는군요. 현재는 웹킷이 지원되는 크롬이나 사파리에서 게임이 가능한지 알아보고 있습니다~ 이 부분 알고 계신분 제보해 주시면 감사드립니다~

더 자세한 정보는 여기에서 구하세요. GWT를 이용해서 만들었다고 합니다.
HTML5 <nav> 태그를 사용하는 곳
아마도 추가되는 HTML5의 새로운 요소 중 가장 많이 사용될 요소가 될 것 같습니다.
웹페이지의 문서내에 내비게이션 영역을 지정하고자 할 때 사용합니다.
기존 HTML4.x 버전까지는 없었고 HTML5에 추가된 태그입니다.

코드 사용 예제
사용자 삽입 이미지

위의 코드의 결과물 입니다.


기본 어트리뷰트
class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title

이벤트 어트리뷰트
onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload


만약 '이전'버튼이나 '다음' 버튼을 사용해야 할 경우 <nav>태그안에 들어가도록 해야합니다.

참고
http://informationhighwayman.com/ 의 메인 내비게이션 마크업을 참고해보세요.

본 포스팅은 Code Syntax Highlighter가 사용되었습니다. RSS구독 하시는 분들은 http://monoeyes.com/799로 접속하시면 깔끔한 코드를 보실 수 있습니다.
via : w3schools.com