배경을 넣고 싶은 요소들마다 속성을 입력하면 배경을 넣을 수 있지만 박스 모델 관점에서 배경 적용 범위를 조절할 수도 있습니다. 즉, 박스 모델의 가장 외곽인 테두리(border)까지 적용할지, 테두리를 빼고 패딩(padding) 범위까지 적용할지, 아니면 내용 부분에만 적용할지 선택할 수 있습니다.
background-clip
background-clip는 배경의 색을 어디서부터 넣을지 정하는 속성입니다.
기본형
background-clip : border-box | padding-box | content-box
- border-box : 테두리 영역과 그 안쪽 영역을 채웁니다.
- padding-box : 안쪽 여백 영역과 그 안쪽 영역을 채웁니다.
- content-box : 내용 영역과 그 안쪽 영역을 채웁니다.
예제
background-clip 속성 값에 따라 어디를 채우는지를 확인하는 예제입니다.
<div class="a">
테두리 부분까지 배경이 채워집니다.
</div>
<div class="b">
패딩 부분까지 배경이 채워집니다.
</div>
<div class="c">
콘텐츠 부분만 배경이 채워집니다.
</div>
div {
box-sizing: border-box;
text-align: center;
color: white;
width: 100%;
font-size: 16px;
margin: 40px 0px;
padding: 20px 0px;
border: 10px dotted #dddddd;
background-color: skyblue;
}
.a {
background-clip: border-box;
}
.b {
background-clip: padding-box;
}
.c {
background-clip: content-box;
}