'인터넷익스플로러'에 해당되는 글 2건

  1. 2012.08.20 CSS 호환성을 위하여 MS의 인터넷익스플로러 브라우저 구분하는 방법
  2. 2012.06.05 E3에서 발표한 MS의 XBox 스마트글래스와 인터넷 익스플로러 fox XBox

CSS 호환성을 위하여 MS의 인터넷익스플로러 브라우저 구분하는 방법

|



웹 표준으로 개발하면서 CSS를 적용하다 보면 항상 IE가 문제가 됩니다. 

구글 크롬, 파이어폭스, 애플 사파리 모두 제대로 보이는데 IE만 이상하게 보이는 경우가 종종 있습니다. 

IE 8 버전 이후로 웹 표준을 많이 따르기 때문에 좋아졌다고는 하지만 아직도 안 맞는 부분들이 있네요. 


IE 브라우저의 CSS 구분

이런 경우, CSS Hack이라고 하는 특정 브라우저만 적용할 수 있는 편법들이 나오기도 하지요. 

이외에도 일반적으로 사용하는 방법이 브라우저를 파악해서 다른 CSS 파일을 링크하도록 구성하는 겁니다. 

다음 소스를 한번 보시죠.. 



이렇게 하면 IE에서는 common_ie.css 파일을 사용하게 되구요. 

다른 브라우저에서는 common.css 파일을 사용하게 됩니다. 


이게 가능한 이유는 IE 브라우저가 8버전을 내 놓으면서 

기존의 IE 7 이하와 호환성을 유지하기 위해 HTML에 <!--[if IE] 라는 구문을 주석 형태로 넣었기 때문입니다. 

다른 브라우저에서는 주석이므로 무시하게 되고, 오직 IE에서만 해당 구문을 읽어서 동작하게 되는 것이죠. 

(정말 편법은 대단합니다. ^^)


단순히 IE만 구분하는 것이 아니라 IE의 버전별로도 구분할 수 있습니다. 



Table width 문제 발생시 처리 

특히 IE의 경우, Table의 width가 제대로 처리되지 않는 문제가 많이 발생했었는데요. 

"IE table width problem"으로 구글 검색 해보면 상당히 많은 글들이 나옵니다. 


저의 경우에도 희한하게 IE에서만 Table 구조가 깨지는 경우가 있어서 다음과 같이 처리해 봤습니다. 


<table style="table-layout:fixed"> ... </table>


table-layout 속성은 CSS2부터 포함된 것인데요. 

fixed 값으로 설정되어 있으면 테이블의 넓이를 각 테이블이나 셀에서 설정한 대로 보여주라는 것입니다. 

그러므로 Table내에 width를 잘 설정했다면 IE가 임의대로 출력함으로써 Table 구조가 깨지는 것을 방지해 주는 것이죠.


CSS에서 IE 7과 IE 8, 9의 호환성 유지하는 방법

인터넷 익스플로러에서도 IE 7버전과 8, 9 버전의 호환성을 유지할 필요가 있습니다. 

특히 좌우 여백을 설정하는 경우에 주로 차이가 발생하는데요. 이런 경우 사용할 수 있는 팁은 다음과 같습니다. 


.pass { width:323px; height:44px; margin-left:56px;}
*:first-child+html .pass {margin-left:28px;}


위와 같이 설정하면, IE 7에서 margin-left:28px 가 적용되고 IE 8이나 9에서는 margin-left:56px가 적용되네요. 

이와 관련한 참고 사이트는 http://www.dynamicsitesolutions.com/css/filters/first-child-plus-html/ 를 보시면 됩니다. 

 




Trackback 0 And Comment 0

E3에서 발표한 MS의 XBox 스마트글래스와 인터넷 익스플로러 fox XBox

|



MS에서 E3 2012 개막에 앞서 XBox의 새로운 기능들을 선보였다고 하네요. 


XBox 스마트글래스


XBox에 상당히 많은 공을 들인 것 같습니다. 

먼저 스마트 글래스 관련 발표내용을 보시죠. 


XBox에 소개된 각 서비스들을 정리하면 다음과 같습니다. 

XBox 스마트글래스

XBox와 스마트폰/태블릿을 연동하는 것인데요. 

스마트폰이나 태블릿의 화면을 XBox와 연결된 TV에 올려서 볼 수도 있구요. 

TV에서 영화를 보고 있을 때 스마트폰이나 태블릿에는 관련된 콘텐츠 정보를 표시해 줄 수도 있다고 합니다. 

애플 TV와 아이폰/아이패드를 연동한 에어플레이와 비교해 볼 수 있을 듯 합니다. 

다만 XBox 스마트글래스는 MS의 디바이스 뿐만 아니라 아이폰, 안드로이드에서도 가능하다고 하네요. 


인터넷 익스플로러 for XBox

일단 요즘 추세에 맞추어 음성 지원이 핵심인 듯 합니다. 

그리고 TV에서 인터넷 익스플로러를 통해 인터넷 탐색이 가능하다는 것인데요. 

역시 네비게이션은 스마트폰이나 태블릿으로 하게 되겠죠.. ^^


이외에도 XBox 뮤직을 통한 음악 서비스, 윈도우 8이 보편화 되면 XBox를 기반으로 하나의 엔터테인먼트 서비스를 구축한다는 것 같은데요. 

다음 동영상을 보면 보다 쉽게 이해할 수 있을 듯 합니다. 


참고사이트

광파리님의 E3:스마트글래스와 위유(Wii U)

아이폰게임샷의 [E3] Xbox 스마트글래스와 인터넷 익스플로러


그런데 위 동영상의 앞부분은 닌텐도의 휘트니스 광고가 떠오르고, 서비스 자체는 애플의 에어플레이와 시리(Siri)가...

하지만 항상 그렇듯 비슷하면서도 사용자를 끌어들이는 MS의 능력이 있기에 

이것도 한번 기대해 볼만 할 것 같네요. 






Trackback 1 And Comment 0
prev | 1 | next