목차
- box-decoration-break 예제 - <span> 요소 경우
- box-decoration-break 정의
- box-decoration-break 구문
- box-decoration-break 예제 - <div> 요소 경우
box-decoration-break 예제 - <span> 요소 경우
<style>
span {
border: 5px solid red;
padding: 0em 1em;
border-radius: 20px;
font-size: 26px;
line-height: 2;
}
span.hz1 {
-webkit-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
}
span.hz2 {
-webkit-box-decoration-break: slice;
-o-box-decoration-break: slice;
box-decoration-break: slice;
}
</style>
<span class="hz1">홈짱닷컴<br>Homzzang.com<br>홈페이지 제작관리</span><br><br><br>
<span class="hz2">홈짱닷컴<br>Homzzang.com<br>홈페이지 제작관리</span>
결과보기
box-decoration-break 정의
요소 상자가 여러 줄, 열, 페이지에 걸쳐 파편화(=분할)될 때, 요소 조각이 렌더링되어야 하는 방법을 지정. (아래 속성들에 영향 미침.)
1.
모든 요소에 대해 적용 가능하나, 특히 인라인요소(예: <span>)에서 극적인 효과를 볼 수 있음.
2.
- 기본값: slice
- 상속여부: X
- 애니가능: X
- CSS버전: CSS3
- JS구문: object.style.boxDecorationBreak = "clone";
3.
IE 제외한 주요 최신 브라주저 지원.
단, Firefox, Safari, Opera 브라우저 경우, -webkit- 접두어 필요.
4. MDN box-decoration-break 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break
box-decoration-break 구문
selector {box-decoration-break: slice|clone|initial|inherit|unset;}
[속성값]
slice
상자 장식은 요소 전체에 적용되며, 요소 조각의 가장자리에서 끊어짐. (기본값)
clone
상자 장식은 마치 조각이 개별 요소인 것처럼 요소의 각 조각에 적용되며, 테두리는 각 조각의 네 가장자리를 감싸고 배경은 각 조각에 대해 완전히 다시 그려짐.
initial
이 속성의 기본값 사용.
inherit
부모요소의 속성값 상속.
box-decoration-break 예제 - <div> 요소 경우
<style>
div {
border: 5px solid red;
padding: 0em 1em;
border-radius: 20px;
font-size: 26px;
line-height: 2;
}
div.hz1 {
-webkit-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
}
div.hz2 {
-webkit-box-decoration-break: slice;
-o-box-decoration-break: slice;
box-decoration-break: slice;
}
</style>
<div class="hz1">홈짱닷컴<br>Homzzang.com<br>홈페이지 제작관리</div><br>
<div class="hz2">홈짱닷컴<br>Homzzang.com<br>홈페이지 제작관리</div>
결과보기
