CSS3 rgba / opacity 의 사용

기존 rgb 로 사용되었던 색상 적용 방법이 CSS3에서 a(alpha, 투명도)가 추가되어서 rgba로 사용 가능하다.

사용법 )

div {

background-color : rgba(0,100,150,0.5);

color : rgba(255,0,0,.6); 

}

비슷한 기능을 하는 opacity 속성을 알아보자.

opacity 속성도 CSS3에서 추가된 속성이다.

사용법 )

div {

width:100px;

height:100px;

opacity:.6;

}

* rgba와 opacity의 차이점

rgba로 알파값을 지정해주면 해당 컬러에만 적용이 된다. (div 내에 텍스트가 있다면, 텍스트는 투명해지지 않고 배경 컬러만 투명해짐)

반면, opacity는 해당 객체 내에 있는 모든 요소들이 함께 투명해진다.

- rgba만 줬을 때

위 그림처럼 빨간색 텍스트는 투명도가 적용되지 않는다.

- opacity를 적용했을 때

위 그림처럼 빨간색 텍스트에도 함께 투명도가 적용된다.