🌱 기초 프론트엔드
CSS에서 opacity와 rgba의 차이
쉽게 이해하기
창문에 반투명 필름을 붙이면 창문 전체가 흐려지죠. 하지만 유리만 색깔이 있는 컵은 안에 든 물은 선명하게 보여요. opacity는 필름이고, rgba는 색깔 유리예요.
핵심 정리
opacity는 요소 전체를, rgba는 특정 속성만 투명하게 만들어요.
자세히 알아보기
opacity는 요소 전체(배경, 텍스트, 자식 요소 포함)의 투명도를 조절해요. opacity: 0.5; 를 주면 그 안에 있는 모든 것이 반투명해집니다.
rgba는 색상 하나에만 투명도를 적용해요. background: rgba(0, 0, 0, 0.5); 처럼 사용하면 배경만 투명해지고 텍스트는 선명하게 유지돼요.
실무에서 모달 창을 만들 때, 배경은 어둡게 하고 싶지만 안에 있는 텍스트는 선명하게 보이길 원한다면 rgba를 써야 해요. opacity를 쓰면 텍스트까지 흐려지거든요.
또 버튼에 hover 효과를 줄 때, opacity를 쓰면 텍스트까지 희미해지지만 rgba를 배경색에만 쓰면 텍스트는 선명하게 유지할 수 있어요. 상황에 맞게 선택하는 게 중요합니다.