web sprit
float속성 해재 방법 본문
zoom핵 테스트 파일 (익스플로러 버젼별 테스트 요망)
zoom_test.htmlfloat은 사전적 의미로 ‘뜨다, 띄우다, 뜨는 물건, 부유물’ 이라는 의미가 담겨져 있다.
여러가지 방법들이 많이 나와있지만 가장 핵심적인 내용으로 다뤄보도록 한다.
우선 부연 설명으로
▷▶ float 를 가상 선택자 (:after)로 clear 하는 방법
가상선택자는 "가상 클래스" 와 "가상 엘리먼트" 로 구분할 수 있다.
가상 클래스 : 특정 엘리먼트에 대하여 아무런 class를 부여하지 않았지만 마치 역동적으로 class를 변경한것과 같은 효과를 낼 수 있는 것들로서 이미 존재하는 엘리먼트에 조합해서 사용할 수 있다
가상 엘리먼트 : 존재하지 않는 엘리먼트를 가상으로 생성해내는 선택자이다.
그럼 저 가상엘리먼트의 :after 를 이용하여 float 속성을 clear 해보자.
.element{*zoom:1;} /* IE5.5~7 브라우저 대응 Hack */
.element:after{content:""; display:block; clear:both;} /* 표준계열 브라우저에 대응하는 float 해제용 가상 엘리먼트의 생성 */
IE 5~7 브라우저는 hasLayout이라는 고유한 성질을 갖게 되면 float을 해제하는 트리거로 작용하는 성질이 있고 zoom:1 속성이 hayLayout 이라는 성질을 갖도록 하기 때문에 IE 5~7 브라우저 고유의 특징을 이용한 해결방법 이다.
하지만 위의 *zoom:1; 을 사용하게 되면 http://validator.kldp.org/ 에서 오류로 판정하고 만다 . 웹마크 획득을 위하여 부득이학 위의 사항을 사용하지 말아야 할경우...또는 CSS유효성까지 충족해야 할경우 아래와 같은 방법을 사용해야 할 것이다.
바로 조건부 주석(Conditional Comment)
을 사용할것을 권장한다.
아래의 내용은 NARADESIGN 사이트를 참조 및 내용을 가져온 부분이라는것을 알린다.
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의 호환성 모드를 이용했다는 정보까지 식별할 수 있게 됩니다.