CSS3 background-clip, background-origin 사용법과 속성과 차이점 알아보기

지난시간에 이어서 계속 백그라운드 속성에 대한 방법을 설명드리고 있습니다. 이번에는 백그라운드에 색상을 입력한 상황과, 이미지로 설정한 상황에서의 적용 위치에 대한 설명입니다. 큰 차이는 없지만 미묘한 차이점은 있습니다. 한번 잘 봐주시면 감사하겠습니다.


background-clip 을 알아보자

만약 백그라운드를 이미지를 사용하지 않고, 16진수의 색상코드를 사용해서 지정하셨다면 background-clip을 사용해서 적용 범위를 설정할 수 있습니다. 또한 다음의 세가지 속성을 적용시켜서 어디까지 적용되게 할지를 정할 수 있습니다. 각 요소에 대한 설명은 다음과 같습니다.


background-clip: border-box; ▶ 박스 테두리까지 포함하여 적용됨

background-clip: padding-box; ▶ 테두리를 제외한 박스의 안쪽 영역부터 적용됨

background-clip: content-box; ▶ 콘텐츠 부분에만 적용됨 (텍스트의 경우라면 글씨에만 적용)


여기서 굵게 작성된 부분은 잠시 뒤에 background-origin 에서도 동일하게 사용되므로 잘 기억해 두시면 되시겠습니다.


    

background-clip

일주일이 너무나 빨리 가는구나! 벌써 월요일이라니... ㅠㅠ
일주일이 너무나 빨리 가는구나! 벌써 월요일이라니... ㅠㅠ
일주일이 너무나 빨리 가는구나! 벌써 월요일이라니... ㅠㅠ

먼저 html 본문의 div를 구성하고 안쪽에 p태그로 글씨를 넣었습니다. 다음은 CSS 스타일 부분입니다.


div {
    margin-bottom: 20px;
    width: 350px;
    padding: 25px;
}

#clip > div {
    border: 5px dashed #123;
    background: orange;
    /*background-clip*/
}

#clip .ori1 {
    background-clip: border-box;
}

#clip .ori2 {
    background-clip: padding-box;
}

#clip .ori3 {
    background-clip: content-box;
}

이렇게 마크업 되어 있습니다. 차이점은 잠시뒤에 origin을 같이 설명드리고나서 한꺼번에 확인시켜 드리도록 하겠습니다.


background-origin 을 알아보자

만약 div 상자의 배경을 이미지로 넣어주셨다면 이 속성을 적용시켜서 어디까지 영역을 적용시킬지에 대해 결정하실 수 있습니다. 방법은 clip과 동일합니다. 그럼 바로 html 마크업 상태를 살펴보시겠습니다.


background-origin

일주일이 너무나 빨리 가는구나! 벌써 월요일이라니... ㅠㅠ
일주일이 너무나 빨리 가는구나! 벌써 월요일이라니... ㅠㅠ
일주일이 너무나 빨리 가는구나! 벌써 월요일이라니... ㅠㅠ

이렇게 마크업했고요, 스타일 부분을 적용시키기전에 이미지가 한 장 필요하므로 여기에 올려두도록 하겠습니다.



테스트 이미지테스트용 이미지


네. 여기에 이렇게 올려두었고, 경로는 현재 위의 이미지 경로를 지정해 주었습니다. 여러분들께서는 각자 이미지 주소를 적용시켜주시면 됩니다.


div {
    margin-bottom: 20px;
    width: 350px;
    padding: 25px;
}

#origin > div {
    border: 5px dashed #138535;
    background: url(이미지경로) no-repeat;
}

#origin .ori4 {
    background-origin: border-box;
}

#origin .ori5 {
    background-origin: padding-box;
}

#origin .ori6 {
    background-origin: content-box;
}

CSS 스타일 상태는 이미지 주소 부분만 다르고 나머지는 같습니다. 이제 결과를 살펴보겠습니다.


See the Pen background-clip / origin by rgy0409 (@rgy0409) on CodePen.

차이점이 눈에 보이십니까? border-box를 사용하고 padding-box, content-box를 사용함에 따라 적용되는 영역이 달라지는것을 확인하실 수 있습니다. 그리고 서두에서 말씀 드렸듯 배경을 16진수 컬러를 사용한다면 clip을, 이미지를 사용하신다면 origin을 써서 적용시킨다는 차이점도 인지하고 계신다면 나중에 적용함에 있어서 어려움은 없을 것 입니다. 끝.



"친절한효자손 취미생활" 을 검색!


이 글을 공유하기

댓글(0)

Designed by JB FACTORY