연습 — rgba 반투명 배경 박스 완전 정리

 

 

Web Development · CSS Color

연습 문제 풀이 —
rgba 반투명 배경 박스

투명도가 있는 배경색으로 뒤 콘텐츠가 비치는 박스 만들기

시작 연습 문제 해답 코드

"웹 디자인 트렌드를 따라잡는 비법" 본문을 반투명 파란 박스로 감싼 코드. 핵심은 배경에 rgba를 써서 투명도를 추가한 것.

.container { width: 500px; padding: 10px; border: 1px solid blue; background: rgba(0,0,255,0.2); /* 파랑 + 투명도 0.2 */ } h1 { font-size: 17px; } p { font-size: 16px; line-height: 25px; }

실제 출력 미리보기

웹 디자인 트렌드를 따라잡는 비법 대공개!

그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일·태블릿·PC 등 멀티 디바이스에 한 번에 적용할 수 있는 코딩을 이용한 웹 디자인이 필요하다.

패턴 위에서 보면 (반투명 효과 확인)

배경에 줄무늬가 있어도 rgba(0,0,255,0.2)는 투명하므로 줄무늬가 비쳐 보인다.

용어 용어 정리

rgba()RGB + alpha(투명도) 색 표기

알파 값0(완전 투명) ~ 1(완전 불투명)

rgb()투명도 없는 RGB

#hex16진수 표기 — 투명도 없음 (8자리는 alpha 포함)

opacity전체 요소(텍스트 포함) 투명도

vs background opacityrgba는 배경만, opacity는 자식 모두

---

 

1 rgba 문법

rgba(red, green, blue, alpha) ─┬── ─┬── ─┬── ─┬─── │ │ │ └─ 0(투명) ~ 1(불투명) — 소수 │ │ └─ 0 ~ 255 (파랑 강도) │ └─ 0 ~ 255 (초록 강도) └─ 0 ~ 255 (빨강 강도) rgba(0, 0, 255, 0.2) → 파랑, 20% 불투명도 rgba(255, 0, 0, 0.5) → 빨강, 50% 불투명도 rgba(0, 0, 0, 0.7) → 검정, 70% (반투명 오버레이용)

---

반응형

2 rgba vs opacity — 결정적 차이

둘 다 투명도 효과지만 적용 범위가 다르다.

background: rgba(...)

배경만 투명. 안의 텍스트·이미지는 선명함. 모달, 카드 같이 콘텐츠는 또렷해야 할 때.

opacity: 0.2

요소 전체 투명. 텍스트·자식 요소·이미지 다 같이 흐려짐. 페이드 아웃 같은 전체 효과.

※ "박스만 흐릿하고 글자는 또렷하게" 원하면 반드시 rgba 사용. opacity는 그렇게 안 됨.

---

3 8자리 hex로 alpha 표현

최신 CSS는 #RRGGBBAA 8자리 hex로도 투명도를 줄 수 있다.

rgba(0, 0, 255, 0.2) → #0000FF33 ─┬─ ─┬─ ─┬─ ─┬─ R G B A(=33/FF≈0.2) rgba(255, 0, 0, 0.5) → #FF000080 rgba(0, 0, 0, 0.7) → #000000B3

※ 알파 변환 표

• 0.1 → 1A · 0.2 → 33 · 0.3 → 4D · 0.5 → 80 · 0.7 → B3
• 1.0 → FF · 0.0 → 00
• 요즘은 rgba()보다 8자리 hex가 더 간결하다고 보는 사람도 많음

---

4 흔한 활용 패턴

패턴	코드
모달 백드롭 (어두운 오버레이)	background: rgba(0,0,0,0.5)
이미지 위 글자 박스	background: rgba(0,0,0,0.6) + color: white
호버 강조	:hover { background: rgba(0,100,255,0.1) }
라이트 카드 위 더 라이트 카드	background: rgba(255,255,255,0.7)
그라디언트와 함께	linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0))

---

5 자주 하는 실수

실수	증상	해결
opacity로 박스만 흐리게 시도	글자도 흐려짐	background: rgba 사용
알파 값을 0~255로	색이 이상하게 나옴	알파는 0~1 (소수)
rgba를 IE8에 사용	레거시 브라우저에서 안 보임	fallback solid color 추가
너무 낮은 알파 + 흰 배경	거의 안 보임	0.15~0.3 권장

---

핵심 한 줄 요약

rgba(R,G,B,A)RGB 색 + 0~1 투명도

vs opacityrgba는 배경만 / opacity는 요소 전체

8자리 hex#RRGGBBAA로도 같은 효과

활용모달 백드롭, 이미지 위 글자, 호버 강조

알파 범위0(투명) ~ 1(불투명) — 0~255 아님

Tags

#rgba #반투명 #알파채널 #배경색 #opacity #8자리hex #모달백드롭 #호버효과 #background #RGB #CSS #HTML #박스모델 #색상 #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

rgba, 반투명, 알파채널, 배경색, opacity, 8자리hex, 모달백드롭, 호버효과, background, RGB, CSS, HTML, 박스모델, 색상, 웹개발, 티스토리