rgba와 opacity

rgba(0, 0, 0, 불투명도)

opacity: 불투명도 (0~1)

 

opacity가 있는데도 rgba를 쓰는 이유

 

색상과 불투명도를 한번에 조작할 수 있다.

자식 요소에 opacity를 지정해주어야 할 경우 상속 문제에서 자유롭다.

 

opacity를 사용할 때의 이점

어떤 요소의 불투명도를 상태값에 따라 유동적으로 바꾼다고 가정해보자.

이 경우 렌더링 과정에서 rgba속성은 페인트 과정이지만, opacity는 페인트 이후의 레이어를 합성하는 과정에 포함되기 때문에 렌더링 최적화에 이점을 가진다.