CSS background-color 웹페이지, HTML 요소에 배경색을 넣는 속성

BACKGROUND-COLOR 란?

background-color 속성은 요소의 배경 색상을 정의하는 데 사용됩니다. 색상 값을 지정하면 웹 페이지의 모양과 느낌을 변형하여 더 매력적이고 시각적으로 매력적으로 만들 수 있습니다. 미묘한 배경색을 원하든 대담하고 생생한 색상을 원하든 '배경색' 선택기가 도움이 됩니다.

 

기본적인 사용법

.element {
  background-color: red;
}

• CSS 선택자 안에 background-color 속성을 입력합니다
• 속성값에는 color를 입력합니다

 

속성값을 넣는 4가지 방법

위의 예시에서는 red를 바로 입력헀는데요. 색을 넣는 방법은 크게 4가지가 있습니다.

 

1. 지정된 색 사용

background-color: yellow;

우리가 흔히 생각하는 컬러는 이미 명칭이 정해져 있더라구요. 제가 원래 알던 건 16개 정도였는데, 훨씬 더 많은 색들이 named color로 정해져 있었습니다. 

 

https://matplotlib.org/stable/gallery/color/named_colors.html

See the Pen color by 40's Programmer (@40sProgrammer) on CodePen.

 

 

2. 16진수 사용

background-color: #FF0000;

가장 많이 쓰이는 방식일 것 같습니다. # 뒤의 6자리는 RGB를 의미하는데요. FF는 Red의 강도, 뒤의 00은 각각 Green과 Blue의 강도를 말합니다. 

 

위의 #FF0000은 빨간색이 FF만큼 있는거고, 따라서 red와 동일한 색상입니다. 파란색은 #0000FF 입니다.

 

See the Pen HEXcode by 40's Programmer (@40sProgrammer) on CodePen.

 

3. RGB, RGBA 사용

background-color: rgb(255, 0, 0);
background-color: rgba(255, 0, 0, 0.5);

16진수와 비슷하긴 합니다. Red, Green, Blue의 강도를 각각 0에서 255로 나타내는 방식입니다. 16진수의 FF가 10진수의 255와 같으니까요.

 

rgba를 사용하면 투명도를 조절할 수 있습니다. 투명도는 0에서 1까지 정할 수 있습니다. 보통 0.1 단위로 조정하는 것 같지만, 0.01단위로 변경해도 미세하게 바뀌더라구요.

 

만약 0.1을 사용하면 투명해질까요? 불투명해질까요?

아래 예시에서 확인해보세요.

 

See the Pen rgba by 40's Programmer (@40sProgrammer) on CodePen.

 

4. HSL, HSLA 사용

background-color: hsl(89, 43%, 51%); 
background-color: hsla(89, 43%, 51%, 0.3);

hsl, hsla은 잘 안 쓰는 방식 같습니다. 전문 디자이너는 사용할지도 모르겠지만요.

RGB는 Red, Green, Blue를 혼합하는 방식이라면, HSL은 빛의 색상, 채도, 명도를 조절하는 방식입니다.

• 색상(Hue) : 첫번째 숫자이며 0에서 360의 값을 가집니다
  • 0 또는 360은 Red
  • 120은 Green
  • 240은 Blue
• 채도(Saturation) : 두번째 숫자이며 0%~100% 사이의 값을 가집니다
  • 100%에 가까워질수록 짙어집니다
  • 그런데 0%으로 정하면 회색이 되어버립니다
• 명도(Lightness) : 세번째 숫자이며 0%~100% 사이의 값을 가집니다
  • 50%도 오리지널 색상을 의미합니다
  • 100%에 가까워질수록 흰색이 됩니다
  • 0%에 가까워질수록 검은색이 됩니다

 

background-color에 대해 얘기하면서 CSS 색상 표현법을 같이 언급했습니다.

color값은 background-color 말고도 font-color, border-color 등에서도 사용됩니다.