웹표준에 대한 관심이 높아지면서 많은 사이트들이 HTML5를 이용하고 있습니다. 티스토리 블로그의 경우에도 예외는 아니라서, 대부분의 스킨들이 HTML5로 코딩되어 웹표준을 지키고 있음을 확인할 수 있습니다. 티스토리에서 공식적으로 지원해주는 스킨들의 경우에는 하위 브라우저와의 호환성 문제를 걱정할 필요가 거의 없습니다만, 개인적으로 배포된 블로그 스킨들의 경우에는 HTML5를 지원하지 않는 브라우저에서 해당 화면을 봤을때와 그렇지 않을 경우가 많이 발생합니다.
본인의 블로그가 하위 버전의 브라우저와 지금의 브라우저에서 어떤 차이가 나는지를 확인하기 위해서는 이전에 소개해드린 툴(IEtester, MS SuperPreview, Adobe BrowserLab)을 이용하면 되지만 수정하는 방법에 대해서는 알려주지 않습니다. 이번 글에서는 하위 브라우저에서도 HTML5 요소를 지원할 수 있도록 도와주는 방법에 대해서 알아보도록 하겠습니다.
수정 전입니다. 왼쪽이 IE9, 우측이 IE7에서 보이는 화면입니다. 상단의 제목과, 우측에 위치한 카테고리에서 많은 차이가 나타나고 있음을 확인할 수 있습니다. 화면에는 나타나지 않지만 하단 역시도 많은 차이가 있음을 확인할 수 있습니다. 하위 브라우저인 IE7, 8에서 HTML5를 정상적으로 표현하지 못하기 때문에 발생한 일로, 하위 브라우저에서도 HTML5의 요소를 정상적으로 표현할 수 있게끔 하는 라이브러리 파일을 불러오면 쉽게 해결할 수 있습니다.
그러나 라이브러리 파일을 불러옴에 따라 페이지의 로딩 속도가 느려진다는 것은 미리 인지하고 계셔야 합니다. 때문에 불필요하게 많은 라이브러리 파일을 불러올 필요는 없습니다. 또한 발생하는 문제가 HTML5의 문제인지 아니면 CSS3요소의 문제인지도 파악을 해주셔야 됩니다. 전자의 문제라면 아래에 제시하는 방법대로만 따라와주시면 크게 문제는 없지만, 후자의 경우에는 다른 라이브러리 파일도 불러올 필요가 있습니다. (또한 대개의 경우에 CSS3 요소를 하위 버전에서 사용할 수 있게끔 하는 라이브러리 파일에는 HTML5 요소도 사용할 수 있게끔 하는 내용도 포함되어 있습니다)
그렇지만 대개의 경우에는 아래의 과정들을 거쳐주신다면 대부분 수정이 가능합니다.
이미 업로드 되어 있는 파일 사용하기
HTML/CSS 편집모드로 들어가 skin.html 파일의 <head>내에 다음의 코드를 추가합니다.
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
하위 브라우저에서 HTML5 표현되게 하기.txt
직접 업로드 하여 이용하기
1. html5.js 파일을 다운로드 받습니다.
2. 다운받은 파일을 업로드합니다.
3. HTML/CSS 편집모드로 들어가 skin.html 파일의 <head>내에 다음의 코드를 추가합니다.
<script src="./images/html5.js"></script>
<![endif]-->
큰 차이없이 출력되고 있는 모습을 확인할 수 있습니다.
궁금하신 점은 댓글로 남겨주세요 :D
'Blog Tip > Design' 카테고리의 다른 글
| 페이스북 좋아요(Like) 버튼 달기 (2) | 2013.01.28 |
|---|---|
| 떠다니는 다음 뷰 / RSS구독버튼 달기(플로팅 배너) (3) | 2013.01.23 |
| 블로그에 웹폰트 적용하기 / 폰트 변경하기 (10) | 2013.01.11 |
| 블로그 로딩 속도 측정, 그리고 단축하기 (0) | 2013.01.03 |
| 블로그의 대표 아이콘, 파비콘 달기 (3) | 2013.01.01 |
댓글