IE6/IE7/IE8 등의 호환을 유지한채 HTML5 사용.

외부 플젝트 중에 이러저러한 문제로 제가 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로 사용

6-6) 추가된 Attribute (Form / Input)

추가된 Attribute는 브라우저에 따라 다르게 동작하거나 지원하지 않는 브라우저가 많은 경우가 있어 해당 기능을 사용하는 대신 Jex에서 제공하는 API를 활용하시길 권장합니다. (차후 협의를 통하여, 지원하지 않는 브라우저에 대해 Script/CSS로 구현할지를 결정)

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 형태)

6-6) 추가된 INPUT TYPE (Form / Input)

추가된 INPUT/TYPE은 브라우저에 따라 다르게 동작하거나 지원하지 않는 브라우저가 많은 경우가 있어 해당 기능을 사용하는 대신 Jex에서 제공하는 API( FORMATTER, JEXINPUT 등)를 활용하시길 권장합니다. (차후 협의를 통하여, 지원하지 않는 브라우저에 대해 Script/CSS로 구현할지를 결정)

Element	attribute	Description
input	color	색상값을 입력받음. 현재 OPERA만 지원
input	date	날짜를 입력받음.
input	datetime	날짜/시간을 입력받음
input	datetime-local	타임존과 함께 날짜시간을 입력받음
input	email	EMAIL을 입력받음
input	month	월 값을 입력받음
input	number	숫자만 입력받음
input	range	범위안의 값을 입력받음.(그래픽적으로 표현)
input	search	검색데이터를 입력받음.(inputbox에 X표시가 생겨 X표시 클릭 또는 ESC입력시 해당 값이 초기화됨.)
input	tel	전화번호를 입력받음 (현재 지원브라우저 미존재)
input	time	시간을 입력받음.
input	url	URL 입력받음

7) HTML5 미지원 브라우저에서 HTML5사용을 위해 처리해야할 내용 정의

7-1) html5shiv.js 파일 include

해당 js는 html5를 지원하지 않는 브라우저에 대해서 html5의 ELEMENT정의 및 Script기능 css3확장등을 제공합니다.

제공 URL : https://github.com/aFarkas/html5shiv/

7-2) ie-css3.htc 파일 include

html5shiv와 겹치는 부분이 있는지 검토필요.

css작성시 가장아래에 behavior:url(ie-css3.htc) 를 넣어주면 많은 css3지원

7-3) html5-Strick.css 개발

W3C인증 받기에 적합한 HTML문서를 작성하기 위해, 위에 정의한 엄격한 문서 검증을 위한 css파일을 개발합니다.

해당 css에서는 display:none 또는 강조 표시등을 통해서 개발자/퍼블리셔의 실수로 인한 지원 마크업 사용을 엄격히 규제 합니다.

또한 HTML5에서 새로 정의된 HTML5의 마크업을 정의합니다.

7-4) html5-jex.js 개발

추가된 input box정의 요소나, 엄격한 form규제 등의 일부 그리고 접근성을 위해 유용한  마크업을 정리하여 javascript영역에서 구현하여 줍니다. (지원하지 않는 브라우저를 위함)

7-5) DEMO사이트 개발 및 차후 개발되는 사이트의 HTML5 적용

현재 HTML4또는 XHTML로 구현되어 있는 데모 사이트를 순차적으로 HTML5로 작성합니다. 또한 앞으로 작성되어야 할 웹페이지에 대한 HTML5 사용을 권고하여 현재 문서에 작성되어 있는 내용을 보강하고 HTML5대응 프로그램을 보강할 수 있도록 합니다.

7-6) 가장 쉬운 HTML5도입 방법

보안모듈중 CHROME / FIREFOX에 설치하면 해당 브라우저에서 IE모드로 작동하여 사용하게 지원해주는 보안모듈이 존재합니다. 이를 역으로 생각해서 IE6,IE7,IE8 사용시 CHROME FRAME 설치(ActiveX 보안모듈을 강제로 설치하는 형태)를 유도 하는 방법을 활용한다면, HTML5지원도 수월하고, 사용자 입장에서 빠른 성능(스크립트엔진 성능의 차이가 10배 이상) 을 느낄수 있고 개발사 입장에서도 테스트 케이스를 줄일 수 있는 장점이 있습니다. 이 방법에 대해서 고객을 설득할 수 있다면, 개발공수 절약 및 더욱 안정적이고 빠른 서비스가 가능하다는 장점이 존재합니다.

======================= 일단 끝 =========================

사설 #01

후..-_- 오랫만에 구조화되고 복잡한 문서를 작성하려니.-_- 또가 나올것 같습니다.

군대 있을적 행정병으로 열심히 문서작성할때가 떠오르며, 유격보다는 문서작성이 무서웠던 악몽이 떠오르네요.ㅠㅠ

사내에서 HTML5적용을 위해 만든 문서이긴 하지만, ...회사에서 글 내리라고 하면...힘이 없는 저는 이 문서를 내리게 될수도 있짐나....HTML5를 지원하지 않는 브라우저를 위한 고민을 하는 분들을 위해 해당 문서를 공개로 작성합니다.^^

사설 #02

이 문서에서 HTML5를 도입하기에 필수적인 요소인 html5shiv기능을 제안한 사람이              무려 Jquery, Sizzle등을 만드신 "john Resig"님였군요. 이분 javascript역사를 마구 바꾸어대는 어마어마한 분이 되어 가는것 같습니다.

저는...언제쯤 이런사람이 될수 있을까요.ㅠ_ㅠ.....아 이런사람 보면 제가 왜 이리 초라하게 느껴지는지.ㅠ_ㅠ