CSS 기초 공부(3) - 색상을 표현하는 방법(투명도)

앞서 말했듯이 CSS는 HTML을 디자인하는 방법이다. 디자인 하면 무엇이 떠오르는가? 모양, 크기 등 다양한 요소가 있지만 디자인에서 가장 기본이 되는 요소 중 하나는 색상이다.

색이 조금만 바뀌어도 전체적인 분위기 자체가 달라지기 때문에 실제 인테리어에서도 조명색이나 가구의 색상을 어떻게 정할지 엄청나게 고민하게 된다.

마찬가지로 웹페이지 상에서도 색상은 전체적인 분위기를 결정하고 글의 내용 중 일부를 강조하기 위해 쓰이기도 하는 등 디자인의 중요 요소라고 할 수 있다.

---

그렇다면 CSS 상에서 실제로 색상은 어떻게 표현될까?

 

1. 색상의 종류

CSS에서는 우리가 실생활에서 흔히들 사용하는 색상을 이름으로 정의해 두었다.

black, white, red, purple, green, yellow, blue 등이 바로 그것이다. 

이런 방식의 색상은 바로 코드로 지정해서 사용할 수 있다.

 

2. RGB를 통한 색상의 표현 방법

하지만 우리가 색을 표현할 때 자주 사용하는 색상만을 사용하는 것은 아니기 때문에 좀 더 자유롭게 다양한 색상을 표현하는 방법도 필요할 것이다. 바로 그런 방식이 RGB 방식이다.

 

살면서 한번쯤은 RGB라는 단어를 들어본 적이 있을 것이다.

RGB는 빛의 삼원색인 빨간색(Red), 녹색(Green), 파란색(Blue)을 가산혼합하여 색상을 표현하는 방식이다.

각 색상은 0부터 255까지의 값을 가지는데, 이 값은 각 색상의 강도를 나타낸다. 우리는 이 값을 조합하여 다양한 색상을 만들 수 있다.

0 : 가장 약함 / 255 : 가장 강함

 

빛의 삼원색

RGB는 위의 그림과 같이 빛의 3원색의 조합 방법을 따른다. RGB는 (0, 0, 0)부터 (255, 255, 255)까지 각 색상의 강도를 조정해서 다양한 수치의 조합으로 색을 표현하는데 예를 들어 (0, 0, 0)은 빛이 아무것도 없기 때문에 완전한 검정색이고 (255, 0, 0)이라면 빨간색만 가지기 때문에 빨간색 (100, 100, 0) 이라면 빨간색과 녹색이 섞이기 때문에 노란색 등으로 표현이 되게 된다.

 

이런 간단한 조합 외에도 (2, 7, 21)같이 특정 색상의 강도를 미세하게 조정해서 약간 파란빛을 띄는 검은색도 표현할 수 있다.

 

여기서 한가지 주목할 점은 이런 빛의 혼합은 가산혼합 원리를 중심으로 이루어진다는 것이다.

가산 혼합이란 빛을 더할수록 밝아지는 원리로서 세 가지 색상을 모두 0으로 설정하면 검은색이 되고, 모두 최대(255)로 설정하면 흰색이 되는데 이처럼 빛이 섞이는 강도를 조정해서 다양한 색상을 만드는 것이다.

같은 노란색이어도 빛이 섞이는 정도에 따라 밝기가 달라진다고 할 수 있다.

RGB(200, 200, 0)

RGB(100, 100, 0)

 

3. HEX를 통한 색상의 표현 방법

앞서 말한 RGB 방식 외에도 16진수 코드인 HEX 코드를 이용해서 색상을 표현하는 방법도 있다. HEX는 10진수인 RGB값을 16진수로 표현한 것이기 때문에 색이 정확히 1:1 대응한다.

그럼 그냥 RGB를 사용하지 왜 HEX를 사용하냐 할 수 있겠지만 HEX 코드는 다음과 같은 장점이 있다.

간결성

• RGB 값보다 짧고 간결하게 색상을 표현할 수 있다.
• 코드의 길이가 짧아지면 파일 크기를 줄이고, 코드 가독성을 높이는 데 도움이 된다.

호환성

• HEX 코드는 웹 브라우저, 이미지 편집 프로그램 등 다양한 환경에서 호환된다.

웹 디자인 친화적

• HEX 코드는 웹 디자이너와 개발자가 색상을 공유하고 관리하기 쉽도록 해준다.
• 디자인 도구에서 생성된 HEX 코드를 그대로 CSS에 적용할 수 있다.

---

그렇다면 HEX를 사용한 색 표현 방법은 어떻게 이루어질까?

HEX 코드의 구성

HEX 코드는 # 기호로 시작하고, 6개의 16진수 문자(0-9, A-F)로 구성된다.

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F(16개의 가능한 값)이다.

 

처음 두 자리는 빨강(R)의 강도를, 다음 두 자리는 초록(G)의 강도를, 마지막 두 자리는 파랑(B)의 강도를 나타낸다.

 

#2264C6

 

각 자리는 00부터 FF까지의 값을 가지며, 00은 가장 약한 강도를, FF는 가장 강한 강도를 나타낸다.

 

00 = 0
01 = 1
0F = 15
10 = 16
11 = (1*16)+1 = 17
FF = (15*16)+15 = 255

앞서 HEX코드가 RGB와 정확히 1대1 대응한다고 했었는데 위와 같이 HEX 코드는 0~255까지 수치를 표현하기 때문에 RGB와 1대1 매칭이 되는 것이다.

그렇다면 실제로 HEX 코드를 사용해서 색을 표현하면 어떻게 될까?

RGB(34,100,198)이라는 색상이 있다고 친다면 HEX 코드로 나타내면 이렇게 될 것이다.

1. 각 RGB 값을 16진수로 변환
   • 34를 16진수로 변환 : 22
   • 100을 16진수로 변환 : 64
   • 198을 16진수로 변환 : C6
2. HEX 코드 조합
   • 변환된 16진수 값을 순서대로 조합하고, 앞에 # 기호를 붙인다.
   • #2264C6

따라서 RGB(34, 100, 198)은 HEX 코드 #2264C6로 표현할 수 있다.

 

좀 더 자세한 변환과정은 다음과 같다.

예를 들어 198을 16진수로 표현한다면

 

1. 198을 16으로 나눈다.

• 198 ÷ 16 = 12 (몫) ... 6 (나머지)이다.
• 나머지 6은 16진수로 6이다.(1의 자리)

2. 몫 12를 다시 16으로 나눈다

• 12 ÷ 16 = 0 (몫) ... 12 (나머지)

3. 나머지 값 변환

• 나머지 12는 16진수로 C이다. 10(A) + 2 = C (즉 A에서 2번 뒤쪽에 위치했으니 C인 것이다)
• 16진수에서 10은 A, 11은 B, 12는 C, 13은 D, 14는 E, 15는 F로 표현된다.
• C(10의 자리)

4. 16진수 조합:

• 나머지 값을 역순으로 조합하면 C6이 나온다.

따라서 198을 16진수로 변환하면 C6이다.

 

물론 실제로 저렇게 RGB를 일일히 계산하지는 않고 그냥 계산기를 사용해서 상호변환한다.

 

4. RGBA를 통한 색상의 표현 방법

RGBA는 기존의 RGB 색상 모델에 알파 채널(Alpha Channel)을 추가하여 투명도까지 표현한 방식이다. RGBA를 사용하면 색상과 함께 투명도를 조절하여 다양한 시각 효과를 만들 수 있다.

 

우리가 흔히 드라마나 애니메이션같은 것을 보면 특정 장면이 다른 장면에 오버랩되면서 장면이 전환되는 경우가 있는데 투명도는 이런 방식으로도 사용할 수 있고 특정 그림 위에 다른 그림이 비쳐보이도록(오버레이) 활용 할 수도 있다.

 

기존 RGB와 다른 점은 알파 채널을 통해 색상의 투명도를 나타낸다는 점인데 투명도는 0~1까지의 범위를 가진다.

• 0: 완전 투명
• 1: 완전 불투명
• 0.5: 반투명

rgba는 다음과 같이 표현한다.

rgba(빨강, 초록, 파랑, 투명도)

 

예를 들어서 다음과 같이 예시를 들 수 있다.

 

• rgba(255, 0, 0, 0.5) : 반투명 빨간색
• rgba(0, 0, 255, 0.2) : 투명한 파란색
• rgba(0, 0, 0, 0) : 완전 투명한 검은색
• rgba(255, 255, 255, 1) : 완전 불투명한 흰색

---

그럼 이런 의문이 들 수도 있다.

완전 투명(0)하다면 안보인다는 소리가 아닌가?

답은 YES이다. 완전 투명하다는 소리는 해당 개체가 아예 보이지 않는 다는 얘기이다.

 

간단한 예시를 들어보자면 흔히 패션 스타일 중에 시스루라고 속이 비쳐보이는 옷이 있다. 이렇게 안쪽에 입은 옷이 비쳐보이는 방식의 옷인데 반투명한 효과를 시스루에 비유할 수 있을 것이다. 또 '벌거벗은 임금님'이라는 동화에 보면 임금님이  재단사에 속아서 벌거벗고 다니게 되는데 웹상에서는 실제로 투명도가 0인 완전 투명해서 보이지 않는 옷도 만들어 낼 수 있다.

 

 

그림으로 좀 더 쉽게 나타낸다면 다음과 같다. 투명도에 따라 옷이 점점 투명해지더니 완전히 사라져서 보이지 않는다.

 

 

하지만 여기서 중요한 점은 정말로 옷이 '없어진 것'이 아니라 '있지만 투명해서 안보이는 것'이라는 점이다.

 

웹 디자인 시에는 이런 완전 투명을 필요할 때만 나타나는 팝업 창, 드롭다운 메뉴, 오버레이 등을 만들 때 활용할 수 있다.

특정 요소를 완전 투명하게 설정하여 숨겨두고, 특정 조건(마우스 클릭, 스크롤 등)이 충족되면 투명도를 변경하여 나타나게 하는 방식 등이다.

 

여담으로 이런 투명도 기술은 실제로 투명해지는 것이 아닌 실제로 투명해 졌을 경우를 상상해서 비슷한 시각적 효과를 만드는 것이다.