css background background-color 차이점

vscode를 이용해서 css를 이용할 때 배경색을 주기 위해서

background 또는 background-color를 이용합니다.

둘 다 배경색을 입혀줄 수 있다는 공통점이 있으나

둘의 차이점이 궁금해서 알아보았습니다.

 

TMI지만 저 같은 경우 처음에 배울 때 bgc를 입력해서 자동완성으로 하다 보니

항상 후자를 사용하고 있었습니다.

 

background와 background 둘 다 배경색을 줄 수 있다는 공통점은 있으나

background 같은 경우 배경색과 더불어 다른 옵션까지 줄 수 있습니다.

예를 들어 url를 준 경우이죠.

 

아래와 코드를 보게 되면

 

.bg{
  width: 150px;
  height: 150px; 
}
.background-color{
  background-color: pink;
}

.background{
  background: blue url("test.jpg") no-repeat left center;
}

background는 배경색과 더불어 url 사진까지 포함할 수 있습니다.

 

이렇게 말이죠 

가장 쉽게 생각하면 background-color는 뒤에 color는 옵션으로 생각해서

색깔만 줄 수 있다고 생각하시면 쉬우실 것 같습니다.