실행 가능한 CSS 문서: 배경색

Q: HTML에서 배경색은 어떻게 바꾸나요?

CSS background-color 속성을 써요. 페이지 전체라면 body { background-color: #f3f4f6; }, 요소 하나라면 예요.

Q: HTML에서 bgcolor는 아직 유효한가요?

아니요. , , 의 bgcolor 속성은 HTML5에서 폐기됐어요. 브라우저가 옛 페이지를 위해 여전히 그려 주지만, 올바른 방법은 CSS의 background-color예요.

Q: 배경색을 투명하게 만들려면 어떻게 하나요?

background-color: rgb(37 99 235 / 20%);처럼 알파 채널이 있는 색을 써요. opacity와 달리 안쪽 텍스트는 완전히 선명하게 유지돼요.

Q: background와 background-color는 무엇이 다른가요?

background-color는 색만 정해요. background는 모든 배경 속성(color, image, position, size, repeat, attachment, origin, clip)의 단축 속성이라서, background: red;는 배경 이미지도 none으로 초기화해요.

배경색 지정하기

background-color는 padding과 테두리 아래 영역을 포함한 요소의 상자를 색으로 채워요. 모든 CSS 색을 받아요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background color</title>
  <style>
    body { font-family: system-ui, sans-serif; background-color: #f3f4f6; }
    .card { background-color: #ffffff; padding: 16px; border-radius: 8px; margin-bottom: 12px; }
    .notice { background-color: #fef3c7; padding: 12px 16px; }
    mark { background-color: #bbf7d0; }
  </style>
</head>
<body>
  <div class="card">A white card on a light gray page.</div>
  <div class="notice">An amber notice.</div>
  <p>A <mark>highlighted phrase</mark> inside a sentence.</p>
  <p><span style="background-color: #2563eb; color: white; padding: 2px 6px;">inline style</span></p>
</body>
</html>

페이지 색은 body에, 카드와 알림은 각자의 div에, 형광펜 효과는 인라인 요소에 지정했어요. 인라인 요소는 텍스트 뒤에만 줄마다 배경이 생겨요.

페이지 전체의 배경색

body에 background-color를 지정하세요. <html> 요소에 자기 배경이 없으면 브라우저는 body의 콘텐츠가 끝나는 곳까지 포함해서 창 전체에 body의 배경을 칠해요.

body {
  background-color: #111827;
  color: #f9fafb; /* change the text color too, for contrast */
}

옛 HTML 방식은 <body bgcolor="black">였어요. bgcolor 속성은 모든 요소에서 폐기되었으니 대신 CSS를 쓰세요. 브라우저가 옛 페이지를 위해 여전히 지원해서 동작하는 것처럼 보일 수 있어요.

투명한 배경

모든 요소는 background-color: transparent로 시작해서 뒤의 부모가 보여요. 상자에 색을 입히면서도 비쳐 보이게 하려면 알파 채널이 있는 색을 쓰세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transparent background</title>
  <style>
    body {
      font-family: system-ui, sans-serif; font-weight: 600; padding: 12px;
      background: repeating-linear-gradient(45deg, #bfdbfe 0 12px, #ffffff 12px 24px);
    }
    .box { padding: 16px; margin-bottom: 10px; color: #111827; }
    .none { background-color: transparent; border: 2px dashed #111827; }
    .tint { background-color: rgb(245 158 11 / 50%); }
    .solid { background-color: rgb(245 158 11); }
  </style>
</head>
<body>
  <div class="box none">transparent (the default)</div>
  <div class="box tint" id="tint">rgb(245 158 11 / 50%)</div>
  <div class="box solid">rgb(245 158 11)</div>
</body>
</html>

opacity: 0.5로도 줄무늬가 비쳐 보이지만 텍스트까지 흐려져요. 텍스트는 선명하고 배경만 비쳐 보이게 하려면 알파 색을 쓰세요. 쓰는 방법은 색상 페이지에 모두 있어요.

색이 칠해지는 범위

기본적으로 배경은 테두리의 바깥 가장자리까지 닿아요(그래서 점선이나 반투명 테두리 사이로 보여요). background-clip으로 바꿀 수 있어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>background-clip</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .box {
      display: inline-block; margin: 6px; padding: 16px;
      border: 8px dashed #111827;
      background-color: #f59e0b;
    }
    .padding { background-clip: padding-box; }
    .content { background-clip: content-box; }
  </style>
</head>
<body>
  <div class="box">border-box</div>
  <div class="box padding">padding-box</div>
  <div class="box content">content-box</div>
</body>
</html>

첫 번째 상자에서는 점선 사이로 주황색이 보여요. 두 번째에서는 테두리 안쪽 가장자리에서 멈추고, 세 번째에서는 콘텐츠 영역만 색이 칠해져요. margin은 절대 칠해지지 않아요. 항상 투명해요.

줄무늬 표 행

한 행 걸러 배경을 주면 넓은 표를 훑어보기 쉬워요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Striped rows</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    table { border-collapse: collapse; width: 100%; }
    th, td { padding: 8px 12px; text-align: start; }
    thead { background-color: #1f2937; color: white; }
    tbody tr:nth-child(even) { background-color: #f3f4f6; }
    tbody tr:hover { background-color: #dbeafe; }
  </style>
</head>
<body>
  <table>
    <thead><tr><th>Name</th><th>Role</th></tr></thead>
    <tbody>
      <tr><td>Ada</td><td>Engineer</td></tr>
      <tr><td>Grace</td><td>Admiral</td></tr>
      <tr><td>Alan</td><td>Mathematician</td></tr>
      <tr><td>Katherine</td><td>Physicist</td></tr>
    </tbody>
  </table>
</body>
</html>

background-color와 background 단축 속성

background는 모든 배경 속성을 한 번에 정해요. 빠뜨린 부분은 기본값으로 돌아가서 사람들이 곧잘 당황해요.

.hero {
  background-image: linear-gradient(#2563eb, #1e40af);
  background: #111827;          /* also resets background-image to none */
}

.hero {
  background-image: linear-gradient(#2563eb, #1e40af);
  background-color: #111827;    /* only the color; the gradient stays */
}

색만 뜻할 때는 background-color를 쓰세요. 배경 전체를 한곳에서 정할 때, 흔히 색과 이미지를 함께 정할 때는 background를 쓰세요. background-image를 참고하세요.

접근성: 글자 색과 짝지어 주세요

배경색은 글자 색과 함께 있을 때만 읽을 수 있어요. 하나를 지정하면 다른 하나도 확인하세요. WCAG는 본문 텍스트에 최소 4.5:1의 명도 대비를 요구해요. 텍스트는 상속받은 어두운 색을 유지하기 때문에, 어두운 배경에는 밝은 글자 색을 직접 지정해야 해요.

자주 하는 실수

bgcolor 쓰기. 폐기됐어요. background-color를 쓰세요.
비쳐 보이는 배경에 opacity 쓰기. 콘텐츠도 흐려져요. 알파 색을 쓰세요.
background-image 뒤에 background 단축 속성. 이미지가 초기화돼요. 대신 background-color를 쓰세요.
margin에 색이 보일 거라고 기대하기. margin은 배경 바깥이에요. 색이 있는 공간에는 padding을 쓰세요.
기본 글자 색에 어두운 배경. 밝은 color도 함께 지정하세요.

자주 묻는 질문

HTML에서 배경색은 어떻게 바꾸나요?

CSS background-color 속성을 써요. 페이지 전체라면 body { background-color: #f3f4f6; }, 요소 하나라면 <div style="background-color: #fef3c7;">예요.

HTML에서 bgcolor는 아직 유효한가요?

아니요. <body>, <table>, <td>의 bgcolor 속성은 HTML5에서 폐기됐어요. 브라우저가 옛 페이지를 위해 여전히 그려 주지만, 올바른 방법은 CSS의 background-color예요.

배경색을 투명하게 만들려면 어떻게 하나요?

background-color: rgb(37 99 235 / 20%);처럼 알파 채널이 있는 색을 써요. opacity와 달리 안쪽 텍스트는 완전히 선명하게 유지돼요.

background와 background-color는 무엇이 다른가요?

background-color는 색만 정해요. background는 모든 배경 속성(color, image, position, size, repeat, attachment, origin, clip)의 단축 속성이라서, background: red;는 배경 이미지도 none으로 초기화해요.

body 배경색이 창 전체를 채우는 이유는 무엇인가요?

<html> 요소에 자기 배경이 없으면 브라우저는 body의 배경을 body 상자 너머 캔버스 전체에 칠해요. 둘을 다르게 하고 싶다면 html에 배경을 주세요.