JavaScript로 배경의 페인팅 영역 설정하기
JavaScript에서 요소 배경의 페인팅(그리기) 영역을 설정하려면 backgroundClip 속성을 사용하면 됩니다. 이 속성은 CSS의 background-clip 속성에 대응하며, 배경색이나 배경 이미지가 어느 영역까지 확장되어 표시될지를 결정합니다.
backgroundClip 속성의 주요 값
- border-box — 테두리(border) 영역까지 배경이 적용됩니다. (기본값)
- padding-box — 안쪽 여백(padding) 영역까지만 배경이 적용되고, 테두리 아래에는 배경이 그려지지 않습니다.
- content-box — 실제 콘텐츠가 표시되는 영역에만 배경이 적용됩니다.
아래 예제는 버튼을 클릭하면 display() 함수가 실행되어 박스의 배경 페인팅 영역을 content-box로 변경하는 코드입니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 2px dashed green;
padding: 35px;
width: 600px;
height: 400px;
background-color: blue;
background-clip: border-box;
}
</style>
</head>
<body>
<button onclick="display()">페인팅 영역 설정</button>
<div id="box">
데모 텍스트입니다! 데모 텍스트입니다! 데모 텍스트입니다!
데모 텍스트입니다! 데모 텍스트입니다!
</div>
<script>
function display() {
document.getElementById("box").style.backgroundClip = "content-box";
}
</script>
</body>
</html>코드 설명
위 예제에서 #box 요소는 초록색 점선 테두리와 35px의 안쪽 여백을 가지며, 처음에는 border-box 값으로 인해 파란 배경이 테두리 영역까지 채워집니다. 버튼을 클릭하면 JavaScript의 style.backgroundClip 속성이 content-box로 변경되어, 배경이 안쪽 여백과 테두리를 제외한 콘텐츠 영역에만 표시됩니다. 이를 통해 배경이 그려지는 범위를 동적으로 제어할 수 있습니다.