레아이웃 팝업창 투명도 조절 :: 마이구미

이번 글은 레이아웃 팝업창에 대해서 다뤄본다.

팝업창은 누구나 보았거나 개발해봤으리라 생각한다.

팝업창은 크게 2가지로 나눌 수 있다.

1. window.open을 사용해 새창으로 팝업창을 띄우기

2. 새창을 띄우지 않고 레이아웃 형식으로 팝업창 띄우기

이번 글은 레이아웃 형식의 팝업창에 대해 다룰 것이다.

레이아웃 팝업을 사용한다면 거의 투명도 조절을 하리라본다.

위처럼 팝업을 띄우고 팝업 주변은 불투명하게 보여지는 것을 볼 수 있다.

레이아웃 팝업은 이런 식으로 많이 활용하고 있다.

구현에 있어서는 어렵지 않다.

css를 통해 opacity 속성을 통해 투명도를 조절해주면 된다.

#popup { opacity : 0.5; } // 0~1 낮아질수록 투명

예를 들어 html로 레이아웃 팝업을 위해서는 아래와 같이 구현한다고 가정하자.

아래와 같이 대부분 부모 영역 안에 이미지가 존재하게 구현한다.

<div id="popup">
<div>
<img src="image.png" />
</div>
</div>

그리고는 id명이 popup인 div 영역에 opacity를 통해 투명도를 줄 것이다.

그러면 어떻게 될까?

위와 레이아웃 팝업 또한 투명도가 적용되어 불투명하게 보이게 된다.

왜 이런 현상이 나올까?

당연히 팝업은 투명도 속성을 준 div의 영역이기 때문이다.

그렇다면 어떻게 해야 팝업은 투명도에 영향을 받지 않게 될까?

css의 투명도 조절에는 사실 2가지 방법이 있다.

한가지는 설명했듯이 opacity 속성을 활용하는 것이고, 다른 한가지는 rgba속성을 사용하는 것이다.

background-color : rgba(0,0,0, .5); // (R,G,B,투명도)

background의 rgba 속성은 색상과 투명도를 조절할 수 있다.

이말은 즉, 배경에 투명도를 적용하였다는 것이다.

배경에 투명도를 적용하였기에 아무리 팝업이 적용한다하더라도 투명도에 영향을 받지 않게 된다.

필요한 사람이 있다면 샘플 페이지에 레이아웃 팝업창 소스도 있으니 필요하면 확인하길바란다.

샘플 페이지

http://hotehrud.cafe24.com/study/opacity.html

Stackoverflow 관련 질문 && 답변 

http://stackoverflow.com/questions/5770341/i-do-not-want-to-inherit-the-child-opacity-from-the-parent-in-css