CSS Opacity 투명도 설정에 대해서

오브젝트의 투명도를 정의하는 Opacity라는 CSS 옵션이 있습니다. 단어의 뜻 그대로 투명도를 설정하는 옵션입니다. 사용 방법 또한 매우 간단하고 쉽습니다. 아래처럼 사용하면 됩니다.

 

예시

선택자 {
    opacity: 1;
}

 

0부터 1까지 소수점을 사용하면 됩니다. 0은 0%를, 1은 100%를 의미합니다. 즉 0.3을 입력했다면 30%의 투명도를, 0.7을 입력했다면 70%의 투명도를 가집니다. 소수점 두 자리까지도 인식합니다. 만약 0.14라고 입력했다면 14%의 투명도를 적용시키겠다는 뜻으로 이해하시면 됩니다. 즉 백분율 값입니다.

 

다음은 소수점을 사용한 값을 입력하는 경우입니다. 만약 30%의 투명도를 적용시키려면 0.3을 입력해야 하지만 0을 뺀 나머지 부분은 .3만 입력해도 적용됩니다. 즉 0은 생략해도 되는 값입니다.

 

실전 예시

이론은 금방 배웠으니 바로 실전에 사용해 봅시다.

 

See the Pen CSS Opacity by rgy0409 (@rgy0409) on CodePen.

 

세 개의 div가 있고 각 div 안에는 h3 태그가 있으며 텍스트가 들어있습니다. 그리고 opacity라는 클래스명도 보입니다. 클래스 속성에는 30%의 투명도를 가진 opacity가 적용되어 있습니다. 첫번째 div에는 클래스값이 아무것도 없기에 전혀 투명하지 않은 불투명도 100%의 원형 그대로의 스타일이 적용되어 있습니다. 두번째 div에는 h3 태그의 부모 요소인 div에 투명도가 적용되어있으니 30% 투명한 상태가 되었습니다. 세번째 div에는 div의 자식 요소인 h3에 투명도가 적용되어있으니 텍스트 부분만 30% 투명한 상태가 되었습니다.

 

이 세 개의 요소들의 차이점을 유심히 살펴봅시다. 눈치가 빠르신 분들이라면 금방 알아채셨을지도 모르겠습니다. opacity가 적용된 요소 중 만약 자식 요소가 있다면 해당 자식 요소에도 opacity가 영향을 준다는 사실을 알아채셨을 겁니다.

 

난 부모요소에만 투명도를 적용하고 싶을 뿐인데...?

그러면 이런 경우가 생길 수 있겠죠? 위의 예시로 말씀드리자면 부모 요소인 div 박스에만 투명도를 주고 자식 요소인 h3에 마크업된 텍스트는 원래대로 출력되게 만들고 싶은 경우가 있을 겁니다. 이런 경우는 아래의 방법으로 실행 할 수 있습니다.

 

부모 요소의 background를 16진수 핵사코드 색상이 아닌 rgba 값을 사용함

 

이렇게 하면 됩니다. 본문 위에 있는 푸른 div 박스가 그것입니다. 원래는 완전 새파란 div 박스지만 백그라운드 색상이 rgba 값으로 적용되어있기에 30% 투명한 상태가 된 것입니다. RGB는 빛의 3원색인 레드, 그린, 블루이며 마지막 A는 알파값인데 이것이 투명도를 정의합니다. 포토샵을 자주 해보신 분들이라면 이 알파값이 어떤 의미인지 금새 아실 것입니다. 레이어의 마스크 기능과도 관련있는것이 알파값이라는 녀석입니다. 지금은 그냥 알파값이 투명도와 관련있는 정도로만 이해하시면 됩니다. 알파값도 소수점을 사용하며 앞의 0은 생략 가능합니다. 끝.