CSS break-before 속성

정의와 사용법

break-before 속성은 지정된 요소 전에 페이지 분리(page-break), 열 분리(column-break) 또는 영역 분리(region-break)가 발생할지 여부를 정의합니다.

break-before 속성은 CSS2의 page-break-before 속성을 확장합니다.

break-before를 사용하여, 브라우저가 break-after 속성을 가진 요소 전에 페이지, 열 또는 영역을 분리하거나 요소를 두 페이지에 걸쳐 분리하지 않도록 명시할 수 있습니다.

예제

상단 <h1> 요소 전에 페이지 분리 기호를 삽입합니다：

@media print {
  h1 {
    break-before: always;
  }
}

CSS 문법

break-before: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit;

속성 값

값 설명
자동 기본. 요소 앞에 자동으로 페이지, 열, 구분을 수행합니다.
all 주체 상자 앞에 즉시 페이지 기호를 삽입합니다.
always 상시로 요소 앞에 페이지 기호(page-break)를 삽입합니다.
avoid 요소 앞에 페이지, 열, 구역 중단을 피합니다.
avoid-column 요소 앞에 열을 피합니다.
avoid-page 요소 앞에 페이지를 피합니다.
avoid-region 요소 앞에 구분을 피합니다.
column 상시로 요소 앞에 열 기호를 삽입합니다.
left 다음 페이지를 왼쪽 페이지로 형식화하려면 요소 앞에 하나나 두 개의 페이지 기호를 삽입합니다.
page 상시로 요소 앞에 페이지 기호를 삽입합니다.
recto 다음 페이지를 recto 페이지로 형식화하려면 주체 상자 앞에 하나나 두 개의 페이지 기호를 삽입합니다.
region 상시로 요소 앞에 구분 기호를 삽입합니다.
right 다음 페이지를 오른쪽 페이지로 형식화하려면 요소 앞에 하나나 두 개의 페이지 기호를 삽입합니다.
verso 다음 페이지를 verso 페이지로 형식화하려면 주체 상자 앞에 하나나 두 개의 페이지 기호를 삽입합니다.
기본 값 이 속성을 기본 값으로 설정합니다. 참조: 기본 값。
상속 부모 요소에서 이 속성을 상속합니다. 참조: 상속。

기술 세부 사항

기본 값: 자동
상속: 아니요
애니메이션 제작: 지원하지 않습니다. 참조:애니메이션 관련 속성。
버전: CSS3
JavaScript 문법: object.style.breakBefore="always"

더 많은 예제

예제

모든 새로운 장이 인쇄될 때마다 올바른 페이지(예: 책)에서 시작되도록 보장하기 위해 모든 <h1> 요소에 break-before:를 사용할 수 있습니다:

@media print {
  h1 {
    break-before: right;
  }
}

예제

상시로 region 내 <ul> 앞에 region-break를 삽입합니다:

.region ul {
    break-before: region;
  }
}

브라우저 지원

표中的 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

Chrome IE / Edge Firefox Safari Opera
50.0 10.0 65.0 10.0 37.0