프로그래밍/css 기초

CSS 기초 공부(12) - background-clip

lamarcK 2025. 3. 11. 22:15

background-clip이란 무엇일까?

background-clip은 CSS 속성으로, 요소의 배경이 어디까지 표시될지를 결정하는 속성이다.

간단하게 용어를 정의하자면 clip은 잘라내다라는 의미다.

유튜브 클립, 네이버 클립이 영상의 일부분 만을 잘라서 보여주0는 것처럼 background-clip은 배경의 일부분을 잘라낸다는 의미이다.

 

background-clip의 속성은 border-box, padding-box, content-box 등이 있는데

 

각 값의 의미는 다음과 같다.

  • border-box : 배경 이미지를 테두리 영역까지 "잘라낸다."
  • padding-box : 배경 이미지를 패딩 영역까지 "잘라낸다."
  • content-box : 배경 이미지를 내용 영역까지 "잘라낸다."
  • text : 배경 이미지를 텍스트 모양에 맞춰 "잘라낸다."

즉, 배경이 요소의 어떤 부분까지 채워질지를 제어하는 속성이라고 할 수 있다.

각각의 값은 예시를 통해서 보는 편이 이해가 쉽다.

.box1 {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 10px dashed red;
  margin: 10px;
  background: linear-gradient(to right, yellow, orange);
  
}
.box2{
  background: linear-gradient(to right, blue,red);
}

.box1.border-box { background-clip: border-box; }
.box1.padding-box { background-clip: padding-box; }
.box1.content-box { background-clip: content-box; }
.box2.text1 { background-clip:text;
  color: transparent;
}
<body>
  <div class="box1 border-box">1번
  </div>
  <div class="box1 padding-box">2번
  </div>
  <div class="box1 content-box">3번
  </div>
  <div class="box2 text1">4번인데 배경을 보여주기 위해 길어짐
  </div>
  <span class="box2 text1">5번인데 배경을 보여주기 위해 길어짐
  </span>
  </body>

 

각각의 예시에 따라 설명을 해보자면

  • 1번은 background-clip: border-box 속성에 의해서 배경이 테두리 영역까지 채워진 것을 볼 수 있다.
  • 2번은 background-clip: padding-box 속성에 의해서 배경이 패딩 영역까지 채워진 것을 볼 수 있다. 해당 박스의 패딩은 20px인데 2번이라는 텍스트는 내부 여백에 따라 테두리에서 멀어졌지만 배경은 그대로 테두리 안쪽을 채우고 있는 것을 볼 수 있다.
  • 3번은 background-clip: content-box 속성에 의해 배경이 내용 영역까지 채워진 것을 볼 수 있다. 즉 박스의 크기 200px에서 패딩 영역 20px을 제외한 180px의 영역까지 배경이 채워진 것이다.
  • 4번은 background-clip:text 속성에 의해 배경이 텍스트 모양대로 채워진 것을 볼 수 있다. 여기서 중요한 점은 '텍스트 모양대로'라는 점이다. 때문에 텍스트가 색상이 있다면 배경을 가려서 보이지 않는다. 때문에 텍스트의 색상을 필히 투명으로 지정되야 한다.
  • 5번은 4번과 마찬가지로  background-clip:text 속성에 의해 배경이 텍스트 모양대로 채워진 것을 볼 수 있다. 

 

 

 

 

문제 1 : 4번과 5번의 색상이 다르다.

여기서 4번과 5번 모두 동일한 속성을 적용 받았는데 색상이 다른 것을 확인할 수 있다.

이것은 4번은 <div> 태그인데 5번은 <span> 태그여서 벌어지는 차이다.

<div> 태그는 블록 태그이기 때문에 가로줄 전체를 차지한다. 때문에 브라우저의 가로줄 만큼이 전체 영역이다.

반면 <span> 태그는 인라인 태그이기 때문에 내용의 영역 만큼을 차지하고 있다.

 

이해를 돕기 위해 테두리를 추가해 보았다.

div 태그를 사용한 4번은 브라우저의 가로 길이 만큼을 차지하고 있기 때문에 그라데이션이 제대로 적용되지 않고 있는 것이다. 즉 오른쪽 끝으로 가면 빨간색으로 바뀌는 것은 동일하지만 아직 초반부여서 파란색으로만 색상이 표시되는 것이다.

반면 span 태그를 사용한 5번은 전체 영역이 텍스트 길이만큼이기 때문에 그라데이션이 정상적으로 적용되고 있다.

 

이런 경우 그냥 브라우저의 크기를 줄여서 4번의 영역을 줄여주면 정상적으로 작동하게 된다. 하지만 매번 브라우저의 길이를 줄였다 늘였다 할 수는 없는 법이다.

해결법 1

이 경우엔 css에 width: fit-content; 속성을 추가해서 영역을 콘텐츠 길이만큼으로 줄여주면 된다.

.box2{
  background: linear-gradient(to right, blue,red);
  border: 1px solid black;
  margin: 5px;
  width: fit-content;
}

그러면 이처럼 동일하게 적용되는 것을 볼 수 있다.