CSS break-after 속성

정의와 사용법

브릭-아웃 속성은 지정된 요소 뒤에 페이지(페이지-브릭), 열(열-브릭) 또는 영역(영역-브릭)이 발생할지 여부를 정의합니다.

브릭-아웃 속성은 CSS2의 페이지-브릭-아フ터 속성을 확장했습니다.

브릭-아웃을 사용하여, 브라우저가 브릭-아웃 속성을 가진 요소 뒤에 페이지, 열 또는 영역을 중단하거나 요소를 분할하여 두 페이지에 걸쳐 표시하지 않도록 알릴 수 있습니다.

예제

항상 <footer> 요소 앞에 페이지 분할 기호를 삽입하세요:

@media print {
  footer {
    break-after: always;
  }
}

CSS 문법

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

속성 값

값 설명
auto 기본. 요소 뒤에 자동으로 페이지, 열, 분할을 수행합니다.
all 본문 상자 뒤에 즉시 페이지 분할 기호를 삽입하세요.
always 항상 요소 뒤에 페이지 분할 기호를 삽입하세요.
avoid 요소 뒤에 페이지, 열, 영역 중단을 피하세요.
avoid-column 요소 뒤에 열 분할을 피하세요.
avoid-page 요소 뒤에 페이지 분할을 피하세요.
avoid-region 요소 뒤에 분할을 피하세요.
column 항상 요소 뒤에 열 기호를 삽입하세요.
left 요소 뒤에 한 개나 두 개의 페이지 분할 기호를 삽입하여 다음 페이지를 왼쪽 페이지로 포맷화하세요.
page 항상 요소 뒤에 페이지 분할을 삽입하세요.
recto 본문 상자 뒤에 한 개나 두 개의 페이지 분할 기호를 삽입하여 다음 페이지를 recto 페이지로 포맷화하세요.
region 항상 요소 뒤에 분할 기호를 삽입하세요.
right 요소 뒤에 한 개나 두 개의 페이지 분할 기호를 삽입하여 다음 페이지를 오른쪽 페이지로 포맷화하세요.
verso 본문 상자 뒤에 한 개나 두 개의 페이지 분할 기호를 삽입하여 다음 페이지를 verso 페이지로 포맷화하세요.
initial 이 속성을 기본 값으로 설정합니다. 참조 initial。
inherit 부모 요소에서 이 속성을 thừa kế합니다. 참조 inherit。

기술 세부 사항

기본 값: auto
thừa kế: 아니요
애니메이션 제작: 지원하지 않습니다. 참조:애니메이션 관련 속성。
버전: CSS3
JavaScript 문법: object.style.breakAfter="always"

추가 예제

예제

항상 id가 "toc"인 요소 뒤에 페이지 분할 기호를 삽입하세요:

@media print {
  #toc {
    break-after: always;
  }
}

예제

항상 특정 영역 내의 <ul> 요소 뒤에 분할 기호를 삽입하세요:

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

브라우저 지원

테이블의 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 기재했습니다.

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