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-position
배경 위치의 백분율이 영역과 이미지 크기의 차이에 적용되는 이유를 설명합니다. 동일 영역에서 0·50·100%를 비교하고 위치와 잘림을 조정합니다.
CSS / Reference / list-style-type
목록의 의미를 유지하면서 마커 모양과 번호 표시를 변경합니다. start 속성, 이미지 마커와 단축 속성의 영향까지 예제로 확인합니다.
단위 없는 줄 높이와 고정 길이의 상속 결과를 비교합니다. 부모·자식 글자 크기를 바꾸어 계산값과 실제 줄 상자의 차이를 확인합니다.
CSS / Reference / align-content
Flex 줄 묶음과 Grid 트랙의 공간 배분을 비교합니다. nowrap·wrap, auto 트랙 stretch와 일반 블록의 적용 조건을 별도 실습으로 확인합니다.
CSS / Reference / background-attachment
요소 내부와 페이지 스크롤을 나누어 local·scroll·fixed의 기준을 비교합니다. 별도 실행 예제와 모바일에서 확인해야 할 조건을 제공합니다.
calc()로 백분율과 길이를 조합하고 실제 부모 너비를 기준으로 결과를 확인합니다. 자료형 오류, 새 형식 산술과 무한대 계산의 차이도 구분합니다.
전경색과 currentColor의 연결을 같은 박스에서 확인합니다. 상속, 배경색과의 차이, 대비와 색상 이외의 정보 표시 기준을 설명합니다.
CSS / Reference / border-style
테두리 스타일의 1~4개 값 대응과 none의 계산 두께를 설명합니다. 접힌 표에서 hidden이 이웃 경계를 억제하는 차이도 실행 예제로 확인합니다.
글꼴 후보 순서와 문자별 대체 선택을 이해하고 실제 렌더링 글꼴을 확인합니다. 일반 계열의 표기와 웹 폰트 제공·로딩 조건을 설명합니다.