불여우(FireFox)에서 투명효과 사용하기

Cross Browsing 위해 개발중에 찾은 자료이다.
IE에서는 Filter라는 스타일을 통해 투명도를 조절하지만
FF에서는 먹히지 않기에 검색해서 보니 Opacity 속성이 있었다.
이것을 양브라우져간에 공통되게 쓰기 위해서는 약간의 트릭이 필요 하다.

filter:alpha(Opacity:50,style:0);Opacity:.5

원문 : http://nariya.net/blog/entry/불여우에서-투명효과-사용하기

꾸미기를 좋아하시는 분들은 보통 MS Internet Explorer 6(이하 IE)에서 작업을 하시더라구요. 어떠한 이유에서인지 모르겠지만, 아마도 IE가 여러가지 태그 하위 속성에 있는 Style이 Filter라는 비표준(?)적이면서도 '예쁜' 기능을 지원하기 때문이라고 조심스럽게 추측해 봅니다(...)

이번에 제가 들고 온 내용은 IE에서 사용하는 Filter 중에서 Alpha라는 녀석을 Mozila FireFox(이하 불여우)에서도 사용해 보자는 것이랍니다-♬ 사실 Style이라는 태그 하위 속성은 불여우에서도 동일하게 적용되지만, 단지 Filter:xxx의 방식은 사용하지 않기 때문에 IE의 방식대로 하면 의도대로 나타나지 않게 되죠. 그래서 이제부터 그 비밀을 소개하도록 하겠습니다~

위의 헛소리는 모두 무시해 주시고 여기서부터 시작~

먼저.. 아래의 그림 두 개를 봐 주세요.
(출연하신분은 Google Talk의 팽귄씨랍니다)

IE를 위한 투명 효과	불여우를 위한 투명 효과
<img src="xxx" style="filter:alpha(Opacity:50,style:0)">	<img src="xxx " style="Opacity:.5">

IE에서는 왼쪽의 팽귄씨가 투명하게 보이고, 불여우에서는 오른쪽의 팽귄씨가 투명하게 보이지요? 그럼 이제 여기서 고민(...)에 빠지게 되지요. 웹 사이트를 만드는 사람의 입장에서는 모든 사람들에게 동일한 페이지를 보여주길 원할텐데, 이렇게 브라우저마다 다르게 뜨면 난감하잖아요!(...아닌가ㄱ-)

그렇다면 이런 문제점을 해결하기 위해서 잔머리를 굴려봅시다(!)

위의 두 그림에서 보여지는 소스 가운데 공통적인 부분은 Style이라는 하위 속성을 사용해야 한다는 것이지요? 이 부분을 이용해서 비표준(?) 적인 대안을 만들어 봅시다.

모두(?)를 위한 투명 효과

<img src="xxx" style="filter:alpha(Opacity:50,style:0);Opacity:.5">

그.. 그러니까 결국 두가지를 합치는 겁니다!
마치 (a+b)(a+c) = a(b+c) 같은 수학 공식처럼 말이지요ㄱ-
여기서 주의하셔야 할 점은 위에서 푸른 글씨와 붉은 글씨 사이에 볼드 처리 되어 있는 세미콜론(;)을 붙여주셔야 한다는 거에요. 물론 웹 표준이라고는 할 수 없지만, 이런 방법을 블로그 스킨을 만들 때 사용하면 좋겠지요? 이제는 투명한 블로그를 불여우에서도 마음껏 즐기실 수 있습니다♪