불투명도와 RGBA 투명도

opacity 속성은 하위 요소와 콘텐츠를 포함한 전체 요소의 투명도를 설정합니다. 값의 범위는 0(완전히 투명)부터 1(완전히 불투명)까지입니다.

주의할 점은 opacity가 전체 요소 트리에 영향을 준다는 것입니다. opacity: 0.5인 요소 안의 텍스트, 이미지, 하위 요소는 모두 50% 투명해지며, 하위 요소를 부모 요소보다 더 불투명하게 만들 수는 없습니다.

텍스트나 하위 요소에는 영향을 주지 않고 배경색만 투명하게 만들려면 opacity 대신 rgba()를 사용합니다:

다음과 같이 이해하면 됩니다:

• opacity: 0.5 — 전체 요소와 하위 요소가 투명해집니다
• rgba(r,g,b,0.5) — 색상 값만 투명해지고 하위 요소에는 영향을 주지 않습니다

같은 원칙이 hsla()에도 적용됩니다. 네 번째 인수는 알파 채널(0–1)입니다:

최신 CSS에서는 "a" 변형 없이 rgb()와 hsl()에서 알파 값 앞에 슬래시 구분자를 사용할 수 있습니다:

세 가지 모두 요소를 숨기지만 방식이 다릅니다:

• opacity: 0 — 보이지 않지만 공간을 차지하고 클릭할 수 있습니다
• visibility: hidden — 보이지 않고 공간을 차지하지만 클릭할 수 없습니다
• display: none — 레이아웃에서 완전히 제거됩니다

opacity는 GPU에서 합성되므로 애니메이션을 적용하기에 가장 비용이 적은 CSS 속성 중 하나입니다. 페이드 인/아웃 효과에는 항상 background-color 대신 opacity 전환을 사용해야 합니다.

텍스트는 완전히 읽기 쉽게 유지하면서 요소에 반투명한 배경을 적용하려면 background-color에 rgba()를 사용합니다:

border-color와 box-shadow에 RGBA를 사용하면 은은하고 투명한 효과를 만들 수 있습니다:

투명도가 낮은 텍스트는 가독성을 떨어뜨리고 WCAG 색상 대비 요구 사항을 충족하지 못할 수 있습니다. 텍스트에 투명도를 사용할 때는 항상 대비율을 확인해야 합니다. 일반 텍스트의 최소 대비율 4.5:1을 보장합니다.

opacity는 전체 요소와 하위 요소를 투명하게 만듭니다. 하위 요소에는 영향을 주지 않고 색상만 투명하게 하려면 rgba() 또는 hsla()를 사용합니다. opacity 전환은 GPU 가속을 사용하므로 성능이 좋습니다. 텍스트에 투명도를 사용할 때는 항상 대비율을 확인해야 합니다.