본문으로 바로가기

rgba(Transparent) & opacity

category StyleSheet/CSS 2016. 9. 29. 08:08


OPACITY

CSS3 에는 투명도를 조절하는 두가지 속성이 있습니다.


바로 opacity 와 rgba 속성으로 이 속성들을 적용할 시 약간의 차이점을 보이는데 이에 대해 살펴보겠습니다.





opacity property

이 속성은 요소의 Transparent(투명화) 정도를 조절하는 속성으로 포토샵등의 그래픽툴을 이용해서 투명도를 조절하는 것과 같은 원리입니다.



위의 그림은 opacity 를 이용해서 적용해서 나온 결과물입니다.

텍스트와 이미지를 함께 이용하든 백그라운컬로와 텍스트를 이용하든 그 결과물은 위와 거의 대동소이할 것입니다.


사실, opacity 는 부모요소에 적용시키면 자식 노드에게도 모두 상속되고 자식 노드에서만 opacity 를 해제(제거)할 수 없기 때문에 배경과 텍스트를 분리할 수가 없는 문제에 봉착하게 됩니다. 

이 문제를 해결하는 방법 중에는 우회적으로 텍스트 요쇼를 absolute 이용하여 opcity 가 상속된 요소 밖에 위치시켜 구현할 수도 있겠지만 깔끔한 방법이 아닐 수 있습니다.

이런 문제 때문에 위의 그림에서 보시다시피 가독성면에서 opacity 를 0.8 이하로 낮추지 않으면서 쓰는 경우가 일반적입니다.


위와 같은 문제를 피하기 위해서는 rgba 속성을 이용하면 해결할 수 있습니다.

하지만 이 역시도 단계적인 기능향상을 추구하는 우리나라 현실에서는 아직까지 미흡합니다. 


 opacity / rgba

IE 

Chrome 

FireFox 

Opera 

Safari 

지원 여부 

IE9+ 

지원 

지원 

지원 

지원 


위의 표에서 보다시피 IE 로 인해 크로스브라우징을 해줘야 합니다. 

물론 우아한 기능 저하 철학을 지닌 프로젝트라면 과감히 IE8 이하는 고려하지 않겠지만 현실상 여의치 않습니다.

이 현실을 비난하기 보다 우리는 일단 쪼아대는 클라이언트를 위해 구글신에게 도움을 청해봅니다.


opacity 는 IE 버전의 크로스브라우징을 위해 filter 속성을 사용하여 비슷하게 구현할 수 있습니다.


.transparent8 {
zoom: 1; /* ie 5,6,7 bug fix */
filter: alpha(opacity=80);
opacity: 0.8;
}


filter 값은 0 ~ 100 의 값을 가지며 opacity 는 0~1 사이의 값을 가집니다.

숫자가 높아질수 록 원본에 가까워지고 숫자가 낮아질 수록 투명화가 높아집니다.


위에서 언급했듯이 opacity는 filter를 이용하더라도 자식노드에게 상속되기 때문에 텍스트와 이미지를 분리할 수 없습니다.




RGBA property

rgba 중 rgb 는 색상정보값이고 a 는 alpha 값을 부여한 것입니다.

위의 표에서 보았듯이 IE6~8 은 지원하지 않기 때문에 이 또한 filter 속성중에 gradient를 이용하여 대체방안을 모색합니다.


Usage filter for modern-brower


.rgba {
background: #ffffff;
background: rgba(255, 255, 255, 0.5);
*background: transparent;
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";
/* IE6 & 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
zoom: 1;
}


rgba 속성은 색성정보를 필요로 하는 속성에 직접 그 값을 부여할 수 있기 때문에 분리하여 사용할 수 있습니다.

이 값은 opacity 와 마찬가지로 0~1 사이의 값을 가지며 rgba 를 지원하지 않는 브라우저를 위해 #ffffff 와 같이 배경값을 선언해주도록 합니다.



위의 그림에서 알 수 있듯이 opacity 와 alpha 속성의 차이점은 자식노드에게 영향을 미치느냐 여부입니다.


opcity 는 위에 언급했듯이 자식에게도 영향을 미치게 되어 텍스트와 이미지를 분리하여 사용하는데 에로사항이 있지만 alpha 값은 자식노드에게 영향을 미치지 않기 때문에 텍스트와 이미지,백그라운드컬로등을 분리하여 사용할 수 있습니다.


background: transparent 를 적용한 이유는 미리 다른 배경 색상이 설정되어 있을 경우 filter 메서드와 충돌할 가능성이 있기 때문입니다.

zoom: 1 은 필터를 적용할 요소는 레이아웃을 가져야 하는데 인라인 요소에는 IE 특성상 레이아웃을 가지지 않기 때문에 추가해 줍니다.

가장 중요한 것은 filter 속성의 startColorstr 값과 endColorstr 값인데 기존의 3byte Hex 값이 아니라 4byte Hex 값으로 사용됨에 유념해야 합니다.

그리고 처음 두글자에는 Alpha 값을 지정해주는데 rgba 가 아닌 argb 타입이며 16진수의 값을 적용해줍니다.




Jaehee's WebClub


'StyleSheet > CSS' 카테고리의 다른 글

CSS Animations(애니메이션 사용)  (1) 2016.09.29
Rem 그리고 Em, 언제 써야 할까?!  (1) 2016.09.29
View Port (뷰포트 설정)  (0) 2016.09.29
Skip Navigation 및 Dimmed style guide  (1) 2016.09.29
조건 주석문 처리방식  (0) 2016.09.29