IE6 No More 수정

IE6 no more logo

BLUEnLIVE's ZocKrWorldBLUEnLIVE 님의 영향을 받아 동참한 IE6 no more 캠페인이다. 이번에 이것을 다시 한 번 고쳤습니다.

원래의 배너 등을 보고 싶은 사람은 IE6 No More 동참하기 문서를 보기 바랍니다.

원래의 코드

IE6 No More 홈페이지에 나타난 원본 코드는 다음과 같습니다.

[code css; html-script: false] <!--[if lt IE 7]> <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'>     <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a> </div>     <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>         <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div>         <div style='width: 275px; float: left; font-family: Arial, sans-serif;'>             <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>You are using an outdated browser</div>             <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>For a better experience using this site, please upgrade to a modern web browser.</div>         </div>         <div style='width: 75px; float: left;'><a href='http://www.firefox.com' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div>         <div style='width: 75px; float: left;'><a href='http://www.browserforthebetter.com/download.html' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div>         <div style='width: 73px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div>         <div style='float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div>     </div> </div> <![endif]--> [/code]

BLUEnLIVE 님이 한글로 고쳐준 코드

BLUEnLIVE 님 한글 메시지로 고쳐준 코드는 다음과 같습니다.

[code css; html-script: false] <!--[if lt IE 7]> <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'>     <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div>     <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>         <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div>         <div style='width: 275px; float: left; font-family: Arial, sans-serif;'>             <div style='font-size: 13px; font-weight: bold; margin-top: 12px;'>구닥다리 웹브라우저를 사용하시는군요!</div>             <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>본 사이트를 원활하게 보실 수 있도록 웹브라우저를 업데이트 하세요.</div>         </div>         <div style='width: 75px; float: left;'><a href='http://www.firefox.com' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div>         <div style='width: 75px; float: left;'><a href='http://www.browserforthebetter.com/download.html' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div>         <div style='width: 73px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div>         <div style='float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div>     </div> </div> <![endif]--> [/code]

한글 메시지를 다시 고친 코드

BLUEnLIVE 님이 한글 메시지로 고친 코드를 조금 다르게 바꾼 코드는 다음과 같습니다.

[code css; html-script: false] <!-- IE6 No More 배너 시작 --> <!--[if lt IE 7]><div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'>     <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div>     <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>         <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div>         <div style='width: 275px; float: left; font-family: Arial, sans-serif;'>             <div style='font-size: 13px; font-weight: bold; margin-top: 12px;'>저는 당신 컴퓨터의 안전을 기원합니다!</div>             <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>당신의 컴퓨터가 좀 더 안전하기를 바란다면 웹브라우저를 바꾸기 바랍니다.</div>         </div>         <div style='width: 75px; float: left;'><a href='http://www.firefox.com' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div>         <div style='width: 75px; float: left;'><a href='http://www.browserforthebetter.com/download.html' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div>         <div style='width: 73px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div>         <div style='float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div>     </div> </div> <![endif]--> <!-- IE6 No More 배너 끝 --> [/code]

링크 주소를 코친 코드

위 세 코드는 한 가지 문제가 있습니다. 바로 인터넷 익스플로러는 항상 영문으로 설치된다는 점입니다. 물론 설치 과정에서 약간의 작업을 거쳐서 한글 메시지를 출력할 수 있게 바뀝니다만, 처음부터 한글 인터넷 익스플로러가 설치되는 경우와는 조금 다릅니다. 더구나 설치하는 페이지도 영문 메시지를 보여 줍니다. 그것을 마이크로소프트의 웹페이지로 바꾸고, 다른 웹브라우저와 관련한 링크도 조금 손을 보았습니다. 아울러 alt 속성과 관련한 메시지도 한글로 바꾸었습니다.

[code css; html-script: false] <!-- IE6 No More 배너 시작 --> <!--[if lt IE 7]><div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'>     <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div>     <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>         <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div>         <div style='width: 275px; float: left; font-family: Arial, sans-serif;'>             <div style='font-size: 13px; font-weight: bold; margin-top: 12px;'>저는 당신 컴퓨터의 안전을 기원합니다!</div>             <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>당신의 컴퓨터가 좀 더 안전하기를 바란다면 웹브라우저를 바꾸기 바랍니다.</div>         </div>         <div style='width: 75px; float: left;'><a href='http://www.mozilla.or.kr/ko/firefox/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Firefox 3.5 또는 상위 버전 구하기'/></a></div>         <div style='width: 75px; float: left;'><a href='http://www.microsoft.com/korea/windows/internet-explorer/worldwide-sites.aspx' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Internet Explorer 8 또는 상위 버전 구하기'/></a></div>         <div style='width: 73px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Safari 4 또는 상위 버전 구하기'/></a></div>         <div style='float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Google Chrome 구하기'/></a></div>     </div> </div> <![endif]--> <!-- IE6 No More 배너 끝 --> [/code]

관련 문서

이 글은 스프링노트에서 작성되었습니다.


Trackback 0 Comment 2
prev 1 2 3 4 5 6 7 ··· 21 next