요소 전체의 불투명도와 색상 alpha의 차이를 이해합니다.
opacity는 요소와 모든 자식까지 함께 투명하게 만듭니다. 배경만 투명하게 하려면 rgb(... / alpha)처럼 색상 자체의 alpha를 사용합니다.
opacity: 0.45가 걸린 대상 요소는 초록 배경과 흰 글자가 한 덩어리로 45%만 보여 글자 대비가 크게 떨어집니다. 두 번째 상자는 class에 target도 있어 같은 opacity를 물려받지만 .second가 opacity: 1로 되돌리고 배경에만 rgb(23 107 69 / 0.45)로 알파를 주었기 때문에, 배경은 옅어도 어두운 글자는 선명하게 남습니다.
opacity: 0으로 완전히 투명하게 만든 요소도 자리를 차지하고 클릭과 포커스를 그대로 받으며 화면 읽기 프로그램에도 읽힙니다. 보이지 않는 버튼이 클릭을 가로채는 일을 막으려면 visibility: hidden이나 display: none과 구분해서 씁니다.
비활성처럼 보이게 opacity만 줄이고 실제 버튼 동작을 그대로 두지 마세요.
직접 바꿔보세요두 요소 안의 글자 선명도를 비교하세요.