CSS 투명하게 만드는 opacity - Div 투명 레이어 CSS (모든 것을 투명하게)
페이지 정보
조회 1,010회 작성일 22-05-13 00:13
본문
투명하게 만드는 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
134회 연결