[ CSS ] IE 버전별 CCS 적용

IE 조건부 주석을 사용하여 호환성 문제를 해결
조건부 주석이란, IE 를 제외한 브라우저는 주석으로 처리하나 IE 브라우저는 버전에 따라 실제 콘텐츠로 인식하는 주석 입니다. 조건부 주석을 활용하면 IE7, IE6, IE5 각각의 브라우저에 최적화된 코드를 각각 다르게 적용할 수 있습니다. UI 개발자는 IE7, IE6, IE5 브라우저에 각각 대응하는 별도의 CSS 코드를 작성하고 각각을 파일로 분리합니다.
- default.css
- ie7.css
- ie6.css
- ie5.css
 
IE 조건부 주석의 이해
조건부 주석은 다음과 같은 형식을 갖습니다.
<!--[if expression]> HTML <![endif]-->
IE 를 제외한 브라우저는 `<!--`부터`-->`까지를 모두 주석으로 처리하고 IE 는 `HTML` 을 실제 콘텐츠로 인식하고 파싱합니다.
 
IE 조건부 주석의 적절한 사용법
<link rel="stylesheet" type="text/css" href="default.css" />
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="ie7.css" /><[endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" /><[endif]-->
<!--[if IE 5]><link rel="stylesheet" type="text/css" href="ie5.css" /><[endif]-->
 
CSS Hack 을 사용하여 호환성 문제를 해결
CSS Hack 은 브라우저의 버그를 이용하여 문제를 해결하는 방법입니다. 버전별로 CSS 파일을 각각 작성하지 않아도 간편하게 낡은 브라우저에 대응할 수 있지만 CSS 문법 규격에 맞지 않는것이 흠입니다. CSS Hack 은 미래의 다른 브라우정 장치에서 오류로 취급하지 않는다는 보장이 없기 때문에 항상 주의가 필요합니다.
 
IE5 ~ IE7 대응 Hack
#selector { property:value; *property:value; } /* 문서의 DTD 와 무관하게 작용함 */
 
IE5 ~ IE6 대응 Hack
#selector { property:value; _property:value; } /* DTD 가 없는 문서는 IE7 에도 작용함 */
 
IE5 대응 Hack
#selector { property:value; _property /**/:value; } /* DTD 가 표준모드인 경우에만 작용함 */
 
IE8 의 향상된 웹 표준 활용하기
IE8 이 등장 했지만 낡은 브라우저와의 호환성을 유지하기 위하여 향상된 표준 코드를 사용하지 않는 것은 바보같은 짓이라고 생각합니다. IE8 이 지원하는 표준 CSS 코드를 얼마든지 사용할 수 있습니다. 향상된 브라우저에 향상된 스타일을 제공하고 더 나은 사용자 경험을 제공 해야 한다고 생각합니다. 단, 표준 코드가 낡은 브라우저에 대하여 콘텐츠를 차별하는 형태로 구현 되어서는 안됩니다.
 
개발자 도구를 사용하여 브라우저 호환성 테스트
IE8 브라우저는 3가지 종류의 렌더링 모드를 지니고 있으며 웹 사이트 개발자는 IE8 에 탑재되어 있는 개발자 도구(F12)를 이용하여 이 모드를 강제로 변경 할 수 있습니다.
- Quirks Mode ( IE5 를 흉내내기 때문에 IE5 모드라고 볼 수 있음 )
- IE7 표준모드
- IE8 표준모드
렌더링 모드의 전환은 웹 페이지나 서버측 응답 헤더에 `IE 호환 유도 코드`(Meta Tag)를 사용함으로써 가능하지만 웹 페이지에 선언된 코드를 변경하지 않고도 개발자 도구를 이용하여 다양한 렌더링 모드 테스트를 진행할 수 있습니다.
개발자 도구에서 렌더링 모드를 직접 제어하는 방법은 두 가지가 있습니다. 두 가지 방법 모두 렌더링 엔진을 전환하는 기능을 하지만 `문서 모드`는 클라이언트측에서 단순하게 렌더링 모드만을 변경하고 `브라우저 모드`는 렌더링 모드 전환 뿐만 아니라 서버측에 브라우저 식별정보를 보내주어야 할 때 사용합니다.
■ 문서 모드(Document Mode) : 클라이언트측 개발자에게 필요한 옵션으로써 다음과 같이 모드 전환이 가능합니다.
- Quirks Mode : DTD 가 있는 문서라도 마치 DTD 가 없는듯 IE5 를 흉내내는 렌더링을 합니다.
- IE7 표준 모드 : DTD 가 없는 문서라도 마치 DTD 가 있는듯 IE7 표준 모드로 렌더링 합니다.
- IE8 표준 모드 : DTD 가 없는 문서라도 마치 DTD 가 있는듯 IE8 표준 모드로 렌더링 합니다.
■ 브라우저 모드(Browser Mode) : 브라우저 식별정보를 필요로 하는 서버측 개발자에게 필요하며 다음과 같이 모드 전환이 가능합니다.
- IE7 모드 : IE7 브라우저와 같습니다. DTD 가 없는 문서는 Quirks Mode 로, DTD 가 있는 문서는 IE7 표준 모드로 렌더링 합니다.
                    서버측에 브라우저 식별 정보를 보낼 때 IE7 으로 보냅니다.
- IE8 모드 : IE8 브라우저와 같습니다. DTD 가 없는 문서는 Quirks Mode 로, DTD 가 있는 문서는 IE8 표준 모드로 렌더링 합니다.
                    서버측에 브라우저 식별 정보를 보낼 때 IE8 으로 보냅니다.
- IE8 호환성 모드 : IE7 브라우저와 같습니다. DTD 가 없는 문서는 Quirks Mode 로, DTD 가 있는 문서는 IE7 표준 모드로 렌더링 합니다.
                    서버측에 브라우저 식별 정보를 보낼 때 IE7 으로 보냅니다.
                    단, IE8 의 호환성 모드를 이용했다는 정보까지 식별할 수 있게 됩니다.