[css] CSS - break-inside 속성 - 지정요소 내 (페이지중단/컬럼중단/영역중단) 발생 여부 지정 (= break-inside속성 = 브레이크인사이드속성)

1. break-inside 예제 - 지정요소 내에서 페이지나누기 회피
2. break-inside 정의
3. break-inside 구문

break-inside 예제 - 지정요소 내에서 페이지나누기 회피

(예) 인쇄 시, 이미지 페이지나누기 회피

 

@media print {

  img {

    display: block;

    break-inside: avoid;

  }

}

 

break-inside 정의

 

지정요소 내 (페이지나누기/컬럼나누기/영역나누기) 발생 여부 지정

 

---

 

1.

• CSS2의 page-break-inside 속성을 확장함.
• break-inside 사용하면 (이미지, 코드 조각, 표, 목록) 내부가 깨지지 않도록 브라우저에 지시 가능.

 

2.

• 기본값: auto
• 적용대상: block 레벨 요소
• 상속여부: X
• 애니가능: discrete (불연속) 방식
• CSS버전: CSS3
• JS구문: object.style.breakInside="avoid";

 

3.

IE10 이상 주요 최신 브라우저 모두 지원.

단, 속성값에 따라 지원 여부가 조금 다름.

 

4. MDN break-inside 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside

 

break-inside 구문

 

selector {break-inside: auto|avoid|avoid-column|avoid-page|avoid-region|initial|inherit;}

 

---

[속성값]

 

• auto - 브라우저가 페이지나누기 자동 결정. (기본값)
• avoid - 지정요소 내 '(페이지나누기/컬럼나누기/영역나누기)' 회피.
• avoid-column - 지정요소 내 '컬럼나누기' 회피.
• avoid-page - 지정요소 내 '페이지나누기' 회피.
• avoid-region - 지정요소 내 '영역나누기' 회피.
• initial - 이 속성의 기본값 사용.
• inherit - 부모요소의 속성값 상속.