반응형
background와 background-color의 정확한 차이를 알아보겠다.
평소에 background와 background-color에 대해 별생각 없이 사용을 했었는데
어떤 상황에 더 맞게 써야 하는지에 대해 의문이 들었다.
자세히 알아보자.
TL;DR
background-color는 오직 배경의 색상만 다루고, background는 색상 외의 배경의 다양한 옵션을 설정할 수 있다.
background-color는 background의 하위 속성이다.
background-color
color가 속성명에 담긴 것처럼 배경 요소의 색상을 지정한다.
background-color: white;
background-color: rgba(117, 190, 218, 0.5);
background
color 외에 다양한 배경 요소의 속성을 다룬다.
color, image, position, repeat 등의 옵션을 다루며 각각 띄어쓰기로 구분해서 작성한다.
단축 속성으로서 background-color, background-image, background-position, background-repeat 등의 하위 속성들을 모두 포함하는 속성이다.
background: white;
background: no-repeat url("../examples/test.png");
background: content-box radial-gradient(crimson, skyblue);
추가적으로 이와 같은 단축 속성 중에 border도 마찬가지이다.
단축 속성은 여러 가지의 CSS 속성 값을 한번에 지정할 수 있는 것을 의미한다.
border: 1px solid black;
https://developer.mozilla.org/ko/docs/Web/CSS/background-color
반응형
