티스토리 뷰

xhtml/css

ie 버전별 조건부 주석 간단한 작성 방법

sosohot 2015. 7. 8. 16:02

<일반적인 방법>

<head>
    ............
    <link rel="stylesheet" href="./style.css" type="text/css" />
    <!--[if lt IE 7 ]><link rel="stylesheet" href="./images/ie6.css" type="text/css" /><![endif]--> 
    <!--[if lt IE 8 ]><link rel="stylesheet" href="./images/ie7.css" type="text/css" /><![endif]--> 
    <!--[if gte IE 8 ]><link rel="stylesheet" href="./images/ie8.css" type="text/css" /><![endif]-->
</head>

(단점)

- ie 버전별로 css파일을 별로도 관리해야 함.

 

<html주석 방법>

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js ie6"> <![endif]-->
<!--[if IE 7]>         <html class="no-js ie7"> <![endif]-->
<!--[if IE 8]>         <html class="no-js ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="ko-KR" class="no-js"> <!--<![endif]-->
<head>
    ......
</head>



(잠점)


- 버전별로 css파일 만들필요 없음.


- class를 넣어서 사용함.


- 좀더 빠르고 가코드가 간편함.


예시)
/* 기존의 스타일 */
body { background: #333; }

/* IE 6 스타일 */
.ie6 body { background: #444; }

/* IE 7 스타일 */
.ie7 body { background: #555; }

/* IE 8 스타일 */
.ie8 body { background: #666; }



 


<조건주석문 주석 뜻>


gt = greater than -> 보다 큰 :: 예제 :: if gt IE 6 -> 6보다 큰 즉 7,8 버젼 이상을 말합니다. 6버젼 포함 안됨. 
gte = greater than or equal to -> 같거나 큰 :: 예제 :: if gte IE 6 -> 6과 같거나 큰. 즉 6을 포함한 7,8 이상의 버젼을 말합니다.
lt = less than -> 보다 작은 :: 예제 :: if lt IE 6 -> 6보다 작은. 즉 6을 포함하지 않은 작은버젼인 5이하를 말하는겁니다.
lte = less than or equal to -> 같거나 작은 :: 예제 :: if lte IE 6 -> 6과 같거나 작은 버젼. 즉 6을 포함하여 5이하를 말하는 겁니다.


 


<참고>


- ie10 부터 조건문 주석 지원 안함..


- 개발자 도구에서 하위 버전 에뮬레이터로 확인시 조건문 주석 동작 안함..

            



                    

  



  



  



  




                    


  
'xhtml/css' 카테고리의 다른 글

  

    

      display:inline-block 여백 해결방법  (0)
      2016.03.22
    

    

      opacity 크로스 브라우징  (0)
      2015.10.07
    

    

      마진병합 팁  (0)
      2015.07.08
    

    

      초기화 css  (0)
      2015.06.26
    

    

      HTML 기본 마크업  (0)
      2015.06.26
    

  






				

				

					
				



				



					댓글