CSS RGBA 투명도 조절 가능한 색상 표현

1. rgba란?

rgba는 Red, Green, Blue, Alpha의 약자로, 색상을 빨강, 초록, 파랑의 세 가지 기본 색상과 알파(투명도) 값으로 표현하는 방법입니다. 각 색상 값은 0에서 255 사이의 숫자로 표현되며, 알파 값은 0에서 1 사이의 숫자로 표현됩니다.

• Red: 빨강 색상 값 (0 ~ 255)
• Green: 초록 색상 값 (0 ~ 255)
• Blue: 파랑 색상 값 (0 ~ 255)
• Alpha: 투명도 값 (0.0 ~ 1.0)

2. 기본 사용법

rgba 색상은 rgba() 함수를 사용하여 표현합니다. 예를 들어, 빨강색의 반투명 색상은 rgba(255, 0, 0, 0.5)로 나타낼 수 있습니다.

.red-semi-transparent {
  background-color: rgba(255, 0, 0, 0.5); /* 빨강색 반투명 */
}

다양한 rgba 색상을 사용하여 배경색을 넣는 코드입니다.

.red-box {
  background-color: rgba(255, 0, 0, 1); /* 불투명 빨강색 */
}

.green-box {
  background-color: rgba(0, 255, 0, 0.5); /* 반투명 초록색 */
}

.blue-box {
  background-color: rgba(0, 0, 255, 0.2); /* 매우 투명한 파랑색 */
}

<div class="flex-container">
  <div class="red-box">Red Box</div>
  <div class="green-box">Green Box</div>
  <div class="blue-box">Blue Box</div>
</div>

See the Pen Untitled by taehong.kim (@taehongdev) on CodePen.

3. 투명도 Alpha

rgba의 알파 값은 요소의 투명도를 조절합니다. 알파 값이 0에 가까울수록 더 투명해지고, 1에 가까울수록 더 불투명해집니다.

.transparent-box {
  background-color: rgba(0, 0, 0, 0); /* 완전히 투명 */
}

.semi-transparent-box {
  background-color: rgba(0, 0, 0, 0.5); /* 반투명 */
}

.opaque-box {
  background-color: rgba(0, 0, 0, 1); /* 완전히 불투명 */
}

<div class="flex-container">
  <div class="transparent-box">Transparent</div>
  <div class="semi-transparent-box">Semi</div>
  <div class="opaque-box">Opaque</div>
</div>

See the Pen Untitled by taehong.kim (@taehongdev) on CodePen.

4. 텍스트 rgba

rgba는 배경색뿐만 아니라 텍스트 색상에도 사용할 수 있습니다.

.transparent-text {
  color: rgba(255, 255, 255, 0.7); /* 흰색 반투명 텍스트 */
  background-color: black;
}

.opaque-text {
  color: rgba(0, 0, 0, 0.7); /* 검정색 반투명 텍스트 */
}

<p class="transparent-text">이건 흰색 반투명 글씨입니다.</p>
<p class="opaque-text">이건 검정색 반투명 글씨입니다.</p>

See the Pen Untitled by taehong.kim (@taehongdev) on CodePen.