관리 메뉴

키스세븐

DIV의 투명도 효과 조절 - opacity (브라우저 버전에 따른 CSS적용) 본문

홈피와 블로그

DIV의 투명도 효과 조절 - opacity (브라우저 버전에 따른 CSS적용)

키스 키스세븐 2015. 1. 19. 00:43
공유하기 링크
필요하면 공유하세요 ^^
이 블로그를 북마크 하세요! 좋은 정보가 계속 이어집니다.
[DIV의 투명도 효과 조절 - opacity (브라우저 버전에 따른 CSS적용)] 




인터넷 사이트를 다니다 보면 글자가 반투명이라 글자 뒤의 사진이 글자에 비치는 효과를 낸 것을 볼 수가 있습니다. 이건 어떻게 하는 것일까요? 
사진에 바로 포토샵으로 글자를 쓴 것이라면 레이어의 투명도를 조절해서 넣은 것이겠지만, 회원이 올린 사진에 자동으로 글자 반투명 효과가 적용되는 것은 어떻게 하는 것일까요? 



아래 내용은 세가지 문제점에 대한 설명입니다. 
첫째, DIV를 투명하게 또는 반투명하게 할 수 있는가? 
둘째, DIV 내부의 DIV까지 투명 지정에 영향을 받는 것을 어떻게 해결할 것인가? 
세째, 브라우저마다 지원을 하는 것도 안하는 것도 있는데 어떻게 해결할 것인가?  

 


DIV의 투명도 조절에 대한 기본 

opacity와 rgba는 객체의 불투명도를 조절할 수 있는 속성입니다. Div나 Img 등 객체에 이 속성을 넣으면 객체가 반투명이 되어 그 뒷면이 비쳐서 보이게 할 수 있습니다. 
opacity와 rgba 둘 다 아래와 같이 스타일을 정해주면 DIV가 투명도를 지닙니다. 
기본적으로 아래와 같이 코드를 작성하면 투명도를 줄 수가 있습니다. 
(물론 이 둘의 사용 방법에 대해서는 아래에 다시 자세히 설명을 덧 붙이겠습니다.) 

opacity의 경우 
 <div style="background:색상코드; filter:alpha(opacity:''투명도 숫자'');"> 내용 </div>
opacity의 예제 : <div style="background : #000000; filter: alpha(opacity:''60'');"> 내용 </div>

rgba의 경우 
 <div style="background:색상코드; background : rgba(네자리의 투명도 숫자);"> 내용 </div>
rgba의 예제 : <div style="background: #000000; background : rgba(0, 0, 0, 0.6);"> 내용 </div>
    • background : #000000;  style을 적용하는 div의 배경색상을 검정색으로 합니다. 
    • filter: alpha(opacity:''60'');  알파 필터를 사용하여 투명도를 원래 진하기의 60%로 합니다. 
    • background : rgba(0, 0, 0, 0.6);  rgba에서 정한 색을 60%의 투명도로 표시합니다. 

※ 투명도는 %가 결정되므로 이하의 모든 글은 60%를 기준으로 작성할 것이니 투명도 숫자는 필요에 따라 변경하세요. 
※ #000000나 0, 0, 0나, 아래에 나오는 #99000000등은 색상에 관한 것이므로 여기서는 설명을 하지 않습니다. 어떤 것들이 있는지는 검색을 해 보면 많은 설명을 볼 수 있을 것입니다



 

 

opacity와 rgba의 차이 

그런데 왜 opacity와 rgba라는 두 개의 속성을 제공하는 것일까요? 뭔가 차이가 있지 않을까요? 

투명도를 적용하다보면 어떤 문제 때문인지 알게 됩니다. 
바로 div 안에 div를 넣었을 때, 내부의 div가 감싸고 있는 div의 영향을 받게 할 것이냐 아니냐는 상황에 따른 필요성이 생긴다는 것입니다. 
설명하자면 A상자 안에 B상자를 넣었는데, A의 투명도가 변할 때 그 안의 B도 같이 변하게 할 것인지, A와 관계없이 B가 항상 일정한 투명도를 갖게 할지인지를 지정할 때 opacity와 rgba가 필요하다는 것입니다. 

그래서 아래와 같이 정의해 봅니다
○ opacity - 외부 div에 투명도를 지정하면 그 내부의 모든 것들이 같이 투명도의 적용을 받음. 전체적인 통일성을 유지할 때 사용하면 편리. 
○ rgba - 각각의 div가 각각 투명도를 가짐. 즉 외부 div의 투명도에 내부 요소들이 영향을 받지 않음. 반투명 배경을 깔고 그 위에 불투명 div를 올릴 때 편리
그러므로 필요에 따라 위 두가지 중에서 방법을 선택하면 되는 것입니다. 

 

 

opacity의 사용방법 

일반적으로 style type을 선언하고 사용할 때는 다음과 같이 합니다. 
<style type="text/css">
     #name { opacity : 0.6; }
</style> 

<div id="name">
     <div> 내용 </div>
</div>

보통 <style type>부분은 상단의 HEAD부분에 넣거나 CSS파일에 저장해서 부릅니다. 
감싸는 div에 id를 적용하면 style type에서 그 id와 일치하는 #부분을 불러와서 적용하는데, opacity를 사용하면 내부에 있는 div에 다른 스타일을 적용해도 같이 적용되어 버립니다
 

● opacity : 0.6 이 바로 투명도를 조절하지만 버전에 따라 다릅니다. 
그런데 문제는 MS의 익스플로러는 IE5 부터 IE6, IE7, IE8까지는 이 속성이 지원되지 않는다는 것입니다. 
즉, 오래된 컴퓨터로 사이트에 접속하면 엉뚱한 디자인을 보게 된다는 것이죠. 
그래서 아래 버전에서 알아들을 수 있도록 opacity : 0.6;에 filter: alpha(opacity=60)도 함께 적용해야 합니다.  

● 또 문제가 있습니다. 파이어폭스나 크롬 같은 다른 브라우저에도 알아볼 수 있도록 해야 합니다. 
그래서 -moz-opacity:0.6 와 -khtml-opacity: 0.6도 같이 적용해야 합니다. 

 

 

브라우저의 버전 및 종류까지 감안한 opacity의 사용 

위의 모든 문제사항을 해결하기 위해 모두 적용하면 style type부분은 아래와 같이 변할 것입니다. 
위의 모든 설명은 결국 아래의 것이 되겠습니다
<style type="text/css"> 
     #name {
                 opacity : 0.6;
                 filter: alpha(opacity=60);
                 -moz-opacity:0.6;
                 -khtml-opacity: 0.6;
                }
</style>

 
이런 과정을 살펴보고 코드를 연구하는 것은, 어떤 브라우저에서는 반투명 효과가 적용이 되고 어떤 브라우저에서는 적용이 되지 않는 문제가 존재하기 때문입니다. 

[저작권법 표시] 이 글의 원본: 키스세븐(www.kiss7.kr)


그리고, 투명효과를 준 객체 안의 객체 따로 투명효과를 줄 때에도 어떻게 조심하고 어떻게 접근해야 하는지도 코드를 통해 알아 보았습니다. 

★ 이 정보가 도움이 된다면 아래의 공감을 부탁드립니다! ^^
(로그인 필요없음)



키스세븐지식은 키스세븐과 그룹 사이트입니다.

아래로 더 내려 가 보세요!

혹시 읽을만한 것이 또 있을지도 모르잖아요? ^^

이 블로그를 북마크 하세요! 좋은 정보가 계속 이어집니다.
http://kiss7.tistory.com

2 Comments
댓글쓰기 폼