Print

페이지 나누기

Html 화면에서는 분할되지 않고, Print 에만 페이지 넘기기 Tag

✅ page-break-* 속성 (페이지 분리 제어)

div가 인쇄시 새 페이지에서 시작되도록 하려면 page-break-before: always; 또는 break-before: page; 속성을 사용할 수 있습니다.

예:

💡 요약

목적사용법
특정 div만 출력@media print CSS로 숨김/표시 제어
새 페이지에서 출력page-break-before: always; 사용
새 창에서 인쇄JS로 window.open() 후 .print() 실행

HTML의 <div> 요소에 inline 스타일로 새 페이지에서 인쇄되도록 설정하려면 style 속성에 다음과 같이 직접 작성할 수 있습니다:

✅ 1. 새 페이지에서 출력되게 하는 속성 (inline 방식)

또는 일부 브라우저에서는 아래와 같은 대체 속성도 사용됩니다:

✅ 추가로 visibility 제어도 하고 싶을 때

예를 들어, 특정 div만 인쇄에 보이게 하고 싶다면 @media print를 사용하는 것이 좋지만, inline 스타일로는 아래처럼 활용할 수 있습니다:

⚠️ 참고 사항

  • page-break-before, page-break-after, break-before 등은 인쇄 모드에서만 적용되며, 화면에서는 변화가 없습니다.
  • 최신 브라우저는 break-before: page를 선호하며, 구버전은 page-break-before: always를 더 잘 지원합니다.
  • 완벽한 제어를 위해서는 @media print 사용이 가장 안정적입니다.

table 요소에도 page-break-before, page-break-after, break-before 등의 속성을 inline 스타일로 적용 가능하며, 인쇄 시 새 페이지에서 시작하거나, 페이지 구분이 가능합니다.

✅ 1. table을 인쇄 시 새 페이지에서 시작하도록

또는 최신 브라우저 기준:

✅ 2. table이 끝난 뒤에 다음 내용이 새 페이지에서 시작되게

✅ 3. 행(row) 단위로 페이지 분리도 가능

테이블이 너무 길어 페이지가 넘칠 경우, 특정 tr에도 사용할 수 있지만, 일부 브라우저에서는 제한적입니다: