[box] CSS - box-decoration-break 속성 - 요소 상자 깨지는 방식 지정 (= box-decoration-break속성 = 박스데커레이션브레이크속성) ※ 요소상자의 (깨짐/파편화/분할) 방식 지정

1. box-decoration-break 예제 - <span> 요소 경우
2. box-decoration-break 정의
3. box-decoration-break 구문
4. 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 정의

 

요소 상자가 여러 줄, 열, 페이지에 걸쳐 파편화(=분할)될 때, 요소 조각이 렌더링되어야 하는 방법을 지정. (아래 속성들에 영향 미침.)

• background 속성 - 배경.
• border 속성 - 테두리
• border-image 속성 - 테두리 이미지
• box-shadow 속성 - 상자 그림자
• clip-path 속성 - 자르기 방식 (= 보여질 범위) 지정.
• margin 속성 - 바깥 여백
• padding 속성 - 안 여백

 

---

 

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>

 

결과보기