본문으로 바로가기
반응형


* 14.07.20에 업데이트된 브라우저 업데이트 권장 메시지


오늘도 진행된 사소한 업데이트

그 두번째 업데이트는 '웹 브라우저 업데이트 권장 메시지'입니다.


만약에 설치된 Internet Explorer(IE)의 버전이 9 미만인 환경의 PC에서 접속을 할 경우, 공지 창 밑에 업데이트 권장 메시지를 띄우도록 한 것입니다. 이 창은 공지창과 마찬가지로 상하로 따라다니면서 메시지에 업그레이드를 할 수 있는 웹 페이지의 URL을 링크로 걸어놓아 이용자 여러분들이 더욱 더 편하게 업그레이드를 하실 수 있도록 도와드리고 있습니다. ( 이 정도면 스토킹 수준이 아닐까 ... )


무튼, 소스 코드들을 살짝 공개해볼까합니다.

+ 현재 이 곳의 코드와 실제 Section.G에 적용되는 코드가 충돌되는 문제로 일부 클래스 명을 변경해서 공개합니다.


 
<#!--[if lt IE 9]>
<#div id="broupdate">
<#font color="#FFA500">[알림] Section.G는 Internet Explorer 9 (IE9) 이상 환경에 최적화되어 있습니다. Internet Explorer를 업그레이드하시거나 다른 웹 브라우저를 설치하시기 바랍니다.

<#![endif]--> ★ 태그 안의 '#'를 빼셔야 정상 작동됩니다.

해당 알림창에 관한 태그입니다. 클래스 명을 'broupdate"로 설정해놓았습니다.

 
#broupdate{position: fixed; display: block; top: 0px; left: 0px; width: 100%; padding: 10px 0 10px 0; background: #000;filter:alpha(opacity=80); opacity:0.8; -moz-opacity:0.8; z-index: 99999; cursor: pointer; color: white; margin-top: 33px; font-family:'Nanum Gothic', Dotum; font-size:11px; text-align: center;}

#broupdate a{color: white; text-decoration: none; -o-transition: color .2s ease-out, background 0.2s ease-in;
-ms-transition: color .2s ease-out, background 0.2s ease-in; -moz-transition: color .2s ease-out, background 0.2s ease-in; -webkit-transition: color .2s ease-out, background 0.2s ease-in;
transition: color .2s ease-out, background 0.2s ease-in;}

#broupdate a:hover{color: #3399cc;}

해당 알림창에 관한 스타일 정의입니다. 위쪽부터 창의 배경과 글씨 색상, 글꼴 등을 설정해놓았으며, 두번째 문단에는 마우스 오버/아웃 시의 효과를 그리고 마지막에는 마우스 오버 시의 링크 색상을 정의했습니다.


p.s 상단 공지사항과 위치 중복 문제 때문에 상단에서 조금 이격시킨 상태입니다. 해당 부분은 'margin-top: 33px'에서 숫자 부분을 조정하시면 됩니다. 상단에 다른 중첩되는 게 없으시면 해당 부분을 삭제하시면 됩니다.




+ 브라우저를 업데이트 해야되는 이유?

첫째. 보안성이 향상됩니다.

최신 브라우저는 바이러스나 트로이목마, 피싱 사이트들을 차단하는 기능을 가지고 있으며, 이는 업데이트가 될 수록 더욱 더 강력해지고 있습니다. 만약 웹을 돌아다니면서 개인정보를 잃어버리는(?) 일을 원치 않다면 업그레이드는 필수이겠죠?


둘째. 브라우징 속도가 향상됩니다.

구 버전 브라우저, 특히 IE를 사용하시던 분들은 IE가 아닌 다른 브라우저로 웹 서핑을 해보셨다면 깜짝 놀라셨을 겁니다.

잊지 못할 어마무시한(?) 속도! 좀 더 빠릿빠릿한 웹 서핑을 원한다면 업그레이드하세요!


셋째. 웹 페이지와의 호환성이 향상됩니다.

구 버전 브라우저들을 염두하지 않은 채 개발된 웹에서는 당연히 페이지가 정상적으로 보이지 않습니다.

당장 Section.G에도 최신 브라우저에서만 제대로 보여지는 소스 코드나 게시물들이 있습니다.


그럼, '구 버전 브라우저들도 호환이 가능하게 만들면 되지 않느냐?'라는 질문을 하실텐데요.


글쎄요... 개발자쪽으로 생각한 게 조금 이기적일지도 몰라도 돈 낭비, 시간 낭비, 능력 낭비입니다.

최신 버전의 브라우저는 웹 개발자들에게도 꿈과 희망을 줍니다.




반응형