2011. 6. 3. 01:44ㆍIT/Tistory Tips
CSS를 사용해서 특정 요소를 투명하게 할 땐 주로 두 가지 방법을 사용한다. 첫째가 opacity 속성이고 둘째가 rgba다. opacity는 이름 그대로 불투명한 정도를 지정하는 속성이다. 0 ~ 1 사이의 값을 갖는데, 0에 가까울수록 흐려지고 1에 가까울수록 진해진다. rgba는 흔히 사용하는 rgb 색상에 alpha 값을 더한 것으로, alpha 값이 0에 가까울수록 흐려지고 1에 가까울수록 진해진다. 두 가지를 예를 통해 살펴보자.
1. opacity
| background : pink; opacity : .3 |
opacity는 앞에서 이야기한 것처럼 지정한 요소 전체를 투명하게 하는 속성이다. opacity: 0~1처럼 사용하며, 속성값은 0에서 1 사이의 값이다. 세부 투명도를 조정할 땐 소수점을 사용하는데, 만약 70% 정도 투명하게 표현(30%의 진하기로 표현)하고 싶다면, opacity: 0.3처럼 사용한다. CSS 속성의 소수점 표현은 맨 앞의 0을 생략할 수 있으므로 실제 사용할 땐 opacity: .3이라고 사용할 수도 있다.
| background : pink; filter: alpha(opacity:'30') |
그러나 IE8 이하에선 opacity 스타일을 지원하지 않는다. IE에서 opacity를 사용하려면 위 예제처럼 filter: alpha(opacity:'0~100')를 사용해야 한다. CSS 표준엔 맞지 않지만, IE에서 opacity를 사용하려면 어쩔 수 없다. 앞에서처럼 IE에서 70% 투명하게 표현하고 싶다면 filter: alpha(opacity:'30')을 사용한다.
2. rgba
| background : rgba(255, 192, 203, .3) |
rgba는 색상 표현의 한 방식이다. CSS에 색상을 적용할 때 흔히 #rrggbb나 rgb(r, g, b) 형식을 사용한다. rgba는 rgb 형식의 색 표현에 투명도를 표현하는 alpha 값을 추가한 것으로, 마지막에 오는 alpha 값에 의해 투명도가 결정된다. rgba의 a도 opacity와 마찬가지로 0~1 사이의 값을 가진다. 70% 투명하게, 즉, 30%의 진하기로 배경을 표현하려면 색상을 입력하는 부분에 rgba (r, g, b, 0.3) 이라고 입력한다. 역시 소수점 앞의 0은 생략할 수 있다. 실제 스타일을 지정하면 위 예처럼 background: rgba(255, 192, 203, .3)이 된다.
그런데 만약 배경색을 rgba 값으로만 지정했을 때 해당 요소가 IE에서는 어떻게 표시될까? 당연히 배경색이 지정되지 않은 것처럼 표시된다. 이런 현상을 막으려면 background 속성을 중복해서 사용하는 것이 좋다. CSS는 뒤에 지정한 스타일이 앞의 스타일을 덮어쓰므로, background: pink; background: rgba(255, 192, 203, .3) 처럼 이중으로 배경을 지정하면 IE 에선 pink로, 다른 브라우저에선 rgba 색상으로 지정된다. 만약 특정 배경색 위에 rgba 색상을 사용할 계획이라면, IE가 아닌 브라우저에서 표시된 색상 값을 복사해서 첫 번째 배경색으로 지정해도 좋다.
| background: #F8E5E9; background : rgba(255, 192, 203, .3) |
예를 들어 rgba(255, 192, 203, .3)는 흰색 바탕에선 색상 값이 #F8E5E9다. 그럼 배경색을 지정할 때 background: #F8E5E9; background: rgba(255, 192, 203, .3) 라고 중복해서 사용하면 흰색 바탕일 때 IE에서든, IE가 아닌 다른 브라우저에서든 비슷한 색으로 표시된다. 물론 IE 에선 투명하게 표시되진 않는다.
| background:rgba(255,192,203,.3); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#4CFFC0CB, endColorstr=#4Cffc0cb) |
rgba는 IE8 이하에선 전혀 지원하지 않는다. 그러나 배경 색에 rgba 값을 사용한다면 약간의 꼼수로 비슷하게 적용할 수도 있다. IE의 필터 중에서 alpha 값을 사용할 수 있는 것이 바로 그라데이션이다. IE 5.5부터 지원하는 그라데이션 필터는 filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#aarrggbb, endColorstr=#aarrggbb)와 같은 형식으로 사용한다. startColorstr에 그라데이션을 시작할 색을, endColorstr에 그라데이션을 끝낼 색을 입력하는데, 두 위치에 같은 값을 입력하면 일반 배경 색처럼 표시된다. 값을 입력할 때 8자리 값으로 맨 앞 두 자리에 투명도를 입력할 수 있다. 투명도는 00~ff까지 255단계를 16진수로 표현해서 입력한다. 0.1부터 1.0까지 rgba 값과 매치하는 IE 필터의 alpha 값은 다음과 같다.
| rgba alpha 값 | 그라데이션 alpha 값 | rgba alpha 값 | 그라데이션 alpha 값 |
|---|---|---|---|
| 0.0 | 00 | 0.6 | 99 |
| 0.1 | 19 | 0.7 | B2 |
| 0.2 | 33 | 0.8 | CC |
| 0.3 | 4C | 0.9 | E5 |
| 0.4 | 66 | 1.0 | FF |
| 0.5 | 7F |
그런데 그라데이션 필터를 사용하면 IE 에선 배경색이 표시되지만, IE가 아닌 브라우저에선 배경색이 표시되지 않는다. 그래서 IE에서만 표시되지 않는 rgba 배경색과 IE에서만 표시되는 그라데이션 필터를 함께 사용해야 브라우저에 상관없이 투명 효과를 적용할 수 있다.
3. opacity와 rgba의 차이점
opacity와 rgba는 둘 다 투명도를 표현하는 것이지만, 시각적인 표현에 큰 차이가 있다. 1의 예와 2의 예를 잘 살펴보자. 1의 예에선 배경은 투명하지만, 그 내용물은 전혀 투명해지지 않는다. 그러나 2의 예는 배경이 투명해짐과 동시에 글자까지 투명해진다. 내용물까지 포함한 전체 영역을 투명하게 만들려면 opacity를, 배경이나 특정 요소만 투명하게 하려면 rgba로 색상을 적용한다.
| border:1px solid #fff; width:45%; padding:20px; margin:0 auto; background:rgba(0,100,0,.3); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr=#4c006400, endColorstr=#4c006400); text-align:center; color:yellow; font-weight:700; font-size:1.3em | border:1px solid #fff; width:45%; padding:20px; margin:0 auto; background:rgb(0,100,0); opacity:.3; filter:alpha(opacity='30'); text-align:center; color:yellow; font-weight:700; font-size:1.3em; font-family:gulim |
| <rgba, 그라데이션 필터> | <opacity, opacity 필터> |
왼쪽이 IE에 그라데이션 필터를 적용하고 나머지에 rgba 배경색을 사용한 것이다. 오른쪽은 IE에 opacity 필터를 적용하고 나머지에 opacity 속성을 사용한 것이다. 둘 다 글자 색을 노란색으로 설정했지만, 왼쪽은 노란색으로 표시되고 오른쪽은 흐린 노란색으로 표시된다.
IE에 opacity나 gradient 필터를 사용할 때 주의할 점이 있다. 투명 효과가 적용된 요소 안에 글씨가 있을 때 글꼴에 클리어 타입이 적용되지 않는다. IE에서 위 예를 볼 때 왼쪽은 글자가 찌그러져 보이는 반면, 오른쪽은 제대로 보일 것이다. 왼쪽은 vista 이상에서 사용하는 맑은 고딕 글꼴로 클리어 타입이 적용되어야 선명하게 표시된다. 오른쪽은 굴림으로 클리어 타입과 관계없이 선명하게 표시된다. 만약 글자 배경에 투명효과를 적용한다면, IE에는 투명이 아닌 일반 색으로 배경을 지정하거나 클리어 타입이 아닌 글꼴을 사용해야 글자가 제대로 표시된다.