[CSS] background와 background-color의 차이

평소 나는 배경의 색을 지정할 때에 background-color를 사용했었다.

그러던 중 한 인강에서 background를 이용해서 배경색을 지정하는 것을 보게 되었다.

무슨 차이가 있는지 알아보자.

---

바로 결론부터 말하자면, background와 background-color 모두 배경 색상을 지정할 수 있다.

다만 background-color는 색깔만 지정할 수 있는 반면에, background는 color 이외의 다른 background 옵션들까지 지정해줄 수 있다.

 

 

[background-color]

이 속성은 요소의 배경 색상을 지정하는데 사용된다.

div {
    background-color: #ff0000; /* 빨간색 배경 */
}

 

 

[background]

div {
    background: #ff0000 url('background.jpg') no-repeat center center;
}

 

이 속성은 배경에 관련된 여러 속성을 동시에 설정하는 데 사용된다.

background 속성은 단축 속성으로, background-color 외에도 배경 이미지, 반복 여부, 위치 등을 지정할 수 있다.

다양한 배경 속성을 한 줄로 설정할 수 있어 코드를 간결하게 만들 수 있다는 장점이 있지만,  명시성 측면에서는 각각의 옵션명을 적어주는 편이 좀 더 코드를 이해하기 쉽다고 한다.

 

위의 예제에서 #ff0000은 배경 색상, url('background.jpg')는 배경 이미지, no-repeat은 이미지를 반복하지 않도록 설정하고, center center는 이미지를 가운데 정렬하도록 지정한다.

 

 

요약

background-color 
background-image 
background-repeat      =====> background (shorthand property)
background-attachment  
background-position

 

 

background-color는 단순히 배경의 색상을 설정하는 데 사용되고, background는 배경과 관련된 여러 속성을 한 번에 설정하는 데 사용된다.