[CSS] 투명도 조절하는 법( 불투명도, 알파 채널 )

RGBA와 Hex를 통한 투명도 설정

RGBA

RGBA 색상 값은 RGB 색상 값^[1]에 알파 채널을 추가 하여 투명도를 나타내는 확장된 색상 표현 방식이다. 알파 채널이란 색상의 투명도를 나타내는 채널이다.

특징

• 형식: rgba(red, green, blue, alpha)
• alpha 매개변수는 0.0(완전 투명) ~ 1.0(완전 불투명) 사이의 숫자이다.
• 알파 채널은 상속되지 않는다: rgba로 지정한 투명도는 해당 요소에만 영향을 준다.

예제

div {
    background-color: rgba(255, 0, 0, 0.5); /* 빨간색, 50% 투명도 */
}

Hex

16진법^[2]으로 색상을 표현하는 방법도 이전에 정리했었다. 이전 포스팅에서는 (R, G, B)마다 두 자리의 16진수로 표현하는 방법만 정리했었는데, 사실 Hex코드를 8자리로 사용할 수 있다! 뒤에 두 자리 16진수로 alpha channel을 적용할 수 있다.참고로, 알파 채널이 FF인 경우에는 생략할 수 있다. 우리는 이전에 불투명도가 100%인 색상값을 배운거다.

특징

• 형식: #RRGGBBAA
  • AA: 알파 채널의 투명도를 16진수 값으로 나타낸다. (00: 완전 투명, FF: 완전 불투명)

예제

div {
    background-color: #FF573380; /* 투명도 50% */
    background-color: #FF5733;   /* 불투명도 100% - 알파 값 생략 */
}

---

CSS 속성을 통한 투명도 설정

불투명도(Opacity)

• CSS opacity속성은 요소의 전체 투명도를 설정한다.

특징

• opacity 속성값은 0.0(완전 투명) ~ 1.0(완전 불투명) 사이의 숫자이다.
• 상속: opacity 속성은 투명도를 지정했을 때 모든 자식 요소에 opacity값이 상속된다.

예제

div {
    opacity: 0.5; /* 전체 요소와 자식 요소 모두 50% 투명해진다. */
}

---

알파 채널과 불투명도의 차이 정리

특성	알파 채널 (RGBA, Hex)	Opacity 속성
적용 범위	해당 요소에만 적용	해당 요소 및 모든 자식 요소에 적용됨
상속 여부	상속되지 않음	자식 요소로 상속됨
속성 활용	배경색, 테두리, 그림자 등에 투명도 추가 가능	전체 요소의 투명도 조절
유연성	개별 스타일 조정 가능	일괄 적용 - 개별 요소 투명도 조정 어려움

참고 자료

tcp school