이제는 익스플로러(이하 익플)6 또는 7과 같은 구시대적 유물과 같은 브라우저는 찾기도 정말 힘들지만
최근에 한국인터넷진흥원이 2월19일에 발표한 '2015년 국내 인터넷 이용환경 현황 조사'자료를 살펴보면 아직도
보안이 취약한 구식 구형 IE 웹브라우저를 사용하는 사용자가 60%가 넘습니다.
IE7 이하는 많이 줄어들어서 그나마 다행이지만
익플8 점유율도 14년도에 비해서 매우 큰 폭으로 줄어들었습니다.
하지만 아직도 마소가 구글 크롬 따라 가보려다
말아먹은 쓰X기 IE9 와 그나마 덜 쓰X기 IE10 점유율이 40%가 넘습니다.
개인적으로 IE9은 IE8이나 심지어 IE6보다 못 한거 같은 느낌이..
최근 각종 브라우저 및 운영체제에서 지원 중단 경고 문구와
안내를 통해서 구형 웹브라우저 사용이 점점 줄어들고 있어서 다행이라고 생각합니다.
그렇기 때문에 아직도 IE9 이하의 구형 익플을 사용하는 유저들에게
블로그 자체에서도 경고 문구를 새기도록 해보겠습니다.
바로 요렇게!!!!
본격적으로 시작해보자~~
우선 IE 조건문을 사용해서 구형 익스플로러에서만 반응 하고 나타날 수 있도록 해줍니다.
IE 조건문이란?!! 조건부 주석은 IE10 미만에서만 작동하는 조건문으로,
이를 이용하여 IE 브라우저별로 어떤 기능이나 파일, 디자인등을 삽입하는 용도로 자주 사용된다고 합니다.
더 자세한 IE 조건문의 정의와 개념 예시 기호 활용 방법 등등은
해당 포스트를 참고하시면 매우 도움이 됩니다.
http://webdir.tistory.com/451 - IE 조건부 주석 (Conditional Comment)
이러한 경고 문구를 다는 이유는 제가 사용하는
CCZ-CROSS 스킨은 구형 익스플로러도 지원하는 크로스 브라우징 스킨입니다!
웹 표준 기술을 채용하여 다른 기종/플랫폼에 따라 달리 구현되는 기술을
비슷하게 만듬과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법을
크로스 브라우징이라고 하는데요
한마디로 모든 브라우저에서 내 웹페이지가 동일하게 깨지지않고 최적화된 상태로 보이게 되는 것이죠!
하지만 스킨을 꾸미면서 다양한 소스나 플러그인을 추가하면서
구형 브라우저들까지 모두 신경쓰기는 사실상 불가능에 가깝습니다.
그래서 경고문구를 삽입하므로써 일부기능들의 제약이 있으니 이해해달라는 의미와 함께
쾌적한 웹환경을 위해서 업그레이드를 권장도 동시해 할 수 있죠!!!
HTML 편집기에서 수정을 해보자
<!--[if ite ie 9]>...<![endif]--> 구문을 사용해서 만들어 볼 것입니다.
해당 구문의 의미는 IE9 보다 작거나 같다면 입니다.
익플9 이하의 브라우저에서 접속을 하면 해당 조건부 구문안에 있는 소스가 활성화 되어 보입니다.
해당 조건문은 크롬 파폭 사파리등 에서는 해당하지 않으니 걱정안하셔도 됩니다!
CCZ-CROSS 기준으로 설명 드리겠습니다.
<body id="tt-body-page" class="loading">
<s_t3>
<!--[if ite ie 9]>
<p class="chromeframe" style="background-color: rgb(255, 255, 255);">You are using an outdated browser. <a href="http://browsehappy.com/" target="_blank">Upgrade your browser today</a> or <a href="https://www.google.com/chrome" target="_blank">install Google Chrome Frame</a> to better experience this site.<br>오래된 브라우저를 사용하는 것은 컴퓨터를 안전하지 않게 만듭니다. <a href="http://browsehappy.com/" target="_blank">업그레이드</a> 또는 더 좋은 인터넷 경험을 위해 <a href="https://www.google.com/chrome" target="_blank">크롬</a>을 사용하세요.<br>Windows XP는 2014년 4월 8일 지원 종료됩니다. Microsoft로부터 보안 업데이트 등의 Windows XP 관련 업데이트가 더 이상 제공되지 않습니다.<br>해당 브라우저에서는 일부기능이 제한 될 수 있습니다.</p>
<![endif]-->
해당 소스코드를 <body> 안쪽에 배치 시켜줍니다. 가장 윗 쪽에 배치 하는게 좋겠죠?
위 코드의 HTML에 붙혀넣기가 끝났다면
이제는 경고 문구가 조금 깔끔하게 보이기 위해서 CSS 를 수정해줍니다.
따로 크로스브라이징을 지원해서 구형 익스플로러용의 CSS 파일이 존재하면
그곳에 추가 시켜주면 되고, 만약 없더라도 style.css 에 붙혀넣기를 하면 됩니다.
CCZ-CROSS는 따로 old.css 파일이 존재합니다. 해당 파일을 열어서 가장 마지막 부분에 해당 코드를 입력 해줍니다.
.chromeframe{text-align:center\9;padding:20px\9;margin-top:20px\9;margin-bottom:0px;border-bottom: 1px solid #777;}
경고 문구를 응용 해보자
경고 문구의 링크 색을 강조하는 방법 입니다. 동일하게 old.css 에서 ci-color 부분을 찾아줍니다.
그리고 아래와 같이 .chromeframe a 부분을 추가해주면 됩니다!
/* ci-color */
.ci-color,
.ci-link a:hover,
.ci-link a.active,
.list-body a:hover .list-head,
.module-tag li a, .chromeframe a:hover {
color: #81a9db !important
}
경고 문구를 팝업창으로 여는 방법입니다. 해당 조건부 구문만 수정한다면 쉽게 응용 할 수 있습니다.
<!--[if IE 7]>
<script type=text/javascript>
alert("COCOSOFT 홈페이지는 [Internet Explorer 7]를 지원하지 않습니다. \n\n안전하고 쾌적한 인터넷 환경을 위해 상위 버전의 브라우저를 사용해주세요.");
</script>
<![endif]-->
마무리 잘적용 되었는지 확인을 해보자
잘 적용 된 것을 확인 하기 위해서 직접 구형 익플을 설치할 필요는 없겠죠?
설치하기가 더 힘들 겁니다.. 아마..
익스플로러 11을 사용하시는 분들이라면 개발자모드 F12 에서서 브라우저 모드를 변경해서 확인할 수 있으며
http://netrenderer.com/index.php
사이트에서도 간편하게 확인이 가능합니다.
아니면 모든 브라우저를 확인 할 수 있는 프로그램
http://www.browseemall.com/Try
도 사용하면 간편하게 확인할 수 있습니다.
요기도 온라인으로 확인하긴 괜찮은데 여기는 30분 무료에 브라우저 제약이 있는곳입니다.
결론 마무리~~~
마지막으로 해당 경고 문구는 의무적인게 아닙니다!!
위에도 말했다 싶이 제가 사용하는 있는 스킨은 아예 구형 익스플로러를 무시하는 스킨이 아니고
지원을 하고 있기 때문에 일부 플러그인에 호환을 맞추지 않았다는 점을 알리고 웹브라우저 업그레이드를 권장하려고 적었습니다.
(예전에는 업그레이드 권장 위젯도 있었지만 간단하게 코드만으로도 권장을 할 수 있습니다)
또한 CCZ-CROSS 스킨은 자체적으로 FOUC 화면 깜빡임(화면깨짐) 현상이 방지 처리가 되어있습니다.
그래서 그냥 스킨을 사용하는 분들이라면 문제가 없겠지만 스킨 수정 및 플러그인 설치를 많이 했거나 변경 하신분들이라면
브라우징 테스트를 꼭 해보는 것을 권장합니다.
본문영역이나 홈화면 리스트에 FOUC 처리를 풀지 않고 만약 문제가 발생시에는
본문 콘텐츠가 전부 로딩이 되었더라도 로딩이 완벽하게 끝나기 전까지 보여지지 않습니다.
이는 처음 블로그를 접한 방문객들에게 매우 좋지 않은 경험을 남길 수 있기 때문에 순정 블로그 스킨에서 수정을 하신 분들은
브라우징 테스트를 해서 확인을 하는 것이 좋습니다. 아니면 본문영역에 FOUC 처리를 삭제하거나요!
끝.
