background-color:rgba - Div 투명 레이어 CSS (배경만 투명하게) > 웹제작/운영

rgba와 opacity 차이

Div 투명 레이어 CSS (배경만 투명하게)

배경만 투명하게 만드는 방법은 rgba이고, 전체를 다 투명하게 만드는 방법은 opacity다. 이것이 바로 rgba와 opacity 차이다. 

예를 들면, 글자는 선명하게 보이게 할 때 rgba를 사용하고, 글자까지도 배경처럼 보이게 하고 싶다면 opacity를 사용한다고 할 수 있겠다.

background-color:rgba - Div 투명 레이어 CSS (배경만 투명하게)

rgba 예제 코드 소스

이것은 두 가지로 구성된다. 적용이 되어야 할 div와 적용시키는 css다. 

HTML 코드

[code]

<div class="이름">

      <p>여기에 내용을 넣는다.</p>

</div>

[/code]

이것은 적용을 받을 div다. 아주 기본적인 것이다. 단, 중요한 것은 "이름"이라고 적힌 부분이 아래의 "이름" 부분과 같으면 된다는 것이다. 

CSS 코드

[code]

<style>

.이름 {

   background-color:rgba( 숫자, 숫자, 숫자, 짙기 );

}

</style>

[/code]

위의 ( 숫자, 숫자, 숫자, 짙기 )를 ( 255, 0, 0, 0.5 )로 바꿔보면 투명한 빨간색으로 바뀌는 것을 알 수 있다.

투명 레이어 CSS - rgba 사용 방법

rgba는 보통 색상 속성에 사용된다. 즉, 색이 사용되는 것에는 모두 사용 가능하다.

이 글에서는 background-color:rgba를 예시로 한 것은 배경색에 특히 많이 사용하기 때문일 뿐이다. 

그래서 background-color의 속성에 rgba( )를 붙여서 background-color:rgba처럼 사용한다.

rgba에 괄호가 있는 것은, 여기에서 색깔과 짙기를 결정하기 때문이다. 

예를 들어, rgba( 0, 128, 255, 1 )라고 한다면, 0, 128, 255 부분이 파란색을 나타내는 코드이고, 마지막의 1이 짙기를 결정하는 것이라고 보면 된다. 

또 다른 예를 들어, rgba( 255, 255, 0, 0.5 )라고 한다면 255, 255, 0 부분이 노란색을 나타내는 코드이고, 마지막의 0.5는 반만 투명하게 하라는 의미다.

위에서 rgba와 opacity 차이는 배경만 투명이냐, 전체가 투명이냐는 것이라고 했는데, 이처럼 0.5라고 하면 글자나 그림은 그대로 있고 배경 부분만 반 정도 투명해 진다. 

당연하게도 ( 숫자, 숫자, 숫자, 0 )라고 하면 완전히 투명하게 된다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)

그런데 숫자 부분이 어렵다면? 그럴 때는 "CSS 색상 코드", "rgba 변환", 또는 "색상 코드 변환"라고 검색하면 매우 많은 사이트에서 쉽게 알 수 있다. 

(만약, 모든 것을 투명하게 하는 방법인 opacity 사용 방법이 필요하다면 아래 링크 이용)

링크 : http://www.kiss7.kr/siteblog/34