Webi Blog

웹아이에서 운영되고 있는 블로그입니다.

Web/CSS

배경만 반투명하게 할 때 opacity?? rgba??

웹아이 2021. 6. 12. 18:01


HTML코딩을 하다보면 배경을 반투명 하게 해야 할 경우가 생깁니다.
흔히 많이 사용하시는 방법이 CSS의 opacity를 이용해서 투명도를 설정해주시죠?
Opacity는 해당 객체의 투명도를 설정할 수 있으며 0 부터 1 까지 소수점으로 설정합니다.
예를 들어 투명도를 50% 정도 주고 싶다 한다면 opacity:0.5; 라고 사용하시면 됩니다.

하지만 opacity를 사용해서 할 경우 아주 환장하는 문제가 생깁니다.
바로 자식요소까지 모두 투명도를 설정해버리는 문제가 있습니다.

<style> #opacity_no { background:green; } #opacity_test { background:green; opacity:0.5; } </style> <div id=“background”> <div id=“opacity_no”> <h1>나는 제목</h1> <a href=“logo.png”>로고</a> <img src="http://webi.kr/img/logo.svg"> <p>주저리 주저리 설명해 보아요</p> </div> <div id=“opacity_test”> <h1>나는 제목</h1> <a href=“logo.png”>로고</a> <img src="http://webi.kr/img/logo.svg"> <p>주저리 주저리 설명해 보아요</p> </div> </div>


만약에 위와 같은 코드를 실행 했을 때 결과를 확인해 보면 다음과 같습니다.

그림에서 보시는것과 같이 div#opacity_test 안에 들어있는 텍스트(h1, p), 이미지(a, img) 모두 반투명하게 바뀐것을 확인하실 수 있습니다.

나는 배경만 반투명하게 하고 싶었단 말입니다~~~~~
우리는 이렇게 절규를 합니다. rgba를 알기 전까진 말이죠...

우리가 흔히 HTML에서 사용하는 컬러코드는 #FF3212 과 같이 "#"과 6자리 숫자&문자로 되어있습니다. 이 숫자와 문자는 16진법 시스템입니다. 예를 들면 16진법 "FF"는 십진법에서 숫자 25를 나타냅니다.
#FF3212 각 자리에 표시한 컬러의 강도를 조합하여 컬러를 만들어 주는거에요

그렇다면 RGB 코드는 무엇일까요? 네이버 지식백과를 찾아봤어요!!

[RGB]
RGB는 빛의 3원색인 빨간색, 녹색, 파란색을 말합니다. RGB 방식은 빨간색, 녹색, 파란색을 섞어 영상이나 이미지를 표현하는 방식을 말하지요. 예를 들어, 빨간색(R)과 초록색(G)을 섞으면 황색, 빨간색(R)과 파란색(B)을 섞으면 붉은 보라색, 파란색(B)과 초록색(G)을 섞으면 청록색을 얻을 수 있게 됩니다.[네이버 지식백과] RGB [red, green, blue] (천재학습백과 초등 소프트웨어 용어사전, 천재교육)
네 그렇다고 하네요~~
RGB는 0 ~ 255 까지의 단계로 각 빨강, 노랑, 파랑 색을 조합하여 컬러를 만들어 내는 방식입니다.
CSS에서의 사용방법은 rgb(0,100,123) 처럼 써주면 됩니다.

잠깐!! 근데 우린 지금 RGBA를 써야하는거 아닙니까? A는 오타인가요???
하핫....오타는 아니구요!! RGBA는요~~ RGB + A 라고 보시면 되요~~ (지금 말장난??)

RGBA는 기존 RGB 코드에 alpha의 약자인 A가 합쳐진거라 보시면 됩니다.^^
alpha 역시 css에서 filter로 사용해서 반투명 효과를 줄 수 있는 명령어입니다. 지금은 잘 사용하지 않는것 같아요
사용법은 rgba(0,100,123,0.5) 입니다.
RGB사용하는 방법에서 뒤에 알파값 한가지만 추가해주면 됩니다. 알파값은 0 ~ 1 사이의 값이 사용됩니다.
아까 했던 예제를 rgba로 바꿔서 해볼까요??

<style> #opacity_no { background:green; } #opacity_test { background:green; opacity:0.5; } </style> <div id=“background”> <div id=“opacity_no”> <h1>나는 제목</h1> <a href=“logo.png”>로고</a> <img src="http://webi.kr/img/logo.svg"> <p>주저리 주저리 설명해 보아요</p> </div> <div id=“opacity_test”> <h1>나는 제목</h1> <a href=“logo.png”>로고</a> <img src="http://webi.kr/img/logo.svg"> <p>주저리 주저리 설명해 보아요</p> </div> </div>


CSS의 background값을 기존 HTML색상코드에서 rgba로 변경해 주고
opacity는 제거 하였습니다.
과연 결과는요.....


opacity와 차이가 느껴지시나요??
opacity는 자식요소가 전부 반투명해져서 글씨까지 흐려졌는데 rgba는 딱 배경만 투명도가 적용되었습니다.
저도 예전에 배경만 반투명하게 하려고 하다가 rgba를 몰라서 한참 헤매고 그랬었죠....ㅠ

여러분들은 절대 헤매지 마시고 꽃길만 걸으세요^^
도움 되셨다면 공감!! 댓글!! 한번씩 부탁드릴께요~

반응형