CSS3 background-clip, background-origin 사용법과 속성과 차이점 알아보기
지난시간에 이어서 계속 백그라운드 속성에 대한 방법을 설명드리고 있습니다. 이번에는 백그라운드에 색상을 입력한 상황과, 이미지로 설정한 상황에서의 적용 위치에 대한 설명입니다. 큰 차이는 없지만 미묘한 차이점은 있습니다. 한번 잘 봐주시면 감사하겠습니다.
background-clip 을 알아보자
만약 백그라운드를 이미지를 사용하지 않고, 16진수의 색상코드를 사용해서 지정하셨다면 background-clip을 사용해서 적용 범위를 설정할 수 있습니다. 또한 다음의 세가지 속성을 적용시켜서 어디까지 적용되게 할지를 정할 수 있습니다. 각 요소에 대한 설명은 다음과 같습니다.
background-clip: border-box; ▶ 박스 테두리까지 포함하여 적용됨
background-clip: padding-box; ▶ 테두리를 제외한 박스의 안쪽 영역부터 적용됨
background-clip: content-box; ▶ 콘텐츠 부분에만 적용됨 (텍스트의 경우라면 글씨에만 적용)
여기서 굵게 작성된 부분은 잠시 뒤에 background-origin 에서도 동일하게 사용되므로 잘 기억해 두시면 되시겠습니다.
<div id="clip">
<h1>background-clip</h1>
<div class="ori1">일주일이 너무나 빨리 가는구나! 벌써 월요일이라니... ㅠㅠ</div>
<div class="ori2">일주일이 너무나 빨리 가는구나! 벌써 월요일이라니... ㅠㅠ</div>
<div class="ori3">일주일이 너무나 빨리 가는구나! 벌써 월요일이라니... ㅠㅠ</div>
</div>
먼저 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 마크업 상태를 살펴보시겠습니다.
<div id="origin">
<h1>background-origin</h1>
<div class="ori4">일주일이 너무나 빨리 가는구나! 벌써 월요일이라니... ㅠㅠ</div>
<div class="ori5">일주일이 너무나 빨리 가는구나! 벌써 월요일이라니... ㅠㅠ</div>
<div class="ori6">일주일이 너무나 빨리 가는구나! 벌써 월요일이라니... ㅠㅠ</div>
</div>
이렇게 마크업했고요, 스타일 부분을 적용시키기전에 이미지가 한 장 필요하므로 여기에 올려두도록 하겠습니다.
네. 여기에 이렇게 올려두었고, 경로는 현재 위의 이미지 경로를 지정해 주었습니다. 여러분들께서는 각자 이미지 주소를 적용시켜주시면 됩니다.
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을 써서 적용시킨다는 차이점도 인지하고 계신다면 나중에 적용함에 있어서 어려움은 없을 것 입니다. 끝.
CSS3 Multi Background 멀티백그라운드 두가지 사용법
CSS3 백그라운드 요소: background-size 에서 contain, cover 원본비율, 중앙비율에 대하여
"친절한효자손 취미생활" 을 검색!
