728x90 300x250 SMALL background-origin2 background-clip background-origin 차이 background-clip과 background-origin은 언뜻 비슷해 보입니다. 둘 다 border-box, padding-box, content-box 이 세가지 옵션을 가지고 있고 경우에 따라서는 결과값이 같게 나타나기 때문에 차이가 없어 보일 수 있습니다. 하지만 background-clip과 background-origin은 어면히 다른 기준을 가지고 백그라운드를 설정합니다. background-origin 배경 위치 시작점을 결정 background-clip 배경이미지를 잘라낼 위치 결정 border-box background-clip border-box는 background-origin의 기본값이 padding-box 이기 때문에 background-clip예제에서 패딩 값부터 시작하기.. 2021. 12. 23. background-origin 속성 background-origin 배경 이미지를 위치를 지정할 기준점을 지정해주는 속성 background-origin : border-box 박스 모델의 테두리를 기준 .bg { background: url("../img/bike.jpg"); color: transparent; border: 10px dashed #000; padding: 30px; font-size: 50px; font-weight: 600; background-origin: border-box; background-repeat: no-repeat; } background-origin : padding-box 박스 모델의 테두리를 뺀 패딩 시작 지점이 기준 .bg { background: url("../img/bike.jpg"); co.. 2021. 12. 19. 이전 1 다음 728x90 반응형 LIST