CSS에서 투명도를 설정하는 방법에는 세가지가 있다.
1. Opacity 속성
- opacity 값은 0 ~ 1까지 존재하며 0에 가까울수록 투명 , 1에 가까울수록 불투명을 나타냄
2. rgba
- rgba 는 기존 rgb 속성에서 맨 뒤에 투명도 값을 추가해주는 방식
- 0 ~ 1까지 값이 존재하며 0에 가까울수록 투명, 1에 가까울수록 불투명을 나타냄
3. HEX 표현법으로 투명도 주기
- hex 표현식으로 색상을 표현할 때는 가장 맨 뒤에 00~FF 값을 추가해주어 투명도를 조절한다.
- 00에 가까울수록 투명하며, FF에 가까울수록 불투명하다.
rgba와 opacity 차이
rgba에서 투명도를 조절할 때 내부의 컨텐츠는 투명도의 영향을 받지 않는다. 그러나 opacity 로 투명도를 조절하게 되면 내부에 있는 컨텐츠까지 함께 투명도의 영향을 받아 버튼이나, 텍스트가 존재할 경우 함께 투명해지는 것을 볼 수 있다.
