투명하게 만드는 opacity - Div 투명 레이어 CSS (모든 것을 투명하게) > 웹제작/운영

투명하게 만드는 opacity

Div 투명 레이어 CSS

투명하게 만드는 방법은 두 가지가 있다. 

이 글에서는 DIV에 담긴 모든 글자, 배경까지 다 투명하게 만드는 방법을 알아 본다.

투명하게 만드는 opacity - Div 투명 레이어 CSS (모든 것을 투명하게)

투명하게 만드는 CSS 예제 코드 소스

기본적으로 필요한 것은 div이고, 실질적으로 레이어로 투명하게 만드는 속성은 opacity다. 

기본적인 div

[code]

<div class="이름">

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

</div>

[/code]

단지 이것을 투명하게 만들 것이므로 기본 중의 기본이다. 

실질적으로 투명하게 만드는 속성 스타일 CSS

[code]

<style>

.이름 {

   opacity: 소수 숫자;

}

</style>

[/code]

위의 두 군데에 있는 "이름"에는 같은 것을 써 주어야 한다. 

중요한 것은 투명 속성인 opacity의 최솟값은 0이고, 최댓값은 1이라는 것이다. 

그러므로 "소수 숫자"에는 0.1이나 0.5나 0.7 같은 것을 써주면 된다. 

당연히 숫자가 낮을 수록 더 투명하다. 1은 적용하지 않은 것과 같다.

Div를 투명하게 하는 opacity

투명하게 만드는 CSS에는 opacity 방법과 rgba( 색, 색, 색, 짙기 ) 방법이 있다.

opacity와 rgba의 차이점은 어느 정도까지 투명하게 하겠냐는 것이다. 

그러므로 div 안에 들어있는 글자부터 이미지 등등 모든 것을 투명하게 만들고 싶다면 opacity를 쓰면 된다. 

글자까지 다 투명해진다면 불편하지 않을까?

그래서 용도를 먼저 생각하고 무엇으로 투명하게 할 것인지를 결정하는 것이다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)

이미지와 글자까지 다 배경으로 쓰고 싶거나, 메뉴를 띄울 때 다른 부분은 다 투명하게 보여야 한다면 opacity를 쓰는 것이 바른 것이다.

(만약 배경만 투명하게 만드는 방법인 background-color:rgba 사용방법이 필요하다면 아래 링크 이용)

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