만약 특정 영역 전체가 아닌 padding 값을 준 테두리 부분을 제외하고 배경색을 지정하고 싶은 경우 어떻게 해야할까요? 즉 패딩값이 적용되지 않은 콘텐츠 영역만 테두리 색을 지정하는 방법입니다. padding 값에 색을 지정할지 말지를 결정하기 위해 background-clip 속성을 사용합니다.

background-clip: content-box;

그럼 이 속성을 사용하기 이전과 사용 후의 모습을 비교할 필요가 있겠습니다.

# 사용 전...



<body>
<div class='test'>
test
</div>
</body>

<style>
.test {
padding: 5px;
width: 100px;
height: 50px;
background-color: #fa8;
border: 1px solid #000;
}
</style>


test


# 사용 후...



<body>
<div class='test'>
test
</div>
</body>

<style>
.test {
padding: 5px;
width: 100px;
height: 50px;
background-color: #fa8;
border: 1px solid #000;

background-clip: content-box;
}
</style>


test