본문 바로가기
HTML+CSS

비슷한 듯 다른 동작 방식, Alpha Channel과 Opacity의 차이점

by 즐코딩 2023. 4. 6.
반응형

비슷한 듯 다른 동작 방식, Alpha Channel과 Opacity의 차이점Opacity + Alpha Channel

 

 

Opacity(불투명도)와 Alpha Channel은 둘 다 투명도와 관련이있지만, 서로 다른 형태로 구별이 되는 특성들입니다. 비슷하지만 다른 이 두 가지 특성에 대해서 오늘 포스팅에서 다루어보기로 합니다.

 

 

 

Alpha Channel

 

알파채널(Alpha Channel)은 삼원색으로 일컬어지는 RGB 컬러 정보 이외로 '편집'과 관련된 정보를 담고 있는 채널을 의미합니다. 예를 들어 rgb(0, 0, 255)는 Blue Color를 의미하는데, raba(0, 0, 255, 0.5)는 50% 정도로 투명한 Blue Color를 의미하게 됩니다.

 

알파채널은 색상이 비치는 정도, 즉 '투명도'를 결정하는 정보를 담고 있습니다. 따라서, RGB 컬러 채널은 0~255까지의 수치를 담고 있지만, 알파채널은 0~1 사이의 값으로 투명도가 결정이 됩니다. 0은 완전히 투명하고 1은 완전히 불투명한 것을 의미합니다.

 

 

예제코드

 

아래와 같은 예제 코드를 작성하고 브라우저에서 실행시켜보도록 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Opacity</title>
    <style>
        section {
            width: 600px;
            height: 300px;
            background-color: dodgerblue;
        }
        #rgba {
            width: 50%;
            height: 50%;
            background-color: white;
        }
    </style>
</head>
<body>
    <section>
        <div id="rgba"></div>
    </section>
</body>
</html>

 

section 안에 div가 50% 크기로 위치하게 되고, div의 백그라운드 색상에 의해 흰색 부분이 겹쳐 보이게 됩니다.

이제 div의 배경색상 값을 '컬러 이름'이 아니라 rgba 표시 형태로 변경하면서 Alpha Channel에 대해 알아보기로 합니다.

 

 

 

rgba(red, green, blue, alpha-channel)

 

CSS를 조금 수정해보았습니다. 

background-color: rgba(255, 255, 255);

 

이 코드는 background-color: white;로 적용한 것과 동일한 결과를 보여줍니다.

알파채널을 적용하기 위해서 CSS를 다음과 같이 수정해봅니다.

      #rgba {
            width: 50%;
            height: 50%;
            /* background-color: white; */
            background-color: rgba(255, 255, 255, 0.5);
        }

 

div 배경색상으로 white가 적용되었지만, alpha channel 값이 0.5 즉 50%로 반투명해졌기 때문에, 뒤로 보이는 section의 푸른색 컬러가 비쳐보이게 됩니다.

 

여기서 중요한 점 하나는 Alpha Channel은 엘리먼트들의 다른 요소에는 영향을 주지 않고, <배경에만 영향을 준다>라는 것입니다.

 

 

Alpha Channel은 Background 요소에만 영향을 준다!

 

이 점을 확인해보기 위해 div 엘리먼트에 lorem + [Tab]키를 눌러서, 더미 데이터를 넣어보도록 하겠습니다.

    <section>
        <div id="rgba">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt placeat dolorum recusandae reiciendis nesciunt ea, eligendi, officiis consequuntur nulla sequi dignissimos, vitae pariatur explicabo delectus quod nemo libero quam illum.</div>
    </section>

 

div에는 알파채널로 인해 투명도가 만들어졌지마, 담고 있는 text에는 전혀 영향을 미치지 않고 있음을 알 수 있습니다. 텍스트의 디폴트 생상은 black임을 알 수 있으며, 투명한 정도가 전혀 적용되지 않고 있음을 알 수 있습니다.

 

다시 한번 더 강조하지만, Alpha Channel은 Background 요소에만 영향을 미치고 있다는 것입니다.

 

 

 

Opacity 속성

 

Opacity 속성은 RGBA와 같은 색상 또는 채널 중 하나가 아니라, 특정 엘리먼트에 적용해서 해당 컨텐츠 또는 포함된 자손까지 모두 포함하여 투명도를 결정하는 특성을 가집니다.

 

예제 코드 전체를 아래와 같이 변경해서 살펴보기로 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Opacity</title>
    <style>
        section {
            width: 600px;
            height: 300px;
            background-color: dodgerblue;
        }
        #rgba {
            width: 50%;
            height: 50%;
            /* background-color: white; */
            background-color: rgba(255, 255, 255, 0.5);
        }
        #opacity {
            width: 50%;
            height: 50%;
            background-color: darkslategray;
        }
    </style>
</head>
<body>
    <section>
        <div id="rgba">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt placeat dolorum recusandae reiciendis nesciunt ea, eligendi, officiis consequuntur nulla sequi dignissimos, vitae pariatur explicabo delectus quod nemo libero quam illum.</div>
    </section>
    <section>
        <div id="opacity">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt placeat dolorum recusandae
            reiciendis nesciunt ea, eligendi, officiis consequuntur nulla sequi dignissimos, vitae pariatur explicabo
            delectus quod nemo libero quam illum.</div>
    </section>
</body>
</html>

 

section 코드를 복사하고 아래쪽 div 박스의 배경색은 darkslategray라는 컬러값을 적용해보았습니다.

이 박스에 opacity를 적용해보도록 합니다.

       #opacity {
            width: 50%;
            height: 50%;
            background-color: darkslategray;
            opacity: 0.5;
        }

 

 

text 글자를 포함해서 엘리먼트 요소 전체가 50% 정도 반투명해진 것을 확인할 수 있습니다.

물론 텍스트 뿐만이 아니라, button 등의 요소를 포함하고 있는 경우에도 opacity는 영향을 미치지만, alpha channel은 영향을 미치지 않습니다. 이러한 차이점을 잘 확인하고 인지하고 있으면 도움이 될 것입니다.

 

 

 

참고사항 - hex 코드에도 알파채널을 적용할 수 있다는 사실

 

웹문서에서 색상을 표현하는 방식에는 잘 아시다시피 RGB 형태 외 Hex 코드 방식도 있습니다. 말 그대로 16진수로 표현이 되는 컬러값이죠. 예를 들자면 다음과 같습니다.

#000000 : Black
#ff0000 : Red
#00ff00 : Green
#0000ff : Blue
#ffffff : White

 

이렇게 Hex 코드를 사용할 때에도 가장 뒤에 16진수로 alpha channel을 적용할 수 있습니다.

첫번째 section의 CSS를 변경해보도록 합니다.

       #rgba {
            width: 50%;
            height: 50%;
            /* background-color: white; */
            /* background-color: rgba(255, 255, 255, 0.5); */
            background-color: #ff0000;
        }

 

빨간색 배경으로 적용되었습니다. 알파채널을 적용하지 않았기 때문에 불투명도는 100% 겠죠?

알파채널 값을 대충 55정도로 적용해봅시다.

background-color: #ff000055;

 

text를 제외하고 배경요소에 불투명도가 16진수에서의 55 만큼 적용된 것을 확인할 수 있습니다.

 

 

 

마치며

 

비슷한 듯 다른 듯 동작하는 알파채널과 opacity 속성에 대해서 정리해보는 시간을 가졌습니다. 유사한 기능이 두 개나 마련되어 있다면, 그 사용 목적이 분명히 서로 다르기 때문일 것입니다.

 

백그라운드 속성에만 영향을 미치는 Alpha Channel의 동작방식과, 해당 엘리먼트 및 자손 엘리먼트들에까지도 상속되어 영향을 미치는 Opacity의 특성을 잘 구분하여 활용하시면, 보다 다채로운 방식으로 작업이 가능할 것이라 보여집니다.

 

한편, Hex 코드를 통해서도 알파채널 값을 적용해서 사용할 수도 있겠지만, 눈으로 바로 보고 이해하기에는 RGBA 코드 형태가 훨씬 더 사용하기에 직관적일 것 같습니다. 그래서 저는 RGBA 형태를 더 선호하는 편입니다.

 

오늘도 즐거운 코딩생활, 즐코딩.

KINcoding.

반응형
저작자표시 비영리 변경금지

'HTML+CSS' 카테고리의 다른 글

background 다채로운 기능 한 눈에 살펴보기  (0) 2023.04.05
Hover 버튼을 폼 나게 만들기 (transition + transform 적용)  (0) 2023.04.03
Transform - rotate(), scale(), translate(), skew()  (0) 2023.03.29
Interactive의 시작, transition 속성 2/2 - timing function  (0) 2023.03.24
Interactive의 시작, transition 속성 1/2 - duration, delay  (0) 2023.03.23

관련글

댓글

티스토리툴바