1.  자료실
  2.  팁
  3.  나의 XE
  4.  Html
  5.  배경이미지

XE 인기게시물

MH 슬라이딩 배너 0....
MH 위젯스타일
prettyphoto - 본문내...
SCM 플레이어 사용법
XE 1.4.4.2버전 이후에...
네비게이션 위젯
IE 버젼별로 css 따로...
문서보기 유저 지정
문하우스 게시판스킨 V...
내용글 출력시 주소창에...
Html Tip
여러사이트에서 제가 필요해 가져온 Html Tip들입니다.
보통 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]-->

IE에서만 실행 할 내용.


버전별로 따로 설정을 할 수도 있습니다.
<!--[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>

이 코드를 브라우저 별로 실행시켜 보시면 IE6에선 밑줄이, IE7에서는 글씨가 회색으로, 파이어폭스 등 기타 브라우저에서는 글씨가 굵게 보일겁니다. 이런 식으로 브라우저별로 다른 CSS를 설정해 줄 수가 있는 것이지요. 그 중에서도 버그 상습범인 IE는 이런 식으로 CSS 클래스 자체를 다르게 주어서 격리를 시키는 것이 최고이지요.
번호
제목
글쓴이
38 IE 버젼별로 css 따로 적용하는 방법
[레벨:30]id: 팔공산
2011-02-17 886
37 마퀴태그의 기본
[레벨:30]id: 팔공산
2010-02-06 2277
36 이미지 바꾸기 소스 1
유료회원감로수
2009-06-06 3898
35 익스6에서만 작동되게하는 css구문
[레벨:30]id: 팔공산
2009-02-19 3562
34 CSS 기초 깨우치기 1
[레벨:30]id: 팔공산
2008-10-12 4488
CSS 사용시 익스플로러 버그 해결하기
[레벨:30]id: 팔공산
2008-07-19 3890
32 CSS : 글꼴과 텍스트(2) - 장식과 자간 및 줄간 1
[레벨:30]id: 팔공산
2008-07-19 4883
31 기본적인 태그 (링크걸기)| 1
[레벨:30]id: 팔공산
2008-07-12 4339
30 가장 기본적인 태그들
[레벨:30]id: 팔공산
2008-07-12 2834
29 자신의 홈에 프린트버튼을 넣자 2
[레벨:30]id: 팔공산
2008-07-12 2711
28 테이블(셀) 깨지지 않는 CSS 1
[레벨:30]id: 팔공산
2008-07-12 3545
27 날짜 매개변수 1
[레벨:30]id: 팔공산
2008-07-12 2761
26 이미지 없이 그라데이션효과 주기
[레벨:30]id: 팔공산
2008-07-12 3495
25 자신의 홈페이지 단어를 더블클릭하면 네이버로 해당단어 검색을 1
[레벨:30]id: 팔공산
2008-07-12 2683
24 뒤로..앞으로..새로고침 버튼 넣기
[레벨:30]id: 팔공산
2008-07-12 3769
23 ( align="absmiddle" ) 이미지와 글자 높낮이가 다를때 관해서 3
[레벨:30]id: 팔공산
2008-04-27 5908
22 붙어야 할 이미지가 붙지 않을때.
[레벨:30]id: 팔공산
2008-04-19 2793
21 사각박스 코너를 이미지없이 둥글게 만드는법
[레벨:30]id: 팔공산
2008-04-08 3260
20 CSS로 바꾸어 쓰는 HTML태그!.. [XHTML약간^^;] 1
[레벨:30]id: 팔공산
2008-04-04 3290
19 네이밍 가이드
[레벨:30]id: 팔공산
2008-04-04 3203
18 논리 태그 사용
[레벨:30]id: 팔공산
2008-04-04 3366
17 POSITION속성과 그 속성값 2
[레벨:30]id: 팔공산
2008-04-04 3714
16 긴 제목 마우스오버시에만 보기
[레벨:30]id: 팔공산
2008-04-04 3208
15 xhtml 기본 작성법
[레벨:30]id: 팔공산
2008-04-04 3160
14 display:block 쪼금 더~
[레벨:30]id: 팔공산
2008-04-04 5781
13 글들의 상하 정렬위치 설정 vertical-align속성
[레벨:30]id: 팔공산
2008-04-04 3733
12 덧글달기 CSS Coding TIP
[레벨:30]id: 팔공산
2008-04-04 2759
11 iframe 대신 사용하는 object 태그 1
[레벨:30]id: 팔공산
2008-04-04 4214
10 TD안엔 DIV를 넣어라? 1
[레벨:30]id: 팔공산
2008-04-04 4036
9 제발...alt텍스트와 title텍스트를 구분해조바바 1
[레벨:30]id: 팔공산
2008-04-04 3670
  • 문하우스는 IE7, 1280*1024 이상의 모니터 해상도에서 최적화 되어 있습니다.무단 E-mail 추출이나, 성인광고를 허용치 않습니다
  • 단축키 : l-목록, w-글쓰기, z-이전글, x-다음글, s-최근글, a-이전목록, d-다음목록, 1-home, 2-data, 3-zbxe, 4-blog, 5-total, 6-QnA