CSS / Reference / background-color
background-color는 요소의 배경색을 지정합니다. 기본적으로 내용·padding·테두리 아래 영역을 칠하지만 margin은 칠하지 않으며, 실제 칠하기 범위는 background-clip에 따라 달라집니다.
문법과 주요 값
| 속성 | 초기값 | 상속 | 주요 적용 조건 |
|---|---|---|---|
background-color |
transparent | 아니요 | 모든 요소; 실제 그림·텍스트·상자의 존재 조건은 본문에서 확인 |
초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.
.card { background-color: #e6f2ff; }
.overlay { background-color: rgb(0 0 0 / 40%); }
| 값 또는 구분 | 동작과 선택 기준 |
|---|---|
transparent |
배경색이 투명해 뒤의 배경이 보임 |
#e6f2ff |
16진수 색 |
rgb(0 0 0 / 40%) |
알파 값으로 배경색만 반투명하게 지정 |
inherit |
부모의 계산된 배경색을 명시적으로 상속 |
값과 적용 조건은 MDN background-color에서 확인할 수 있습니다.
실행 예제와 결과 비교
아래 전체 코드를 UTF-8 형식의 background-color-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>background-color 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.samples { background: #ffd166; padding: 20px; }
.target, .reference { width: 220px; padding: 18px; border: 6px dashed #333; margin: 10px; }
.target { background-color: rgb(0 108 156 / 40%); }
.reference { background-color: transparent; }
/* 좁은 화면에서 실습 외곽을 맞춥니다. */
.target, .reference { max-width: calc(100vw - 48px - 108px); }
</style>
</head>
<body>
<main id="demo">
<h1>background-color 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">배경색 알파 40%</p><div class="target">CSS 속성의 적용 결과를 비교합니다. 이 문장은 줄바꿈과 표시 영역을 확인하는 예시입니다.</div></div><div class="b"><p class="label">transparent</p><div class="reference">CSS 속성의 적용 결과를 비교합니다. 이 문장은 줄바꿈과 표시 영역을 확인하는 예시입니다.</div></div></section>
</main>
</body>
</html>
반투명 배경색은 뒤의 노란 배경과 합성되지만 글자 자체는 함께 투명해지지 않습니다. margin 부분은 부모 배경이 보입니다.
배경색과 상속 구분
배경색은 보통 자동 상속되지 않습니다. 자식의 배경이 투명해 부모의 배경이 비쳐 보이는 것과 부모 값을 상속하는 것은 다릅니다. inherit를 쓰면 부모의 계산된 색을 자식의 새 배경색으로 지정합니다.
배경 이미지와 읽기 대비
background-color는 배경 이미지 레이어 아래에 칠해집니다. 이미지가 로딩되지 않아도 글자를 읽을 수 있도록 대체 색을 정하고, 사진 위의 텍스트에는 밝은 부분과 어두운 부분 모두에서 대비를 확인하세요. background 단축 속성을 뒤에 쓰면 이전 색이 재설정될 수 있습니다.
한 가지 설정씩 바꾸어 확인하기
앞의 전체 코드를 저장한 예제 파일을 사용합니다. 지정한 선택자의 CSS만 변경하고, 서로 다른 비교 조건을 한꺼번에 바꾸지 않습니다.
- 기존 .target의 배경색 알파만 40%에서 100%로 바꾸어 뒤 배경과 합성되는지 비교합니다. 글자 opacity는 바꾸지 않고 원래 알파로 복구합니다.
- 읽기 대비는 최종 배경과 글자색의 조합에서 검사합니다. 일반 텍스트 최소 4.5:1, 큰 텍스트 3:1 기준과 예외를 구분하고 대비 검사 도구의 입력값에 알파 합성까지 반영합니다.
배경 이미지를 함께 쓴 실제 구성에서는 읽을 수 있는 불투명 background-color도 남기세요. 개발자 도구에서 background-image를 잠시 해제하고 같은 글자색이 대체 배경 위에서도 읽히는지 확인한 뒤 복구합니다. WCAG의 큰 텍스트는 일반적으로 18pt(24 CSS px) 이상 또는 굵은 14pt(약 18.67 CSS px) 이상이며 로고·비활성 컨트롤 등에는 별도 예외가 있습니다.
관련 조건은 WCAG 텍스트 대비 기준에서 확인할 수 있습니다.
여러 배경 속성을 한 화면에서 조합하려면 배경색과 배경 이미지 설정하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 opacity, background-clip입니다.
적용되지 않거나 예상과 다를 때
- 색이 안 보이면 위의 배경 이미지나 다른 요소가 가리고 있는지 확인합니다.
- 반투명 효과에 opacity를 썼다면 글자까지 흐려지는지 확인하고 배경색의 알파 값과 비교합니다.
CSS / Reference / background-size
cover·contain을 같은 이미지와 영역에서 비교합니다. 비율 유지, 잘림, 빈 공간과 padding-box 기준의 크기 계산을 함께 확인합니다.
CSS / Reference / border-style
테두리 스타일의 1~4개 값 대응과 none의 계산 두께를 설명합니다. 접힌 표에서 hidden이 이웃 경계를 억제하는 차이도 실행 예제로 확인합니다.
중첩 인용에 사용할 여닫는 부호를 지정하고 문자로 입력한 따옴표와 구분합니다. 인용 깊이, 마지막 쌍의 재사용과 none의 동작을 비교합니다.
부모와 루트 글자 크기를 기준으로 em·rem을 계산합니다. 중첩된 상대 크기의 차이와 확대 시 잘림을 확인하는 방법을 제공합니다.
빈 표 셀의 테두리·배경을 표시하거나 숨기는 방법을 비교합니다. 빈칸의 의미와 상속, separate·collapse 모델의 차이를 함께 확인할 수 있습니다.
전경색과 currentColor의 연결을 같은 박스에서 확인합니다. 상속, 배경색과의 차이, 대비와 색상 이외의 정보 표시 기준을 설명합니다.
박스 그림자의 위치·흐림·확산·겹침 순서를 조정합니다. 한 값씩 바꾸는 실습으로 그림자가 레이아웃 크기와 상위 잘림에 미치는 관계를 확인합니다.
글꼴 후보 순서와 문자별 대체 선택을 이해하고 실제 렌더링 글꼴을 확인합니다. 일반 계열의 표기와 웹 폰트 제공·로딩 조건을 설명합니다.
CSS / Reference / background-clip
배경을 border·padding·content 영역 또는 텍스트에 맞춰 자릅니다. 위치 기준과의 차이, 투명 글자의 대체 색과 강제 색상 환경을 확인합니다.
CSS / Reference / letter-spacing, word-spacing
같은 문장을 기준으로 문자 간격과 단어 간격을 따로 조정합니다. normal 기준, 상대 단위, 언어별 줄바꿈과 과도한 음수 간격의 문제를 설명합니다.