CSS background와 background-color의 차이점 – 제대로 알고 써야 하는 이유

제가 가장 자주 받는 CSS 질문 중 하나가 바로 "CSS에서 background와 background-color는 어떻게 다른가요?"입니다. 이것이 헷갈리는 이유는 많은 개발자들이 요소에 배경색을 지정할 때 두 속성을 마치 동일한 것처럼 섞어서 사용하는 모습을 흔히 볼 수 있기 때문입니다.

그러나 두 속성은 전혀 다릅니다. background(-color가 붙지 않은) 속성은 하나의 선언만으로 요소의 모든 배경 관련 속성을 한 번에 설정할 수 있습니다. 예를 들어 배경색과 한 번만 표시되는(no-repeat) 이미지, 그리고 이미지 위치까지 단 한 줄의 선언으로 추가할 수 있습니다.

background: #444 url("image.jpg") no-repeat left top;

위 코드는 아래처럼 개별 속성으로 나눠 작성할 수도 있습니다.

background-image: url("url/image.jpg");

background-repeat: no-repeat;

background-position-x: left;

background-position-y: top;

background-color: #444;

즉, background 속성은 여러 개별 선언을 한 줄로 압축해 주는 편리한 축약형(shorthand)으로, 코드 줄 수를 크게 줄여줍니다.

선언(Declaration) = CSS 속성 + 값

반면 background-color 속성은 오직 요소의 배경 색상만 설정할 수 있습니다. 더 큰 background 속성의 일부분(부분집합)이라고 생각하면 이해하기 쉽습니다.

주의: background 속성은 기존 선언을 모두 초기화합니다!

어떤 요소에 이미 background-color나 background-image 등 여러 배경 선언이 적용된 상태에서, 나중에 같은 요소에 background: red를 선언하면 어떻게 될까요? 이전의 모든 배경 선언이 초기화되고, 해당 요소의 배경은 빨간색이 되며 배경 이미지는 사라져 버립니다.

예제

아래 CodePen 예제를 살펴보세요. 세 개의 div 요소가 동일한 .box 클래스를 가지고 있습니다. 첫 번째 요소는 .box 클래스만 있고, 나머지 두 요소에는 각각 유틸리티(헬퍼) 클래스인 .bg-red와 .bg-blue가 추가로 적용되어 있습니다.

차이점이 보이시나요?

두 번째 박스는 완전히 빨간색일 뿐 이미지가 전혀 없습니다. 분명 .box 클래스에는 다른 두 요소와 같은 JS 이미지가 지정되어 있는데도 말이죠.

HTML 코드:

<div class="box">
</div>

<div class="box bg-red">
</div>

<div class="box bg-blue">
</div>

CSS 코드:

.box {
	margin: 1rem;
	height: 100px;
	width: 150px;
	background-color: black;
	background-image: url("https://techstacker.com/static/placeholder-thumbnail-javascript-322632ee75bc4a676b0b067b31eaf969.svg");
	background-repeat: no-repeat;
}

.bg-red {
	background: red;
}

.bg-blue {
	background-color: blue;
}

CSS를 자세히 보고 .bg-red와 .bg-blue를 비교해 보세요. 빨간색 클래스는 '마스터'(올인원) 성격의 background 속성으로 색상 값을 지정한 반면, 파란색 클래스는 단일 목적의 background-color를 사용했습니다.

.bg-red 클래스의 background 속성은 두 번째 div 요소의 다른 모든 배경 선언(-image, -repeat, -color)을 제거하고, 지정된 red 값만 그 요소의 유일한 배경 속성으로 남깁니다.

따라서 특정 요소의 배경 색상만 변경하고 싶다면 반드시 background-color를 사용해야 합니다. background를 사용하면 해당 요소에 이미 적용된 모든 배경 관련 선언을 덮어쓰게 됩니다.

물론 때로는 기존 선언을 모두 초기화하는 것이 정확히 원하는 동작일 수도 있습니다. 예를 들어 함부로 수정할 수 없는(또는 수정하고 싶지 않은, 하하) 레거시 코드가 가득한 웹사이트에서, 여러 선언이 얽힌 특정 요소를 새로운 단일 값(예: 색상)으로 교체해야 한다면 background 속성이 훌륭한 도구가 됩니다.