CSS - 문제 미리보기
문제 1379
medium
반투명 효과를 주는 두 가지 방법의 차이점은?
```css
/* 방법 A */
.method-a {
background-color: rgb(255, 0, 0);
opacity: 0.5;
}
/* 방법 B */
.method-b {
background-color: rgba(255, 0, 0, 0.5);
}
```
```css
/* 방법 A */
.method-a {
background-color: rgb(255, 0, 0);
opacity: 0.5;
}
/* 방법 B */
.method-b {
background-color: rgba(255, 0, 0, 0.5);
}
```
정답: B
• `opacity`와 `rgba`는 투명도 적용 범위가 완전히 다릅니다
• 방법 A (`opacity` 속성):
• 전체 요소에 투명도 적용
• 배경, 텍스트, 자식 요소 모든 것이 투명해짐
• 요소 전체가 하나의 투명 레이어처럼 작동
• 방법 B (`rgba` 함수):
• 해당 속성에만 투명도 적용
• 배경색만 투명하고 텍스트는 그대로
• 다른 요소들은 영향받지 않음
• 실제 비교 예시:
```css
.text-content {
color: white;
padding: 20px;
}
/* opacity 사용 - 텍스트도 함께 투명해짐 */
.opacity-method {
background-color: red;
opacity: 0.5; /* 텍스트도 50% 투명 */
}
/* rgba 사용 - 텍스트는 그대로, 배경만 투명 */
.rgba-method {
background-color: rgba(255, 0, 0, 0.5); /* 배경만 50% 투명 */
}
```
• 방법 A (`opacity` 속성):
• 전체 요소에 투명도 적용
• 배경, 텍스트, 자식 요소 모든 것이 투명해짐
• 요소 전체가 하나의 투명 레이어처럼 작동
• 방법 B (`rgba` 함수):
• 해당 속성에만 투명도 적용
• 배경색만 투명하고 텍스트는 그대로
• 다른 요소들은 영향받지 않음
• 실제 비교 예시:
```css
.text-content {
color: white;
padding: 20px;
}
/* opacity 사용 - 텍스트도 함께 투명해짐 */
.opacity-method {
background-color: red;
opacity: 0.5; /* 텍스트도 50% 투명 */
}
/* rgba 사용 - 텍스트는 그대로, 배경만 투명 */
.rgba-method {
background-color: rgba(255, 0, 0, 0.5); /* 배경만 50% 투명 */
}
```
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.