[CSS] CSS background 와 background-color의 차이 알아보기.

2021-03-13

---

바로 결론부터 말하자면, backgroud와 background-color 모두 색상을 지정할 수 있다. 다만 background-color 즉 색깔만 지정할 수 있는 반면에, background는 color 이외의 다른 background 옵션들을 지정해 사용할 수 있다.

---

- 사용법

 

	/* 백그라운드의 경우 다양한 백그라운드 옵션을 띄어쓰기로 구분해서
		한번에 줄 수 있다.  */
	background: #color url("image url") no-repeat;
	
	/* background-color은 단순히 배경색 옵션만 부여할 수 있다.  */
	background-color: #color;
    

 

사용법은 위의 css 코드처럼 사용할 수 있다. 기본 background-color는 단순히 색깔 옵션만 부여해서 사용할 수 있는 반면에 background는 다른 color / image / repeat / attachment / position과 background 옵션을 추가적으로 부여할 수 있다.

---

- 정리

 

background는 다양한 background 속성을 부여할 수 있는 축약 속성이다 다만 명시성 측면에서는 각각의 옵션명을 적어주는 편이 좀 더 코드를 이해하기 쉽다.

 

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