[css]background-clip, background-orgin

※이지스 퍼블리싱에서 출판된 HTML + CSS +JAVASCRIPT 책을 보며 처음 보는 것들을 정리중

 

background-clip: border-box(기본값) | padding-box | content-box

박스모델 관점에서 배경의 적용 범위 지정

border-box : 테두리 까지 배경 적용

padding-box : 테두리를 제외한 패딩 범위 배경적용

content-box : 내용(컨텐츠) 부분만 배경적용
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

*box-sizing의 속성과 헷갈리지 말기...

box-sizing: content-box(기본값) | border-box

border-box: 테두리를 포함해 너비값 지정

content-box: 컨텐츠 영역만 너비값 지정

 {width :300px;}에 padding: 10px;을 주고 border: 2px을 주었을때

 content-box=> content범위+ padding10px*2 +border 2px*2  @실제 너비 == 300+20+4 =324

 border-box=> width:300px

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

 

---

background-orgin: content-box(기본값) | padding-box | border-box

배경이미지 적용범위 지정

content-box : 박스 모델에서 내용 부분에만 배경 이미지를 표시

padding-box : 박스 모델에서 패딩까지 배경 이미지를 표시

border-box : 박스 모델에서 테두리까지 배경 이미지를 표시

https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin

 

 

이 두 가지를 보다 보니 차이점을 찾을 수 가 없었다. 혹시 몰라서 구글에 검색해보니 아래의 링크에서 차이점을 찾을 수 있었다 

https://moo-you.tistory.com/428