backgroundClip 속성은 배경(이미지 또는 색상)이 요소 내에서 어디까지 그려질지를 결정하는, 즉 배경의 페인팅 영역(painting area)을 제어하는 속성입니다. 이 속성을 사용하면 해당 영역을 설정하거나 현재 값을 가져올 수 있습니다.
문법(Syntax)
backgroundClip 속성을 설정하는 기본 문법은 다음과 같습니다.
background-clip: border-box | padding-box | content-box
속성 값
backgroundClip 속성에 사용할 수 있는 값은 다음과 같습니다.
| 번호 | 값 및 설명 |
|---|---|
| 1 | border-box 배경이 테두리(border) 영역까지 확장되어 그려집니다. 기본값(default)입니다. |
| 2 | padding-box 배경이 패딩(padding) 영역까지만 그려지고, 테두리 아래쪽은 잘립니다. |
| 3 | content-box 배경이 콘텐츠(content) 영역 안에서만 그려지며, 패딩과 테두리 부분은 모두 잘립니다. |
예제
다음은 backgroundClip 속성의 동작을 확인할 수 있는 예제입니다. 버튼을 클릭하면 자바스크립트를 통해 배경 클리핑 값이 동적으로 변경됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
#one {
box-shadow: 0 0 2px black;
padding: 18px;
background: skyblue;
background-clip: content-box;
}
</style>
<script>
function changeBackClip(){
document.getElementById("one").style.backgroundClip = "padding-box";
document.getElementById("Sample").innerHTML = "배경 클립 속성이 이제 padding-box로 변경되었습니다.";
}
</script>
</head>
<body>
<div id="one">
Phasellus eu justo lectus. Praesent et nulla facilisis, venenatis justo eget, tempor lectus.
Integer ut felis vel lectus convallis fermentum. Fusce ut felis mauris.</div>
<p>아래 버튼을 클릭하면 위 div의 background-clip 값이 변경됩니다.</p>
<button onclick="changeBackClip()">CHANGE CLIP</button>
<p id="Sample"></p>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CHANGE CLIP 버튼을 클릭한 후의 결과는 다음과 같습니다. 배경이 패딩 영역까지 확장되어 그려지는 것을 확인할 수 있습니다.
