[CSS] 투명도 설정 (feat. opacity, rgba)

[CSS] 투명도 설정

 

CSS는 요소의 투명도를 조절할 수 있는 여러 방법들이 존재한다.

 

 

1. opacity

 

See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen.

 

0과 1 사이의 값을 허용한다.

'opacity'는 '불투명'을 의미하기에 값이 낮을수록 투명하고 높을수록 불투명하다.

요소 전체 투명도에 영향을 준다. 

 

 

2. rgba

 

See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen.

 

기존 'rgb'의 형태에 투명도를 추가한 것으로 4개의 값 중 마지막 값이 투명도를 나타낸다.

'opacity'와 동일하게 0과 1 사이의 값을 허용하고 값이 높을수록 불투명하다.

요소 전체에 영향을 주는 'opacity'와 다르게 원하는 속성에 따로 투명도를 부여할 수 있다.

 

 

3. 16진수 색상 코드 (hex color code)

 

See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen.

 

16진수 색상 코드의 뒤에 두 자리를 추가하여 투명도를 나타낼 수 있다.

'rgba'와 기본적인 구조가 동일하고 형태만 16진수로 나타난 것인데 'rgba'는 투명도의 소수점 이하 숫자 표현이 가능하기 때문에 더 세밀하게 설정할 수 있다.