설날을 맞이해서 오늘은 간단한 정리를 해볼까 한다.
주제는 평소에 아무생각 없이 사용했던 background와 background-color의 차이점이다.
필자는 평소에 배경색을 집어넣을때 둘 중에서 아무 속성이나 골라서 사용했다.
왜냐하면 배경색만 지정할때는 아무런 차이가 없기 때문이다.
하지만 배경에 대해서 넓게 생각하면 색 뿐만 아니라 이미지가 배경으로 들어갈 때가있다.
이때 부터는 background와 background-color의 차이점이 시작된다.
background-color
CSS
background-color속성은 요소의 배경 색을 지정합니다.
background-color는 이름처럼 오직 색만 지정할 수 있다.
그리고 그 색은 오직 단일 색이다. 이말은 gradient 속성도 줄 수 없다는 말이다.
단순히 rgba 값 등을 줄 때 사용하는 속성이다.
예시
background-color: rgba(255, 210, 210, 0.5);background
CSS
background단축 속성은 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한 번에 지정합니다.
단축 속성은 서로 다른 여러 가지 CSS 속성의 값을 지정할 수 있는 CSS속성이다.
background 속성은 background-color 뿐만 아니라 background-image, background-repeat, background-position 값을 정의할 수 있는 단축 속성이다.
처음 언급했던 것처럼 background-color와 다르게 색 뿐만 아니라 이미지와 gradient 값 등을 지정할 수 있다.
background가 background-color를 포함하고 있다고 할 수 있다.
예시
background: no-repeat url("example.png");참고자료
