Background-Clip
: 요소 내에서 배경(색상 또는 이미지)가 확장되어야 하는 거리를 정의함.
background-clip: border-box; 테두리까지 확장됨
background-clip: padding-box; 패딩까지만 확장됨
background-clip: content-box; 컨텐츠까지만
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
#example1 {
border: 10px dotted black;
padding: 15px;
background-color: lightcoral;
/* 백그라운드클립은 여기 */
background-clip: border-box;
}
#example2 {
border: 10px dotted black;
padding: 15px;
background-color: lightcoral;
background-clip: padding-box;
}
#example3 {
border: 10px dotted black;
padding: 15px;
background-color: lightcoral;
background-clip: content-box;
}
</style>
</head>
<body>
<p>background-clip: border-box (this is default):</p>
<div id="example1">
<p>The background extends behind the border. 테두리까지 확장</p>
</div>
<p>background-clip: padding-box:</p>
<div id="example2">
<p>The background extends to the inside edge of the border. 엣지까지만 확장</p>
</div>
<p>background-clip: content-box:</p>
<div id="example3">
<p>The background extends to the edge of the content box. 콘텐츠까지만 확장</p>
</div>
</body>
</html>
'☁️ 구름 X kakao DeepDive > ☁️ HTML CSS JS' 카테고리의 다른 글
| [CSS] Flexbox(2) - Item속성 (0) | 2024.11.18 |
|---|---|
| [CSS] Flexbox(1) - Flex와 Container속성 (1) | 2024.11.18 |
| [CSS] 3일차 CSS정리 (CSS Box Model, Text 스타일링, Image, Input, Transform, animation CSS) (0) | 2024.11.17 |
| [JavaScript] 자바스크립트 (타입, 타입 변환), (연산 및 Math Object) (0) | 2024.11.16 |
| [CSS] 2일차 css 정리 (가상클래스, 가상요소) (0) | 2024.11.16 |
