서론

평소의 나는 항상 backgroud-color 속성만 사용한다. 그래서 현재 진행중인 프로젝트 CSS에는 background-color로만 배경색을 지정하고 있었다. 최근 디자이너님께 전달받은 디자인으로 변경하던 과정 중 background로 지정된 속성을 변경하지 않고 그대로 옮겼고, 이를 본 멘토님께 둘의 차이를 아느냐 질문을 받았다. 이에 대답하지 못해 블로그 글로 정리해보아야겠다 마음먹었다.

background-color는 background의 하위 속성이다.

차이는 대단하지 않다. 위 제목처럼 background-color는 background의 하위 속성인 것이 차이의 전부이다.

좀 더 자세히 살펴보자면, background에는 다음과 같은 하위 속성들이 존재한다.

background-attachment

: 배경 이미지를 viewport 내에서 고정할지, 본인을 포함하는 블록과 함께 스크롤할지 지정하는 속성

해당 속성에는 fixed, local, scroll이 있으며 이를 통해 요소에 스크롤이 존재하면 배경이 함께 스크롤될지 여부를 결정할 수 있다. 가끔 홈 페이지에서 스크롤을 내리면 배경은 고정되어 있고, 타이틀만 이동하는 듯한 효과를 보곤 하는데 이 속성을 활용하면 쉽게 구현할 수 있을 듯 하다.

background-clip

: 요소의 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어디까지 차지할 지 저정하는 속성

border-box, padding-box, content-box, text를 선택할 수 있으며 배경의 경계를 결정할 수 있다. 이 중 text는 실험적인 기능이라 몇몇 브라우저에서는 호환되지 않을 수도 있다.

background-origin

: 배경의 원점을 테두리 시작점, 테두리 내부, 안쪽 여백 내부 중 하나로 지정하는 속성

background-clip과 유사한 속성으로 border-box, padding-box, content-box를 선택할 수 있다. 다만, background-attachment가 fixed로 설정되었다면 background-origin이 무시된다.

background-color

: 요소의 배경 색을 지정하는 속성

이후 소개될 background-image와 함께 사용한다면 background-color가 background-image의 뒤에 렌더링되므로, background-image에서 설정한 이미지의 투명한 부분을 통해서 볼 수 있다.

background-image

: 요소의 배경 이미지를 한 개 이상 지정하는 속성

만약 배경 이미지를 여러 개 지정한다면 맨 처음 지정한 이미지가 제일 위에 위치한다.

• background-color보다는 위에 그려지지만, 테두리보다는 아래에 그려진다.
• 지정한 이미지가 네트워크 문제 등의 이슈로 볼 수 없다면 background-color로 대체되어 그려지기 때문에 background-color를 함께 지정할 것을 권장한다.

background-position

: 배경 이미지의 초기 위치를 지정하는 속성

top, bottom, left, right, center, percentage, 길이 등의 다양한 값을 지정할 수 있다.

background-repeat

: 배경 이미지의 반복 방법을 지정하는 속성

no-repeat, repeat, repeat-x, repeat-y, space, round 등의 속성을 지정할 수 있다.

background-size

: 배경 이미지의 크기를 설정하는 속성

이미지를 늘리거나 공간에 맞게 제한하여 사용하도록 할 수 있다.

background는...?

background 속성은 앞서 살펴본 속성들을 조합하여 사용할 수 있는 속성이다. 여러 background 관련 속성들을 한 번에 적을 수 있어 편리하기는 하나 다른 이들과의 협업을 고려한다면 지금 지정하고 있는 것이 color인지, size인지, 반복인지를 명확하게 해주는 하위속성들을 사용하는 것이 권장된다고 한다.

따라서, 우리 프로젝트에 마구 옮겨두었던 background 속성도 근시일 내에 background-color로 바꿔놓을 예정이다.