'web standard/html5'에 해당되는 글 4건

  1. 2011.01.10 [펌]2011년 웹디자인 트렌드 - WDL
  2. 2010.07.05 HTML5에 추가된 새로운요소들
  3. 2010.04.26 HTML5와 HTML4의 차이점
  4. 2010.04.26 HTML5의 모든것
web standard/html52011. 1. 10. 11:11

[펌]2011년 웹디자인 트렌드 - WDL

번역본 출처 : http://cafe.naver.com/uistudy/2852


안녕하세요. 요즘 여기저기에서 2011 디자인 트렌드에 관한 기사들이 많이 나오고 있는데,

개중에 괜찮은 기사를 발견하여 공부하는 겸 번역 해봤습니다. (힘들었음 --;)

디자인 일반이 아닌 ‘웹’ 디자인에 대한 내용이라 웹계에서 일하시는 디자이너분들께 유익할 듯 합니다.
큰 흐름은 시대가 시대이니만큼 아름다움보다는 기능 중시 디자인인 모양입니다.

원문을 바탕으로 곳곳에 사견도 배치되어 있으니 감안하셔서 읽어주시면 될 것 같아요.
 
원문 : http://webdesignledger.com/tips/web-design-trends-in-2011
 

 
Web Design Trends in 2011 

by Jacqueline Thomas


1. More CSS3 + HTML5 <more CSS3 + HTML5>
 


HTML5와 Flash Action Script로 구현한 이미지입니다.

당연히 아래 것이 간지나 보입니다만, 특정 상황에서 플래시가 제대로 보이지 않고,
앞으로 생겨날 새로운 접근방식으로 인해 플래시 사용의 부담이 커진다는 점을 감안한다면,
표현적인 측면에서 HTML5가 FLASH 대용으로 사용될만한 가치가 있다고 볼 수 있습니다.

물론 완벽한 대체물은 될 수 없겠지만 HTML5와 CSS3로 가능한 시각적 효과들에 대해

이제는 디자이너들도 적극적으로 관심과 이해를 가져야 할 시점인 것 같습니다.

 

 

 

2. Simple Color Schemes <심플한 컬러 전략>
 

블랙 & 화이트 & 그레이의 조합은 잊어버리고, 녹색, 노랑, 빨강 등과 같은 강렬하고 심플한 컬러들을 주색으로 쓰되
그 조합은 2-3가지로 제한하라고 합니다.

다양한 컬러보다는 임팩트 있는 몇개의 컬러만으로 메시지를 전달하는 것에 더 주력하라네요.

http://toriseye.quodis.com/ 




http://collisionlabs.com/

 

 
 

3. Mobile Ready <모바일 버전 구축>
 

스마트폰, 아이패드, 넷북 등 다양한 매개체를 고려한 웹 디자인이 필요한데

이런 디자인은 단지 시각 요소를 줄여 사이트를 슬쩍 빈약하게 만든다고 되는 것이 아니라,

충분히 잘 디자인 한 후, 코딩을 다양한 매체에 맞도록 하는 것이 중요합니다. (코딩의 중요성!!)

더 많은 디바이스가 나올수록 일일이 그에 맞는 사이트 작업을 할 수는 없으니
반드시 원래 사이트(PC버전)으로 갈수 있는 옵션을 포함시키는 것이 좋습니다.

 
 

 

4. Parallax Scrolling <시차 스크롤링>
 

이 용어는 저도 생소했는데, 번역하면 '시차 스크롤링'입니다.

아래의 사이트에서 스크롤링을 해보면 배경의 구름과 흰 돌덩이(?)들이 서로 다른 시차로 스크롤링 되는 걸 볼 수 있습니다.

2011년의 웹디자인 핫 트렌드 중에 하나가 '깊이감'을 도출해내는 것이라고 하는데요.

시차 스크롤링은 레이어를 사용한 간단한 CSS 트릭이나 J쿼리 플러그인으로 3차원 공간인 듯한 효과를 줄 수 있기 때문에
효과적인 방법이기도 합니다. 시도해보아요!

 
http://www.rowtothepole.com/ 




 

5. Designing for Touch Screens, Not Mice <마우스가 아닌 터치스크린을 위한 디자인>
 

마우스로 네비게이션 하던 시대는 갔고, 원하는 곳으로 손끝만 가져가면 되는 시대가 왔으니
우리도 손끝 네비게이셔닝에 적합하도록 디자인해야한다는 내용입니다.

롤오버, 툴팁, 드롭다운 메뉴 등 터치UI에는 존재하지 않는 것들에 대해 고민해야 하고(이 내용들은 어느정도 익숙한듯),
또한 생각해봐야할 문제는 터치스크린에서는 세로보다 가로 스크롤링 방식이 더욱 적합할 수 있다는 점입니다.
그런 점에서 마치 잡지책을 펴놓은 듯한 레이아웃을 이용해 가로 스크롤링으로 내용을 전개하는 디자인도 트렌드가 될수 있을 듯 해요.

화면의 방향과 해상도에 영향을 받지 않는 유동적 레이아웃을 사용하는 것도 유저액션에 반응하는 디자인이 될 수 있겠습니다!

 


 
 

 

6. Depth Perception in Web Design <입체감 있는 웹디자인>
 

'깊이감'보다는 '입체감'이란 표현이 더욱 상통할 것 같네요.

2-3년 전에 유행했던 디자인이 – 책상 위에 놓여있는 키보드, 커피잔, 노트, 연필 등을 묘사하는 따위의 - 구체적인 오브젝트로
공간 자체를 표현했던 디자인이었다면, 올해의 유행은 사이트 자체에서 입체감이 느껴지도록 공간을 창출해내는 디자인이랍니다.
3D 툴을 사용하지 않더라도 그런 식의 표현을 연출함으로써 가능할 것 같아요.

사람에게는 가상의 공간에서 더욱더 실제처럼 느끼고자 하는 욕구가 있다고 하는데,
이런 표현 방식의 진화도 그런 욕구가 반영된 결과들이 아닌가 하는 생각을 해보네요.
 
http://www.plantate.net/ 


 
http://www.nike.com/jumpman23/historyofflight/ 

 

 
  

7. Large Photographic Backgrounds <큰 사진 배경>
 

화면 전체 BG로 큰 사진 이미지를 사용하는 것이 트렌드입니다.

큰 사진이미지는 그만큼 강렬하여 방문자의 주의를 사로잡을 수 있기 때문에 사진은 반드시 컨텐츠에 적합하여야만 합니다.
그리고 큰 사진배경을 사용하여 디자인 할 때는 사진이 컨텐츠를 방해하지 않고 컨텐츠와 잘 조화를 이룰 수 있도록 하는 것이
중요하겠습니다.

 
http://www.somewhere-lefilm.com/ 


 
http://www.iflymagazine.com/?locale=nl_en 

 

 
  

8. Adventurous Domain Names & Integration <모험적인 도메인네임>
 

디자인 이슈에만 국한될 것이 아니라 크리에이티브한 도메인 네임을 사용하는 것도 생각해볼만 합니다.
.com 으로 끝나는 평범한 도메인 말고 다른 도메인들도 잘 생각해보고 남이 쓰기 전에 빨리 확보하랍니다.

예시로 나온 것처럼 '.me' 도메인은 개인 포트폴리오나 블로그처럼 자기만의 아이덴티티를 빠방하게 주입시키고 싶은
사이트의 도메인으로 아주 괜찮다고 할 수 있겠지요.
 

http://joshsullivan.me/ 


 
http://www.photosheep.me/ 

 

 
 

9. QR: Quick Response <QR>
 

이미 너무 많은 곳에서 발견할 수 있는 QR코드 역시, 올해의 디자인 트렌드로 꼽을 수 있겠습니다.
QR코드를 웹디자인에서 활용할 수 있는 방법도 많습니다. 가령, 개인사이트에 QR코드를 노출시켜 방문자로 하여금
나의 모바일 버전 사이트로 이동시켜준다거나,참조코드를 URL에 삽입시켜 QR코드로 내 사이트 방문자들의 추후 경로를
추적할 수도 있습니다. (ㄷㄷㄷ)

QR코드를 당신의 아바타처럼 써보세요! (오글;)

 

qrcode src

 

 

 
 

10. Thumbnail Design <썸네일 디자인>
 

사람들은 더이상 컨텐츠를 읽어가며 클릭하지 않고, 그중 돋보이는 이미지들만을 클릭해서 들여다봅니다.

인터넷 유저들의 웹서핑 능력이 점점 더 향상될 것이기 때문에 이런 방식으로 네비게이셔닝 하는 유저들을 타겟으로 삼아
섬네일 디자인에 더욱 신경을 써야 합니다.

 
http://webdesignledger.com/ 

 

 

 
 

11. Constant Connection/ Life Stream <지속적인 접속, 라이프스트림>
 

인터넷 환경 자체는 무생물(!)이지만 우리는 인터넷을 통해 타인들과 관계를 형성하고 의견을 나누면서,
생명을 가진 어떤 것으로 생각하고 있습니다.

그런 추세로, 2011년에는 개인 블로그와 사이트들이 주인장의 실시간 트위터 피드백 상황을 알려주는 기능들을
포함하고 있을 것이라는 게 마지막 내용입니다. 실제 요즘도 꽤 많은 블로거들이 자신의 트위터 상황을 알려주는 위젯을
장착하고 있더라구요.

반드시 트위터일 필요는 없지만, 그만큼 사람들이 자신의 일상을 나누는 서비스에 집중하고 있다는 것인데요.
결국은 '소셜네트워크서비스 디자인'이 트렌드인 것 같습니다.

 

 http://www.mickmel.com/blog/lifestream/

 

http://www.storyhotels.com/
 

 


 이상입니다~~


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

HTML5에 추가된 새로운요소들  (0) 2010.07.05
HTML5와 HTML4의 차이점  (0) 2010.04.26
HTML5의 모든것  (0) 2010.04.26
Posted by 수라
web standard/html52010. 7. 5. 11:27

HTML5에 추가된 새로운요소들

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 -

 

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

[출처] HTML5에 추가된 새로운요소들이네요 ~ (하드코딩하는사람들) |작성자 노을

'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

HTML5와 HTML4의 차이점

출처 : 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 Kesteren는 HTML 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

HTML5의 모든것

출처 : 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 수라

티스토리툴바