CSS에서 투명도를 설정하는 방법을 알아보자.
opacity 속성 설정
opacity속성은 요소의 불투명도를 설정한다. - MDN
예:
opacity: 0: 완전 투명해짐opacity: 1: 완전 불투명해짐
color 값에서 투명도 사용
opacity를 알아보려고 이 글을 쓴 게 아니다. CSS의 color 값 사용법을 알아보자.
RGB 색상
색상값을 다룰 때 가장 많이 쓰는 것은 RGB 값이다. RGB 값은 16진수 또는 RGB 10진수로 나타낸다.
- 16진수 예: #04AA4F
- RGB 10진수 예: 4, 170, 79
CSS에선 이렇게 표기한다.
- 16진수:
#04AA4F - RGB 10진수:
rgb(4, 170, 79)
투명도 값을 알파라고도 부른다. 1이 불투명이고 0이 투명이다. 10진수에서 알파값을 사용하려면 rgb() 대신 rgba()를 사용하고 맨 뒤에 알파값을 추가하면 된다.
- 60% 불투명도:
rgba(4, 170, 79, 0.6): 배경에 60% 불투명도를 주었다. - 30% 불투명도:
rgba(4, 170, 79, 0.3): 위의 값보다 훨씬 투명하게 보인다. - 완전 투명:
rgba(4, 170, 79, 0)배경이 투명하다.
0.6과 같은 소수점 숫자 대신 퍼센트(%)를 사용할 수도 있다.
- 60% 불투명도:
rgba(4, 170, 79, 60%)
16진수에서 투명도를 쓰기 위해 10진수로 바꿀 필요는 없다. 6자리의 16진수 뒤에 투명도 2자리를 16진수로 적으면 된다. 이 때, FF = 255가 100%이다. 그러므로 FF를 붙이면 불투명이고, 00을 붙이면 완전 투명해진다.
#04AA4F의 60% 투명도는 이렇게 적는다:#04AA4F99- 255*60% = 153 = 99(16)
HSL 색상
HSL 색상은 색상, 채도, 명도를 나타낸다.
- 예: #04AA4F를 HSL로 나타내면
hsl(147, 95%, 34%)
hsla() 함수를 사용할 수 있다.
배경색 hsla(147, 95%, 34%, 0.6)
Sass 스타일 rgba()
CSS 전처리기 Sass에서는 Sass 스타일 rgba()를 사용할 수 있다.
rgba(#04AA4F, 0.6)은rgba(4, 170, 79, 0.6)을 의미한다.
너무 편하므로 CSS 5 쯤에 들어왔으면 좋겠다.
transparent 키워드
transparent 키워드는 완전 투명한 색을 지칭한다.
- 예: 가나다라마바 → 이 글자는 투명해서 보이지 않는다.
마무리
헥스 코드에 AA값을 추가할 수 있다는 걸 알고서 글을 적기 시작했지만, 10진수를 255로 나누고 16진수로 적어야 한다는 불편함도 같이 다가왔다. Sass의 rgba($color, $alpha) 함수가 다시금 부러워졌다. 많이 사용하는 Emotion 등의 CSS 라이브러리에서 지원해주길 바란다.
MDN의 color 자료형을 보면 더 많은 내용이 나와있다.
