opacity 상속의 문제점과 해결책:

opacity 상속의 특성:

• 부모의 opacity는 모든 자식 요소에 강제 적용
• 자식이 개별적으로 opacity를 설정해도 부모의 영향 받음
• 전체 요소가 하나의 단위로 투명도 적용

문제가 되는 상황:

• 텍스트 가독성 저하: 배경만 투명하게 하려고 했는데 텍스트도 투명
• UI 요소 구분 어려움: 버튼이나 링크의 시인성 문제
• 의도하지 않은 디자인: 전체적으로 흐릿한 모습

실제 렌더링 결과:

부모 opacity: 0.3
├── h1 (실제로는 0.3 × 1.0 = 0.3)
└── p (실제로는 0.3 × 1.0 = 0.3)

해결책 1: RGBA 사용:
```css
.container {
/* opacity: 0.3; 대신 */
background-color: rgba(255, 255, 255, 0.3);
}
/* 자식 요소들은 영향받지 않음 */
```
해결책 2: 가상 요소 활용:
```css
.container {
position: relative;
}
.container::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.3);
pointer-events: none;
}
```