요소 전체의 불투명도와 색상 alpha의 차이를 이해합니다.
opacity는 요소와 모든 자식까지 함께 투명하게 만듭니다. 배경만 투명하게 하려면 rgb(... / alpha)처럼 색상 자체의 alpha를 사용합니다.
이번 예제의 출발점은 opacity: .6;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 두 요소 안의 글자 선명도를 비교하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
비활성처럼 보이게 opacity만 줄이고 실제 버튼 동작을 그대로 두지 마세요.
직접 바꿔보세요두 요소 안의 글자 선명도를 비교하세요.