CSS background-origin 속성으로 padding-box 값 설정하는 방법

```html

CSS background-origin 속성과 padding-box 값

CSS의 background-origin 속성은 요소의 배경 이미지가 어느 영역을 기준으로 시작할지 지정하는 속성입니다. 이 속성에 padding-box 값을 적용하면 배경 이미지가 패딩 영역(padding edge)의 왼쪽 위 모서리부터 그려집니다.

background-origin 속성에서 사용할 수 있는 값은 다음과 같습니다.

padding-box: 패딩 영역을 기준으로 배경이 배치됩니다. (기본값)
border-box: 테두리(border) 영역까지 배경이 확장되어 배치됩니다.
content-box: 실제 콘텐츠가 표시되는 영역 안에만 배경이 배치됩니다.

구현 예제

아래 예제는 하나의 배경 이미지에 세 가지 값을 각각 적용한 코드입니다. 파란색 테두리 요소에는 padding-box, 주황색 테두리 요소에는 border-box, 노란색 점선 테두리 요소에는 content-box 값이 사용되었습니다. 코드를 직접 실행해 보면 값에 따라 배경 이미지의 시작 위치가 어떻게 달라지는지 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         #value1 {
            border: 3px solid blue;
            padding: 30px;
            background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
            background-repeat: no-repeat;
            background-origin: padding-box;
         }
         #value2 {
            border: 3px solid orange;
            padding: 30px;
            background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
            background-repeat: no-repeat;
            background-origin: border-box;
         }
         #value3 {
            border: 3px dashed yellow;
            padding: 30px;
            background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
            background-repeat: no-repeat;
            background-origin: content-box;
         }
      </style>
   </head>
   <body>
      <h1>padding-box 값</h1>
      <div id='value1'>
         <h2>제목 2</h2>
         <p>샘플 텍스트입니다. 샘플 텍스트입니다. 샘플 텍스트입니다. 샘플 텍스트입니다. 샘플 텍스트입니다. 샘플 텍스트입니다.</p>
         <h3>제목 3</h3>
         <p>샘플 텍스트입니다. 샘플 텍스트입니다. 샘플 텍스트입니다. 샘플 텍스트입니다. 샘플 텍스트입니다.</p>
      </div>
      <h1>border-box 값</h1>
      <div id='value2'>
         <h2>제목 2</h2>
         <p>샘플 텍스트입니다. 샘플 텍스트입니다. 샘플 텍스트입니다. 샘플 텍스트입니다. 샘플 텍스트입니다. 샘플 텍스트입니다.</p>
         <h3>제목 3</h3>
         <p>샘플 텍스트입니다. 샘플 텍스트입니다. 샘플 텍스트입니다. 샘플 텍스트입니다. 샘플 텍스트입니다.</p>
      </div>
      <h1>content-box 값</h1>
      <div id='value3'>
         <h2>제목 2</h2>
         <p>샘플 텍스트입니다. 샘플 텍스트입니다. 샘플 텍스트입니다. 샘플 텍스트입니다. 샘플 텍스트입니다. 샘플 텍스트입니다.</p>
         <h3>제목 3</h3>
         <p>샘플 텍스트입니다. 샘플 텍스트입니다. 샘플 텍스트입니다. 샘플 텍스트입니다. 샘플 텍스트입니다.</p>
      </div>
   </body>
</html>

이처럼 background-origin 속성의 값을 변경하면 같은 배경 이미지라도 채워지는 시작 위치가 달라집니다. 배경이 테두리 아래까지 보이기를 원한다면 border-box를, 테두리와 패딩을 제외한 내용 영역에만 배경을 적용하고 싶다면 content-box를 사용하면 됩니다.