CSS3 Colors(RGBA) 컬러와투명도

CSS3 Colors 컬러와투명도 (color and opacity)

CSS3는 색상 영문이름(white), 16진수(#FF0000), RGB색상(255,255,255)을 지원합니다. CSS3를 지원하지 않는 브라우저는 당연히 사용하지 못합니다. 크롬 4.0버전이상 익스플로어 9.0이하는 아무리 해당 CSS를 입력한다고 한들 CSS자체를 인식하지 못하기때문에 아쉽지만 브라우저 업데이트하는 방법밖에는 없습니다. 구형 익스8같은경우는 해킹요소나 지원하지 않는 속성들이 많아 사용하지 않는 추세입니다. 그래도 접속통계같은걸 보면 아직도 있긴합니다.

저는 보통 디자인을 할때 16진수로 외워서 사용하곤 합니다. 기본적인 컬러값들을 인식하고 나면 어느정도 값만 변경해주면 되기때문인데요. rgb도 그렇게 어렵지는 않습니다. 길게쓰기 귀찮아서 전 16진수를 사용하지만 백그라운드에 투명도가 들어갈때는 rgba css를 적용합니다.

RGBA 색상이란?

빨강,초록,파랑,알파(RED,GREEN,BLUE,ALPHA) 색상의 3요소와 투명도의 합침입니다. 각 색상환은 0부터 255까지이며 알파값은 0.0부터 1.0까지 사이의 숫자입니다.

background-color: rgba(232, 22, 86, 0.3)

background-color: rgba(232, 22, 86, 0.6)

background-color: rgba(232, 22, 86, 0.9)

.p1 {background-color: rgba(232, 22, 86, 0.3);}

.p2 {background-color: rgba(232, 22, 86, 0.6);}

.p3 {background-color: rgba(232, 22, 86, 0.9);}

위와같이 알파값이 들어가면 색상이 투명해지는것을 볼 수 있습니다.

주의해야할점은 RGB색상값의 순서에 맞춰 R, G, B, 쉼표로 마무리해주며 투명도 또한 0.0~1.0으로 정확하게 표기해줘야하는점입니다. 조금이라도 틀리게되면 전혀 다른색상이 나오기때문에 주의깊게 입력후 살펴봐야합니다.

이와같은 RGBA값은 보통 홈페이지 위에 떠있는 레이어 메뉴들에 사용되거나 알파값이 필요한 배경에 사용됩니다.

이미지를 사용하는데 투명도만 쓰고싶다면 opacity:0.0~1.0; css를 해당 속성에 적어 넣으면 됩니다. 물론 이 속성도 구형 브라우저에는 지원하지 않으니 참고 해주시구요.

또한 투명도는 필요없다고 하시면 RGB만 적고 255,255,255 만 적어주셔도 됩니다.

생각보다 웹페이지를 코딩하다보면 투명도를 사용하는일이 많습니다. 적절히 잘 사용하면 CSS만으로도 충분히 멋진 웹사이트를 제작할 수 있습니다.