HTML5 Ready 스위치 

우리나라는 유독 구형 IE 브라우저의 점유율이 높습니다.

따라서, 더더욱 이 스위치가 꼭 필요합니다. HTML5의 새로 추가된 태그들을 사용할 수 있게 해주며 구형 웹브라우저에서 크게 차이나는 CSS 부분을 서로 맞추어 줍니다.

이러한 기능의 오픈소스로 normalize.css , html5shiv, modernizr, 구글의 IE9.js, css3pie 등 여러가지가 있지만 제가 모두 조합해 테스트 해 본 결과 최적의 조합을 이 스위치로 만들었습니다.

이 스위치를 사용하면 HTML5 태그 중에서 새로 추가된 <header> <footer> <aside> 등의 시멘틱 태그를 성격에 맞게 리셋 해주며, 구형-신형 웹브라우저 사이 그리고 IE 브라우저와 크롬/파이어폭스/오페라/사파리 등 브라우저 버전별로 마진/패딩값 등 브라우저 기본 렌더링 초기값이 달라 레이아웃이 미묘하게 어긋나는 부분을 서로 최대한 맞도록 (크로스 브라우징) 통일시켜 줍니다.

홈페이지 DTD를 HTML5로 설정하시고 개발하실 경우 필수로 설치하셨으면 합니다. 물론 XHTML DTD 아래서도 효과를 발휘합니다.
IE6-8 브라우저에서 특히 효과를 발휘하며 레이아웃이 특정 브라우저에서 미묘하게 엇 나가는걸 꽤 많이 막아줍니다. 크로스브라우징 업무 수고가 많이 줄어듭니다.

만약 이 스위치를 켜시고 홈페이지 레이아웃이 많이 흐트러 지셨다면, HTML / CSS 퍼블리싱을 너무 구형 버전에 맞추어 개발하신 것이니 손을 좀 보시는 편이 장기적으로 좋겠고요.
그렇게 고쳐야 할 부분이 너무 많으시다면 그냥 쓰지 마시고 다음 번 개발시에 꼭 처음부터 이 스위치를 켜고 작업하시면 좋습니다.


1) 이 스위치는 헤더 스위치로 위치하는게 좋습니다. (마켓을 통한 자동설치 권장)

jQuery 등의 사전 라이브러리 성격은 반드시 head 영역에 미리 호출되어야 오류가 없습니다.


2) 스위치를 새로 설치하신 후엔 반드시 관리자페이지 시스템 > 스위치의 스위치목록에서 "SAVE" 버튼을 한 번 꼭 눌러주어야 정상 작동합니다.


3) 스위치의 기본경로를 유지하십시오.

./switchs/head/html5ready/


ie7-squish.js 는 IE6/7 에서 마진이 두배로 크게 보이는 등의 치명적인 버그 몇개를 수정해 줍니다.

IE9.js 는 IE6-8 구형 브라우저를 비교적 신형 브라우저와 맞도록 조정해 줍니다. MiT 라이센스이며 홈페이지는 https://code.google.com/p/ie7-js/ 입니다.

normalize.css 는 MiT 라이센스이며 홈페이지는 http://necolas.github.io/normalize.css/ 입니다.
1점대 버전과 2점대 버전이 있는데 국내 실정상 1점대 버전을 스위치에서 썼습니다. 2점대 버전은 IE8+ 입니다.

html5shiv 는 HTML5 에서 추가된 시멘틱태그 등을 구형 브라우저에서 지원할 수 있게 해줍니다. MiT 라이센스이며 홈페이지는 hhttps://code.google.com/p/html5shiv/ 입니다.


HTML5 Ready 스위치 다운로드 (kimsQ Market) Click


아래 도표는 2013년 7월의 국내 인터넷 사용자 웹브라우저 버전 통계입니다.



IE7 버전이 16%나 됩니다. 이해가 안가시죠?
맞습니다. MS의 강제 브라우저 업데이트 정책 때문에 실제로는 5% 미만입니다. 그런데 왜이리 아직도 많이 잡히느냐? 하면...

그놈의 "호환성보기" 설정 때문에 그렇습니다. IE9~10 브라우저를 쓰면서 국내 구형 웹사이트 환경에서 이용이 편하도록 호환성보기 IE브라우저 설정을 하면 IE7으로 변신하게 됩니다.

실제로 제가 IE10을 쓰지만 호환성보기 설정을 해 놓았기 때문에 (일부 은행사이트나 홈텍스 이용하려면 어쩔 수 없습니다.) 접속통계의 로그를 보면 제 브라우저는 IE7 브라우저로 나옵니다.

그러니 꼭! 얼마전에 언급한 IE 전용 meta 태그를 킴스큐설치폴더/index.php 파일의 상단 <title> 태그 바로 위에 한 줄 넣어주세요.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

이렇게 한 줄 넣어주시면 여러분의 홈페이지에 호환성보기 상태로 IE 사용자가 들어와도 최신 브라우저 엔진으로 렌더링 하게 됩니다.



많이 본 글최근 90일내 많이 본 글입니다.
댓글 많은 글최근 90일내 댓글 많은 글입니다.
Tag Cloud
등록된 태그가 없습니다.

Visits Counter
  • 54오늘 방문
  • 96어제 방문
  • 54오늘 페이지뷰
  • 97어제 페이지뷰
  • 2,644이번 달 방문
  • 2,247지난 달 방문