CSS의 background-clip 속성은 요소의 배경(색상 또는 이미지)이 어느 영역까지 칠해질지, 즉 페인팅 영역(painting area)을 선언할 때 사용합니다. 이 속성을 활용하면 테두리, 패딩, 콘텐츠 영역 중 어디까지 배경이 적용될지 세밀하게 제어할 수 있습니다.
background-clip의 주요 값
- border-box (기본값): 테두리 영역까지 배경이 적용됩니다.
- padding-box: 테두리 내부의 패딩 영역까지만 배경이 적용됩니다.
- content-box: 콘텐츠 영역에만 배경이 적용됩니다.
아래 예제 코드를 실행하면 background-clip 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다. 이 예제에서는 padding-box 값을 사용하여 빨간색 점선 테두리 안쪽, 즉 패딩 영역까지만 주황색 배경이 채워지도록 설정했습니다.
예제 코드
<html>
<head>
<style>
#demo {
border: 5px dashed red;
padding: 10px;
background: orange;
background-clip: padding-box;
}
</style>
</head>
<body>
<div id="demo">
<h1>www.tutorialspoint.com</h1>
<p>Tutorials Point는 온라인 콘텐츠에 더 잘 반응하고, 자신의 공간에서 편안하게 자기 속도에 맞춰 새로운 기술을 배우고자 하는 독자층이 존재한다는 아이디어에서 출발했습니다. 2006년 HTML 단 하나의 튜토리얼로 여정을 시작한 이후, 뜨거운 반응에 힘입어 프로그래밍 언어부터 웹 디자인, 학문 분야까지 다양한 주제의 방대한 튜토리얼과 관련 자료를 꾸준히 추가해 왔습니다.</p>
</div>
</body>
</html>코드 설명
border: 5px dashed red;— 요소에 5px 두께의 빨간색 점선 테두리를 지정합니다.padding: 10px;— 콘텐츠와 테두리 사이에 10px의 안쪽 여백을 줍니다.background: orange;— 배경색을 주황색으로 설정합니다.background-clip: padding-box;— 배경이 테두리 아래까지는 확장되지 않고, 패딩 영역까지만 적용되도록 합니다.
만약 background-clip 값을 content-box로 변경하면 배경은 오직 텍스트가 있는 콘텐츠 영역에만 적용되며, 기본값인 border-box를 사용하면 점선 테두리 아래까지 배경이 채워지는 것을 확인할 수 있습니다. 이처럼 background-clip 속성을 활용하면 배경과 테두리, 여백 사이의 시각적 관계를 자유롭게 디자인할 수 있습니다.