[CSS] page-break (after, before, inside) 속성

프린트 시 요소의 분할여부를 설정할 수 있는 css page-break-after/before/inside 속성을 알아보자!

page-break-after

요소의 이후 분할 여부

page-break-after: auto; //자동
page-break-after: always; //항상분할
page-break-after: avoid; //분할하지않음

See the Pen page-break-after by yelim (@yelm) on CodePen.

 

 

page-break-before

요소의 이전 분할 여부

page-break-before: auto; //자동
page-break-before: always; //항상분할
page-break-before: avoid; //분할하지않음

See the Pen page-break-before by yelim (@yelm) on CodePen.

 

 

page-break-inside

요소의 내부 분할 여부

page-break-inside: auto; //자동
page-break-inside: avoid; //분할하지않음

See the Pen page-break-inside by yelim (@yelm) on CodePen.

 

가장 많이 쓰이는 속성만 정리했고, 이외에 왼쪽페이지로 지정 등 다양한 기능이 있으니 아래 링크를 참고하자!

 

참고

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

page-break-after - CSS: Cascading Style Sheets | MDN

 

공부내용을 기록하는 블로그입니다.

피드백은 언제든지 환영합니다😊