CSS 배경색(background-color) 및 범위 지정 방법

웹 페이지 전체에 백그라운드 색을 지정할 수 있지만 텍스트, 목록, 버튼 등 태그 요소에도 백그라운드 색을 지정할 수 있습니다. 그리고 백그라운드 색을 지정할 때 적용 범위도 조절할 수도 있습니다. 그럼 예제를 통해서 백그라운드 색 지정 및 범위를 조절하는 방법에 대해서 알아보죠.

▼ 백그라운드 색 지정 속성

속성	설명
background-color	배경색을 지정합니다.
background-clip	배경색의 범위를 지정합니다.

1. background-color 속성

☞ background-color 속성은 상속이 되지 않습니다. <p>, <h1>, <div> 등 태그 요소는 기본적으로 투명하므로 상속된 것처럼 보일 뿐입니다.

1. 예제 소스 코드

<!DOCTYPE html>
<html>
<head>
<title>백그라운드 색 지정</title>
<style>
body {
     background-color: rgb(147, 147, 151);
}
h1 {
     background-color: darkblue;
}
p {
     background-color: #fff;
}
</style>
</head>
<body>
     <h1>BlueShare 블로그</h1>
     <p>IT 정보, IT 공부, 생활 정보, 재테크 정보를 공유하는 블로그 입니다.</p>
</body>
</html>

2. 실행 결과 화면

2. background-clip 속성

[속성의 값]

① border-box : 외곽 테두리까지 적용합니다. 기본값입니다.

② padding-box : 외곽 테두리를 제외한 패딩 범위까지 적용합니다.

③ content-box : 내용 부분만 적용합니다.

▼ 박스 모델의 기본 요소

※ 크롬 개발자 도구 창에서는 요소를 클릭하면 바로 확인이 가능합니다.

크롬 브라우저 개발자 도구 창에서는 요소를 클릭하면 바로 확인이 가능합니다.

1. 예제 소스 코드

<!DOCTYPE html>
<html>
<head>
<title>백그라운드 색 범위 지정</title>
<style>
div {
     width: 300px;
     border: 5px dotted black;
     margin: 20px;
     padding: 20px;
     background-color: orange;
}
</style>
</head>
<body>
     <div style="background-clip: border-box;">BlueShare 블로그</div>
     <div style="background-clip: padding-box;">BlueShare 블로그</div>
     <div style="background-clip: content-box;">BlueShare 블로그</div>
</body>
</html>

2. 실행 결과 화면