CSS에서 다양한 색상 단위: 초보자 가이드

 

오늘은 CSS에서 사용되는 다양한 색상 단위에 대해 알아볼 거예요. 웹사이트나 애플리케이션을 만들 때 색상은 중요한 역할을 해요.

초보자도 쉽게 이해할 수 있도록 CSS에서 자주 사용되는 색상 단위를 하나씩 설명해 볼게요.

1. 색상 이름 (Color Names)

가장 기본적인 색상 단위는 색상 이름이에요. CSS에서는 미리 정의된 색상 이름을 사용할 수 있어요.

예를 들어, red, blue, green 등과 같은 이름을 직접 사용할 수 있어요.

/* 배경색을 빨간색으로 지정 */
background-color: red;

색상 이름의 장점

• 초보자에게 매우 쉽고 직관적이에요.

색상 이름의 단점

• 기본적으로 제공되는 색상 수가 제한적이에요. 더 세부적인 색상을 원할 때는 다른 단위를 사용해야 해요.

2. RGB (Red, Green, Blue)

RGB는 빨강, 초록, 파랑의 세 가지 색을 섞어서 색을 만드는 방식이에요.

각 색상 값은 0부터 255까지의 숫자로 표현되며, 세 가지 색이 섞여서 최종적인 색상이 나옵니다.

/* 배경색을 파란색으로 지정 */
background-color: rgb(0, 0, 255); /* 빨강 0, 초록 0, 파랑 255 */

• rgb(0, 0, 255)는 파란색을 의미해요.
• rgb(255, 0, 0)은 빨간색, rgb(0, 255, 0)은 초록색이에요.

장점

• 아주 다양한 색상을 표현할 수 있어요.

단점

• 숫자 조합이 많아지면 헷갈릴 수 있어요.

3. RGBA (Red, Green, Blue, Alpha)

RGBA는 RGB에 Alpha(알파) 값을 추가한 형식이에요. 여기서 Alpha는 투명도를 나타내요.

값은 0부터 1까지로, 0은 완전 투명, 1은 불투명을 의미해요.

/* 배경색을 파란색으로 지정하고, 50% 투명하게 설정 */
background-color: rgba(0, 0, 255, 0.5); /* 빨강 0, 초록 0, 파랑 255, 투명도 50% */

• rgba(0, 0, 255, 0.5)는 파란색이지만 50% 투명한 상태에요.

장점

• 투명도까지 조절할 수 있어서 좀 더 세밀한 디자인이 가능해요.

단점

• 역시 숫자 조합이 많아지면 복잡해질 수 있어요.

4. HEX (16진수 색상)

HEX 값은 16진수로 색상을 표현하는 방법이에요. #RRGGBB 형식으로, 두 자리씩 각각 빨강(R), 초록(G), 파랑(B)을 나타내요.

여기서 00은 최소값, FF는 최대값이에요.

/* 배경색을 파란색으로 지정 */
background-color: #0000FF; /* 빨강 00, 초록 00, 파랑 FF */

• #FF0000은 빨간색, #00FF00은 초록색, #0000FF은 파란색이에요.

장점

• 짧고 깔끔하게 다양한 색상을 표현할 수 있어요.

단점

• 숫자와 글자가 섞여 있어서 처음에는 익숙하지 않을 수 있어요.

단축형 HEX

만약 각 값이 동일한 두 자리 값으로 이루어져 있다면, 단축형으로 쓸 수 있어요.

/* 배경색을 하얀색으로 지정 */
background-color: #FFF; /* #FFFFFF를 줄인 형태 */

5. HSL (Hue, Saturation, Lightness)

HSL은 색상을 색상(Hue), 채도(Saturation), 명도(Lightness)로 나타내는 방법이에요.

• Hue(색상): 0도부터 360도까지로, 색의 종류를 나타내요. 예를 들어, 0도는 빨강, 120도는 초록, 240도는 파랑을 의미해요.
• Saturation(채도): 0%에서 100%로, 색의 선명도를 나타내요. 100%에 가까울수록 더 선명한 색이 되고, 0%는 회색이 돼요.
• Lightness(명도): 0%에서 100%로, 색의 밝기를 나타내요. 0%는 검정색, 100%는 흰색이 돼요.

/* 배경색을 파란색으로 지정 */
background-color: hsl(240, 100%, 50%); /* 파란색 (240도), 채도 100%, 명도 50% */

장점

• 색상, 채도, 명도를 따로 조절할 수 있어 색을 이해하기 쉽고 세밀하게 설정할 수 있어요.

단점

• 처음에는 각 값이 익숙하지 않을 수 있어요.

6. HSLA (Hue, Saturation, Lightness, Alpha)

HSLA는 HSL 방식에 Alpha(투명도)를 추가한 방법이에요. Alpha 값은 0부터 1까지로, 0은 완전 투명, 1은 불투명을 의미해요.

/* 배경색을 파란색으로 지정하고, 50% 투명하게 설정 */
background-color: hsla(240, 100%, 50%, 0.5); /* 파란색 (240도), 채도 100%, 명도 50%, 투명도 50% */

장점

• 색상과 투명도를 동시에 조절할 수 있어서 매우 유용해요.

단점

• HSL 값에 투명도까지 추가되면 다소 복잡해질 수 있어요.

 

CSS에서 사용할 수 있는 다양한 색상 단위를 배워보았어요.

각 단위마다 장단점이 있고, 상황에 따라 적합한 방법을 선택하면 돼요. 초보자에게는 색상 이름이나 HEX가 쉽게 느껴질 수 있고, 좀 더 복잡한 색상 표현이 필요하다면 RGB(A)나 HSL(A)를 사용할 수 있어요.

게임이나 웹 디자인을 할 때는 투명도가 필요할 때 RGBA나 HSLA를 사용하면 좋아요.

 

구독!! 공감과 댓글,

광고 클릭은 저에게 큰 힘이 됩니다.

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱