[css] CSS - page-break-after 속성 - 지정요소 뒤에 페이지 분할 추가 (= page-break-after속성 = 페이지브레이크애프터속성) ※ 페이지 나누기

1. page-break-after 예제 - 지정요소 뒤에 페이지 분할 추가
2. page-break-after 정의
3. page-break-after 구문

주의: 이 속성은 break-after 속성에 의해 대체됨.

page-break-after 예제 - 지정요소 뒤에 페이지 분할 추가

 

@media print {

  footer {page-break-after: always;}

}

 

page-break-after 정의

 

지정요소 뒤에 '페이지 분할(=페이지 나누기)' 추가.

 

---

 

1.

• page-break-before, page-break-after, page-break-inside 속성 사용해, 인쇄 시 문서 동작 방식 지정 가능.
• 비어있는 <div> 요소나 position:absolute 설정된 요소엔 사용 불가.
• break-after 속성에 의해 대체됨.

 

2. page-break-after 속성값과 break-after 속성값 대응 차이 비교

• auto → auto
• left → left
• right → right
• avoid → avoid
• always → page

 

3.

• 기본값: auto
• 상속여부: X
• 애니가능: X
• CSS버전: CSS2
• JS구문: object.style.pageBreakAfter="always";

 

4.

거의 모든 브라우저 지원.

 

5. MDN page-break-after 예제보기

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

 

page-break-after 구문

 

selector {page-break-after: auto|always|avoid|left|right|initial|inherit;}

 

---

[속성값]

 

• auto - 브라우저가 '페이지분할' 자동 결정. (기본값)
• always - 지정요소 뒤에 '페이지분할' 항상 삽입.
• avoid - 가급적, 지정요소 뒤에서 페이지분할 회피.
• left - 다음 페이지가 왼쪽 페이지로 포맷되도록 요소 뒤에 페이지 분할 삽입..
• right - 다음 페이지가 오른쪽 페이지로 포맷되도록 요소 뒤에 페이지 분할 삽입.
• initial - 이 속성의 기본값 사용.
• inherit - 부모요소의 속성값 상속.