외부 플젝트 중에 이러저러한 문제로 제가 HTML5을 권유하고 HTML5사용해야 하는 프로젝트가 생겨, (아마..관련업계 최초일듯..^^;;) 다음 사항을 정리하고자 합니다.
해당 문서는 회사에 제출해야 할 문서이므로, 차후 저작권 문제가 발생할 소지가 있어 외부에서 퍼가시는것은 허용하지 않도록 하겠습니다.
> HTML5 사용을 위한 가이드
1. HTML5의 새로운 기능 사용 여부에 관한 고민
해당 브라우저들은 HTML5 존재 이전에 나온 브라우저 들이며,
HTML5는 DOC TYPE에서 XHTML형태의 DTD가 존재하지 않기때문에,
HTML5의 지원은 공식적으로 이루어지지 않고 있는 상황.
본 문서에서는 해당 브라우저들에서 사용이 가능하도록 하기 위하여,
우리는 다음 사항을 고려해야 하며, 아래의 TAG LIST중 사용가능한것들, 사용을 권장하는 것들,
사용을 비권장하는 것들, 사용을 금지하는 것을 나누어
정리하고자 합니다.
기능 | 사용 | Comment |
웹스토리지 | 비권장 | 꼭 필요한 기능이라고 판단시, 차후 JexFrame기능의 일부를 수용할지 협의 필요 |
웹SQL | 불가 | 해당 기능은 IE 9- 에서는 사용이 불가능하며, 보안및 성능상의 이유로 JexFrame에서도 기능으로 구현이 불가합니다. |
Menifest | 권장 | 지원하지 않는 브라우저가 있으나, 실제 사용에 문제 발생소지가 적으며, 해당 기능의 사용시 네트워크 트래픽상 잇점이 크고, Cache관리가 용이해 사용을 권장 |
Canvas | 불가 | 지원하지 않는 브라우저가 많고, 사용시 화면디자인 등에 문제 발생소지가 있어 사용이 불가함. |
Video/Audio | 불가 | 지원하지 않는 브라우저가 많고, 사용시 화면디자인 등에 문제 발생소지가 있어 사용이 불가함. 대체 기술이 존재 대체기술 :: Flash |
Drag & Drop | 비권장 | 꼭 필요한 기능이라고 판단시, 차후 JexFrame에서 기능의 일부를 수용할지 협의 필요. 단, 지원하지 않는 브라우저의 경우 Drag&drop의 기능이 아닌 다른 기술로 우회. 참고! Div등의 HTML ELEMENT를 Drag & Drop하는 기능이 아닌, 브라우저 외부의 객체를 Drag & Drop하는 기능임. |
RichTextEditor | 불가 | 사용이 필요한 경우, Daum Editor, Naver Editor등의 Open source Editor 사용을 권장하며, 회사 내에서 판매 상품이 필요한 경우, RND를 통한 Editor개발이 가능. |
WebWorker | 불가 | 지원하지 않는 브라우저가 많고, 해당 기능을 사용시, Script에서 Batch수준의 기능을 구현하는 형태가 되므로 위험도가 높아서 사용 불가. |
GeoLocation | 비권장 | 지원하지 않는 브라우저의 경우 우회 방법이 존재하나, 외부 사업자를 통해야 하므로, 비권장 |
WebSocket | 불가 | 해당 기능을 사용하기 위해서는 Script에서 지원만이 아니라, System(WebServer 및 Was)을 최신 버전을 사용하는 Risk 및 추가적인 방화벽 필요, 검증되지 않는 기술로 인한 보안 문제발생 가능등의 사유로 사용 비권장. |
Comet | 불가 | WebSocket과 동일한 사유로 비권장 |
FILE API | 불가 | 지원하는 브라우저가 적고, 지원하는 브라우저에서만 사용시 로직처리가 복잡해지는 문제가 발생 가능. |
2. HTML5 사용시 고려해야 할점 (퍼블리싱 관점)
1) HTML5를 위한 문서 타입 아래 블럭 1,2 두가지가 사용가능하나, 1번 사용을 권장. (두가지 동시에 사용은 에러발생합니다.)
1. <!DOCUTYPE HTML>
2. <!DOCUTYPE HTML SYSTEM "about:legacy-compat">
2) 인코딩 설정 - 이전에도 많이 사용하던 2번을 권장합니다.
1. <meta charset="UTF-8">
2. <meta http-eqiv="Content-Type" content="text/html"; charset="UTF-8">
3) 종료태그를 기술하지 말아야 할 Tag List아래 태그리스트는 <br></br> 형태의 종료 태그를 기술하지 말아야 하며, <br /> 형태로 사용을 하여야함.
area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source
4) 종료태그가 생략가능한 TAG :: 종료 TAG 생략가능 TAG가 일부 존재하나 종료태그 생략을 권장하지 않음. (개발자 가이드를 통하여, 종료태그 생략을 사용하지 않도록 문서화 필요)
5) Attribute 사용
5-1) Attribute의 경우 """ 로 묶어서 값의 표현을 권장함
<input type="BUTTON" id="BTN_SAVE001">
5-2) Custom Attribute의 사용은 앞에 "data-" 를 prefix로 사용권장
<span data-jxln="ACCOUNT_TYPE">예금계좌</span>
5-3) 단독으로 사용 가능한 attribute사용은 단독으로 사용하지 않고 value를 넣는 것을 권장
<input type="text" disabled="disabled">
6) HTML5에서 추가 또는 삭제된 마크업
6-1) 문서구조를 위한 ELEMENT(SECTION)
실제로는 DIV를 사용하여 Layout을 구성하는 것과 큰 차이가 존재하지 않는다고 생각 할수 있으나, 해당 마크업드은 차후 웹접근성 항목에서 상당한 잇점을 제공하므로, 사용을 적극 권장합니다.
Element |
Description | 사용 |
section |
범용적인 섹션 문서의 레이아웃을 구성하며, DIV 태그와 동일하게 작동한다. | 권장 |
article |
게시물 상세등의 컨텐츠를 표현하기위해 사용, DIV태그와 동일하게 작동한다. | 권장 |
aside |
한쪽 구석에서 추가적인 정보를 표현하기 위해 사용되며, DIV태그와 동일하게 작동한다. | 권장 |
nav |
네비게이션 메뉴를 위한 영역으로 DIV태그와 동일하게 작동한다. | 권장 |
footer |
문서의 하단부를 표현하기 위한 영역 으로 DIV와 동일하게 작동한다. | 권장 |
header |
문서의 상단부를 표현하기 위한 영역으로 DIV와 동일하게 작동한다. | 권장 |
hgoup |
h1,h2...,h6 등의 태그를 그룹으로 묶어 사용하기 위한 영역 | 권장 |
6-1) Grouping을 위한 ELEMENT
실제로는 DIV를 사용하여 Layout을 구성하는 것과 큰 차이가 존재하지 않는다고 생각 할수 있으나, 해당 마크업드은 차후 웹접근성 항목에서 상당한 잇점을 제공하므로, 사용을 적극 권장합니다.
Element | Description | 사용 |
figure | 이미지등의 그룹을 한곳에 묶어서 보여주는 그룹, DIV와 동일 | 권장 |
figcaption | figure에 대한 caption을 정의 | 권장 |
6-2) 미디어를 위한 ELEMENT
미디어 기능은 지원하지 않는 브라우저가 많으므로, 비권장하며, 아직까지는 대체기술인 Flash나 embed태그 사용을 권장합니다.
Element | Description | 사용 |
video | 영상을 표현하기 위한 ELEMENT | 비권장 |
audio | 음성을 표현하기 위한 ELEMENT | 비권장 |
source | video/audio등의 리소스 또는 URL 을 지정 | 비권장 |
track | video/audio등의 텍스트 트랙을 지정(지원하는 브라우저 없음) | 비권장 |
6-3) Form확장 ELEMENT (추가된 Attribute는 포함되지 않음)
HTML5에서는 Form을 확장하기 위한 다음 ELEMENT를 추가 되었으며, 일부 기능은 브라우저에따라 정상작동 되지 않는 경우가 존재하므로, 사용시 주의를 요합니다.
Element | Description | 사용 |
keygen | 암호화 키를 생성하기 위한 ELEMENT | 비권장 |
output | Form내부의 연산을 지원하며, 연산된 결과를 출력한다. 지원하지 않는 브라우저에서 사용을 하려면 script조작이 필요함. | 비권장 |
progress | 진행상황을 나타냄. 지원하지 않는 브라우저가 많으므로, 해당 기능 필요시 협의를 통해 우회 기능을 통해 지원 | 비권장 |
meter | 현재 상태를 나타내 주는 기능. progress와 같이 해당 기능 필요시 협의를 통해 우회 기능을 지원 | 비권장 |
datalist | 자동완성 기능제공 Select Element와 유사하게 Option과 함께 사용하여 Option값들이 자동완성을 위한 Data로 사용됨. 지원하는 브라우저가 현재 Firefox, Opera밖에 없어 사용되는 곳이 없음. JEX팀에서 제공하는 AutoComplete API 사용을 권장 | 비권장 |
6-4) 기타 ELEMENT
해당 element등 또한 브라우저에 따라 다르게 동작 하거나 지원하지 않는 브라우저가 많은 기능들로 사용을 비권장 필요시 script로 구현하거나 협의를 통해 API기능 지원.
Element | Description | 사용 |
mark | Text에서 일부분을 강조 (IE6~IE8 제외한 대부분 지원) | 비권장 |
canvas | 이미지를 동적으로 그리고 제어하기 위한 기능 (IE6-IE8 제외한 대부분 지원) | 비권장 |
bdi | 실제 html문서에서는 표시되지는 않지만, 접근성을 위해 유용한 TAG로 "사용자명"을 지정할때 사용. (지원하는 브라우저는 적지만 사용을 원할시에는 script/css를 통해 지원가능하도록 설정가능) | 권장 |
command | 메뉴또는 명령을 지정하는 ELEMENT이며, 현재 IE9외에는 지원하는 브라우저가 없어 권장하지 않습니다. | 비권장 |
details | 접기/펴기등의 기능 제공-TITLE은 하위 ELEMENT로 summary ELEMENT를 사용 (현재 chrome만 지원) | 비권장 |
summary | details의 하위 ELEMENT로 사용하여 타이틀 형태로 데이터를 표시 | 비권장 |
ruby | 동남아시아 발음 및 정보를 표시하기 위해 사용, | 비권장 |
rp | ruby의 하위 ELEMENT로 사용 | 비권장 |
rt | ruby의 하위 ELEMENT로 사용 | 비권장 |
time | 시간을 표시하는 ELEMENT, 접근성을 위해 유용한 TAG로 지원하는 브라우저가 존재하지 않지만, script/css를 통해 지원가능하도록 설정이 가능함. | 권장 |
wbr | text 라인 브레이크 브라우저에서 실제로 작동하지는 않으나, 웹접근성을 위해 존재하는듯함. | 비권장 |
6-5) 삭제된 ELEMENT
삭제된 ELEMENT로 대체 ELEMENT를 사용하도록 합니다. 대부분의 브라우저에서는 하위 호환성을 위해 아래 태그가 사용이 가능합니다. 이와 같은 내용은 html5-Strict.css를 작성하여 아래 ELEMENT사용시 "display:none"으로 처리하도록 하는 방법을 권고합니다. 아래 태그를 사용하면, W3C인증시 오류발생합니다. (강조한 Line은 자주쓰는 ELEMENT입니다.)
Element | Instead ELEMENT |
acronym | "ABBR" ELEMENT를 사용 |
applet | "OBJECT" ELEMENT를 사용 |
basefont | CSS를 통하여 제어 |
big | CSS를 통하여 제어 |
center | CSS를 통하여 제어 |
dir | "UL" ELEMENT를 사용 |
font | CSS를 통하여 제어 |
frame | IFRAME를 사용 (도메인 변경되지 않도록 처리시 고민이 필요) |
frameset | IFRAME를 사용 (도메인 변경되지 않도록 처리시 고민이 필요) |
noframes | IFRAME를 사용 (도메인 변경되지 않도록 처리시 고민이 필요) |
strike | CSS를 통하여 제어 |
tt | CSS를 통하여 제어 |
6-5) 비표준 ELEMENT
비표준 ELEMENT이지만 기존 브라우저가 지원해서, 실수로 사용이 가능한 ELEMENT리스트 입니다. 이와 같은 내용은 html5-Strict.css를 작성하여 아래 ELEMENT사용시 "display:none"으로 처리하도록 하는 방법을 권고합니다. 아래 태그를 사용하면, W3C인증시 오류발생합니다. (강조한 Line은 자주쓰는 ELEMENT입니다.)
Element | Instead ELEMENT |
isindex | input text필드등으로 사용 |
listing | "PRE" ELEMENT와 "CODE" ELEMENT로 사용 |
xmp | "PRE" ELEMENT와 "CODE" ELEMENT로 사용 |
noembed | "OBJECT" ELEMENT나 "EMBED" ELEMENT로 사용 |
plaintext | MIME TYPE을 "text/plain"으로 사용 |
blink | CSS/SCRIPT를 통하여 제어 |
marquee | CSS/SCRIPT를 통하여 제어 |
s | CSS/SCRIPT를 통하여 제어 |
spacer | 값을 사용 |
u | CSS/SCRIPT를 통하여 제어 |
bgsound | "OBJECT" ELEMENT나 "EMBED" ELEMENT로 사용 |
Element | attribute | Description |
for | autocomplete | 자동완성 기능 |
form | novalidate | inputbox의 확장된 attibute기능을 check하지 않음 |
| input | autofocus | 페이지가 로드될때 focus를 주는 기능 |
| input | form | form 태그 영역밖에서 inputbox를 만들고 form하위 ELEMENT로 지정가능 |
| input | formaction | form의 ACTION을 지정 |
| input | formenctype | multipart/form-data형태의 ENCTYPE를 지정 |
| input | formmethod | form의 method지정 (post/get) |
| input | formnovalite | form에 지정하는 novalidate와 동일 |
| input | formtarget | submit시에 대상 target을 지정 |
| input | height/width | 높이와 넓이 지정 (CSS로 구현가능) |
| input | min/max | 입력값을 min / max사이로 제한 |
| input | multiple | 파일전송시 다중선택 기능 ( 사용해도 좋을 것 같음. ) |
| input | pattern | 정규식을 활용하여 입력값 제한 |
| input | placeholder | 기본값을 배경으로 보여줌 |
| input | required | 필수입력 |
| input | step | 일정 패턴으로 값증가. (3으로 지정시 3,6,9 형태) |
Element | attribute | Description |
input | color | 색상값을 입력받음. 현재 OPERA만 지원 |
input | date | 날짜를 입력받음. |
| input | datetime | 날짜/시간을 입력받음 |
| input | datetime-local | 타임존과 함께 날짜시간을 입력받음 |
| input | EMAIL을 입력받음 | |
| input | month | 월 값을 입력받음 |
| input | number | 숫자만 입력받음 |
| input | range | 범위안의 값을 입력받음.(그래픽적으로 표현) |
| input | search | 검색데이터를 입력받음.(inputbox에 X표시가 생겨 X표시 클릭 또는 ESC입력시 해당 값이 초기화됨.) |
| input | tel | 전화번호를 입력받음 (현재 지원브라우저 미존재) |
| input | time | 시간을 입력받음. |
| input | url | URL 입력받음 |
7-5) DEMO사이트 개발 및 차후 개발되는 사이트의 HTML5 적용
7-6) 가장 쉬운 HTML5도입 방법
======================= 일단 끝 =========================
사설 #01
후..-_- 오랫만에 구조화되고 복잡한 문서를 작성하려니.-_- 또가 나올것 같습니다.
군대 있을적 행정병으로 열심히 문서작성할때가 떠오르며, 유격보다는 문서작성이 무서웠던 악몽이 떠오르네요.ㅠㅠ
사내에서 HTML5적용을 위해 만든 문서이긴 하지만, ...회사에서 글 내리라고 하면...힘이 없는 저는 이 문서를 내리게 될수도 있짐나....HTML5를 지원하지 않는 브라우저를 위한 고민을 하는 분들을 위해 해당 문서를 공개로 작성합니다.^^
사설 #02
이 문서에서 HTML5를 도입하기에 필수적인 요소인 html5shiv기능을 제안한 사람이 무려 Jquery, Sizzle등을 만드신 "john Resig"님였군요. 이분 javascript역사를 마구 바꾸어대는 어마어마한 분이 되어 가는것 같습니다.
저는...언제쯤 이런사람이 될수 있을까요.ㅠ_ㅠ.....아 이런사람 보면 제가 왜 이리 초라하게 느껴지는지.ㅠ_ㅠ
'컴퓨터 이야기' 카테고리의 다른 글
| Safari.. Ajax버그 에 대한 대처 - Form-Submit방식으로 구현한 Ajax (3) | 2012.07.02 |
|---|---|
| CHROME FRAME에 대한 분석 (0) | 2012.06.15 |
| IE7 이하 버젼에서의 'hashchange' 이벤트 처리 (0) | 2011.09.30 |
| json2.js와 daum 에디터의 충돌 (0) | 2011.07.06 |
| 사파리 브라우저 AJAX 관련 버그 (5) | 2011.04.18 |