웹마스터 팁
CSS 사용시 익스플로러 버그 해결하기.
2007.08.28 22:48
보통 CSS를 사용하면 파폭, 사파리, 오페라에서는 잘 보이는데 IE에서는 깨진다거나 IE7까지는 맞출 수 있지만 IE6까지 맞출 방법이 없다거나 그렇다고 IE6에다 맞추면 다른 브라우저에서 전부 깨져보인다던가 하는 난감한 일이 발생합니다. 그런 경우를 위한 팁을 적어보겠습니다.
***HTML명령어 if IE 와 COMMENT***
if IE와 COMMENT가 무엇인가요?
두 명령어는 익스플로러에서만 지원하는 특수 명령어입니다. 다만 if IE는 웹표준 검사 시에 주석으로 인식 되어 통과가 되지만 comment는 비표준 태그에 해당하기 때문에 얄짤없이 테스트에 탈락하게 되니 웹표준 테스트에 신경을 쓰시는 분이라면 다른 종류의 방법. 이를테면 CSS핵 등을 사용하시길 권해 드립니다.
if IE는 HTML코드 사이에 IE에서만 작동하는 코드를 포함시킬 수 있는 명령어입니다. 기본적으로 주석의 형태를 가지고 있기 때문에 다른 브라우저에서는 이 명령어가 포함된 문장은 실행이 되지 않습니다. if IE가 더욱 마음에 드는 점이라면 익스플로러의 버전별로 다 명령어를 설정해 줄 수 있다는 것이지요.
COMMENT는 if IE와는 반대 되는 성격을 가진 명령어입니다. if IE가 쓰인 행이 IE에서만 인식이 되고 기타 브라우저에서는 주석으로 인식해서 비활성 처리가 되는 것에 반해 COMMENT는 IE 전용 주석 설정태그로써 이 태그가 사용된 행은 IE에서는 주석으로 인식되지만 기타 브라우저에서는 COMMENT를 비표준 태그로 인식해서 COMMENT 안에 들어간 내용을 전부 실행해 버리지요.
어떻게 사용하나요?
if IE 명령어는 이런 식으로 사용합니다.
<!--[if IE]>
IE 유저에게만 표시할 내용
<![endif]-->
버전별로 따로 설정을 할 수도 있습니다.
<!--[if IE 6]>
IE6 유저에게만 표시할 내용
<![endif]-->
같은 방법으로 <!--[if IE 7]>이라고 하면 IE7 유저에게만 보이겠지요?
comment 명령어의 사용법은 더 쉽습니다.
<comment>
기타 브라우저 사용자에게만 표시할 내용
</comment>
실제로 사용되는 사례를 가르쳐 주세요.
각 브라우저 별로 전혀 다른 페이지를 보여주는 것도 물론 가능하기는 합니다만 저는 각 브라우저별로 다른 CSS를 사용하는 데에 많이 사용합니다.
이를테면 이런 경우입니다.
이 코드를 브라우저 별로 실행시켜 보시면 IE6에선 밑줄이, IE7에서는 글씨가 회색으로, 파이어폭스 등 기타 브라우저에서는 글씨가 굵게 보일겁니다. 이런 식으로 브라우저별로 다른 CSS를 설정해 줄 수가 있는 것이지요. 그 중에서도 버그 상습범인 IE는 이런 식으로 CSS 클래스 자체를 다르게 주어서 격리를 시키는 것이 최고이지요.
참고할만한 사이트 : http://www.quirksmode.org/css/condcom.html
***HTML명령어 if IE 와 COMMENT***
if IE와 COMMENT가 무엇인가요?
두 명령어는 익스플로러에서만 지원하는 특수 명령어입니다. 다만 if IE는 웹표준 검사 시에 주석으로 인식 되어 통과가 되지만 comment는 비표준 태그에 해당하기 때문에 얄짤없이 테스트에 탈락하게 되니 웹표준 테스트에 신경을 쓰시는 분이라면 다른 종류의 방법. 이를테면 CSS핵 등을 사용하시길 권해 드립니다.
if IE는 HTML코드 사이에 IE에서만 작동하는 코드를 포함시킬 수 있는 명령어입니다. 기본적으로 주석의 형태를 가지고 있기 때문에 다른 브라우저에서는 이 명령어가 포함된 문장은 실행이 되지 않습니다. if IE가 더욱 마음에 드는 점이라면 익스플로러의 버전별로 다 명령어를 설정해 줄 수 있다는 것이지요.
COMMENT는 if IE와는 반대 되는 성격을 가진 명령어입니다. if IE가 쓰인 행이 IE에서만 인식이 되고 기타 브라우저에서는 주석으로 인식해서 비활성 처리가 되는 것에 반해 COMMENT는 IE 전용 주석 설정태그로써 이 태그가 사용된 행은 IE에서는 주석으로 인식되지만 기타 브라우저에서는 COMMENT를 비표준 태그로 인식해서 COMMENT 안에 들어간 내용을 전부 실행해 버리지요.
어떻게 사용하나요?
if IE 명령어는 이런 식으로 사용합니다.
<!--[if IE]>
IE 유저에게만 표시할 내용
<![endif]-->
버전별로 따로 설정을 할 수도 있습니다.
<!--[if IE 6]>
IE6 유저에게만 표시할 내용
<![endif]-->
같은 방법으로 <!--[if IE 7]>이라고 하면 IE7 유저에게만 보이겠지요?
comment 명령어의 사용법은 더 쉽습니다.
<comment>
기타 브라우저 사용자에게만 표시할 내용
</comment>
실제로 사용되는 사례를 가르쳐 주세요.
각 브라우저 별로 전혀 다른 페이지를 보여주는 것도 물론 가능하기는 합니다만 저는 각 브라우저별로 다른 CSS를 사용하는 데에 많이 사용합니다.
이를테면 이런 경우입니다.
<style>
.test { font-weight:bold; }
.test_IE6 { text-decoration:underline; }
.test_IE7 { color:#CCCCCC; }
</style>
<html>
<!--[if IE 6]>
<div class = "test_IE6">
<![endif]-->
<!--[if IE 7]>
<div class = "test_IE7">
<![endif]-->
<comment>
<div class = "test">
</comment>
이 글자가 어떻게 보이십니까?
</div>
</html>
.test { font-weight:bold; }
.test_IE6 { text-decoration:underline; }
.test_IE7 { color:#CCCCCC; }
</style>
<html>
<!--[if IE 6]>
<div class = "test_IE6">
<![endif]-->
<!--[if IE 7]>
<div class = "test_IE7">
<![endif]-->
<comment>
<div class = "test">
</comment>
이 글자가 어떻게 보이십니까?
</div>
</html>
이 코드를 브라우저 별로 실행시켜 보시면 IE6에선 밑줄이, IE7에서는 글씨가 회색으로, 파이어폭스 등 기타 브라우저에서는 글씨가 굵게 보일겁니다. 이런 식으로 브라우저별로 다른 CSS를 설정해 줄 수가 있는 것이지요. 그 중에서도 버그 상습범인 IE는 이런 식으로 CSS 클래스 자체를 다르게 주어서 격리를 시키는 것이 최고이지요.
참고할만한 사이트 : http://www.quirksmode.org/css/condcom.html
태그 연관 글
- [2016/08/02] 묻고답하기 검색부분을 가운데로 하고싶은데요 어떻게 하는 건가요? *1
- [2015/04/02] 묻고답하기 comment 모듈 업데이트가 안됩니다
- [2012/05/13] 묻고답하기 위젯에 댓글목록 출력하기
- [2011/10/25] 웹마스터 팁 리플카운터 *3
댓글 3
-
*선정이*
2007.09.08 22:34
-
wdlee91.myid.net
2007.10.15 23:15
IE를 제외한 브라우저에서 보이고 싶은 내용이 있다면, [if !IE]의 사용을 권장합니다.
<!--[if !IE]><-->
Document for non-IE
<!--><![endif]--> -
반명화
2008.10.15 09:22
와 css로 레이아웃잡고 하는것 땜에 골치아팠는데 정말 유용한 팁이네요 감사해요 ^^
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| BGM 넣기 및 간단한 제어 [2] | Elinoa | 2011.03.26 |
타이틀에 홈페이지 제목 추가 시키기
[5]
 | 웹 엔진 | 2011.03.17 |
| jQuery 강의 #1. css에 대해 이해해보자. [1] | 서기 | 2011.03.03 |
| 각 게시판 헤더에 언어 변경 버튼 추가하기 [1] | cjsound | 2011.03.21 |
| 제로보드 관리자 레벨이 관리자 레벨로 안나올때 [5] | 나무넷 | 2007.08.23 |
| 사랑비BGM 플레이기 설치하고 제어하기 [2] | 스유군 | 2009.04.28 |
| XE 모듈/스킨 개발시 사용 가능한 변수 알아내기 [3] | 도라란 | 2011.02.27 |
| z-index 값 설정하기... [2] | ForHanbi | 2011.03.15 |
| UTF-8 파일을 열면 글자가 깨져요 어떤 에디터를 사용해야 하나요? [2] | 최소영329 | 2009.02.03 |
| 문자열 처리 함수 + 파일 처리 함수 [1] | 999 | 2011.02.22 |
| [생초보팁] 레이아웃 스킨 강좌 사이트 [2] | HolyJohn | 2010.12.29 |
| 추천수와 비추천수를 합친 값을 보여주기 | lol :) | 2011.03.11 |
| 사진링크가 깨져서 엉망이네요 [1] | 김성회 | 2011.03.11 |
| jQuery 강의 #2. 셀렉터에 스타일을 적용해보자. | 서기 | 2011.03.08 |
| 페이지 수정시 팝업창 높이 조절... [1] | 브레인630 | 2011.03.07 |
| 이용자가 댓글을 닉네임으로 검색할순 없나요? [2] | gc00 | 2011.03.04 |
| CSS 사용시 익스플로러 버그 해결하기. [3] | NineTail | 2007.08.28 |
|
[확장변수] 게시물을 새창에서 전체화면으로 보기
[2]
| 고진감래 | 2009.10.09 |
| php5 설정(최적화) | fsfsdas | 2011.02.20 |
| 메뉴 클릭시 알림메시지 띄우기 [1] | 도라란 | 2011.02.27 |
좋은 팁 감사합니다. 저 또한 크로스 브라우징 땜에 골머리가 아팠는데 이제 해결책을 찾았네요. 감사합니다.
table 태그에서는 별차이 없이 보이는데 div 태그에서는 왜이리 각 브라우저마다 틀리게 보이는지 이거 원...ㅡ,.ㅡ;;
감사히 참고 하겠습니다.