IE7, IE8 CSS opacity 투명도 적용방법 filter: alpha(opacity:'60');

filter: alpha(opacity:'60'); IE7, IE8 CSS opacity 투명도 적용방법

표준에서 html 객체의 투명도를 CSS로 조절하고자 할 때 표준은 

.showBG { opacity: 0.6; }

와 같이 작성해주는데요.

위와 같은 느낌을 줄 때 종종 사용되는 CSS죠.

하지만 IE8버전 이하에서는 위와 같은 표준 방식의 "opacity:"는 적용되지 않아요.

이럴 때는 filter를 사용합니다.

하지만 이 방식은 어디까지나 비표준방식이기 때문에 웹표준과 웹접근성 프로젝트를 진행중일 때는 해당 CSS는 IE7.css와 IE8.css로 별도로 분리시켜서 조건 분기해서 사용하는 것이 좋습니다.

물론 한 클래스에 다음과 같이 동시에 적용한다고 해서 오동작을 일으키거나, 접근성 심사에서 떨어지지는 않습니다.

.showBG { opacity: 0.6; filter: alpha(opacity:'60'); }

하지만 주로 관공 프로젝트를 진행할 때는 행자부에서 CSS 표준 체크등을 하는 경우에는 지적사항이 나오기도 합니다.

따라서 

<!--[if IE 8]>

<link href="/include/cmm/css/ie8.css?0505" rel="stylesheet" />

<![endif]-->

<!--[if IE 7]>

<link href="/include/cmm/css/ie7.css?0505" rel="stylesheet" />

<![endif]-->

이와 같이 분기를 해준 다음에 각 버전별로 최적화된 CSS를 적용해 주는 것이 바른 방법입니다.

가끔 위 방법도 옳지 않다고 자바스크립트의 userAgent를 읽어서 분기해야한다고 주장하는 분들도 계시지만...

아무튼 filter 알파를 적용하게 되면 다음과 같이 IE8버전에서도 투명도가 적용된 레이어를 만들 수 있습니다.