background나 background-color 모두 색상을 설정할 수 있는 것으로 보입니다. 그렇다면 두 속성 간의 차이가 무엇인가에 대해 궁금증이 있는 분이 계실 것입니다. 어떤 부분에서 차이가 있는지 간략히 확인해 봅시다.
차이점을 한 마디로 정의하면 background 속성은 백그라운드에 관한 모든 속성을 한 번에 설정할 수 있도록 지원하고, background-color 속성은 백그라운드 중에서도 색상 설정에 관한 기능만을 제공한다는 것입니다. 그리하여 둘 다 컬러를 설정할 수 있는 부분에서 비슷하거나 똑같은 것으로 착각하는 경우가 있는 것입니다.
background-color
백그라운드 컬러를 특정한 색상, 헥스, RGB, 또는 HSL을 표기하는 것을 통해 지정할 수 있습니다.
- brown과 같이 알려진 색상 명칭으로 설정하는 방법
- #000과 같이 헥스로 설정하는 방법
- RGB(r, g, b)로 설정하는 방법 => 빨간색(red), 초록색(green), 파란색(blue) 삼원색으로 설정하는 방법입니다. RGB는 각각 0부터 255 사이의 정수
- HLS(h, l, s)로 설정하는 방법 => 색상(hue), 채도(saturation), 명도(lightness)로 설정하는 방법입니다. 색상은 0부터 360까지 색상환 기준으로 설정하며, 채도와 명도는 각각 0%부터 100%로 표기합니다.
- RGB와 HLS는 알파를 추가로 설정할 수 있는 함수를 제공합니다. 각각 RGBA, HLSA
background-color: brown;
background-color: #000;
background-color: rgb(255, 128, 128);
background-color: hsl(50, 40%, 30%);background
백그라운드 속성은 백그라운드 컬러를 포함한 모든 관련 속성을 한 번에 설정할 수 있도록 지원합니다.
속성에는 색상, 이미지, 원점, 크기 또는 반복 방법과 같은 값이 있습니다.
다음과 같이 컬러 속성을 단독으로 설정하면 동일한 의미로 사용한다는 것을 뜻합니다.
/* background-color와 동일한 의미 */
background: brown;
/* 백그라운드 컬러 속성 */
background-color: brown;