개발노트
부트스트랩5 인쇄 페이지 나누기 완벽 가이드 (CSS page-break)
부트스트랩 인쇄 페이지나누기 CSS pagebreak 프린트
CSS
2025.08.26 95 회 읽음
CSS
25.08.26 95
페이지 나누기 클래스 추가하기
가장 간단한 방법은 페이지 나누기를 위한 별도의 CSS 클래스를 만들어 사용하는 것입니다.
1. CSS 파일 생성 또는 기존 파일에 추가
가지고 있는 CSS 파일(예: styles.css)에 아래 코드를 추가합니다.
@media print {
.page-break {
page-break-after: always;
break-after: page; /* 최신 브라우저 지원 */
}
}- @media print: 이 스타일이 인쇄할 때만 적용되도록 합니다. 화면에서는 보이지 않습니다.
- .page-break: 페이지를 나누고 싶은 요소에 적용할 클래스 이름입니다.
- page-break-after: always;: 이 클래스가 적용된 요소 다음에 항상 페이지가 나뉩니다.
- break-after: page;: page-break-after의 최신 표준 속성으로, 호환성을 위해 함께 사용하는 것이 좋습니다.
2. HTML에 클래스 적용
페이지를 나누고 싶은 위치의 HTML 요소에 page-break 클래스를 추가합니다.
아래 예시에서는 각 div 섹션이 인쇄 시 별도의 페이지에 인쇄됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>인쇄 페이지 나누기 예제</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container mt-5">
<section>
<h1>페이지 1</h1>
<p>이 내용은 첫 번째 페이지에 인쇄됩니다.</p>
</section>
<div class="page-break"></div>
<section>
<h1>페이지 2</h1>
<p>이 내용은 두 번째 페이지에 인쇄됩니다.</p>
</section>
<div class="page-break"></div>
<section>
<h1>페이지 3</h1>
<p>이 내용은 세 번째 페이지에 인쇄됩니다.</p>
</section>
</div>
</body>
</html>특정 요소마다 페이지 나누기
만약 특정 태그나 클래스가 사용될 때마다 페이지를 나누고 싶다면 아래와 같이 CSS를 적용할 수 있습니다.
예를 들어, section 태그가 끝날 때마다 페이지를 나누고 싶다면
@media print {
section {
page-break-after: always;
break-after: page;
}
}이 방법을 사용하면 HTML을 수정할 필요 없이 CSS만으로 여러 페이지를 자동으로 나눌 수 있어 편리합니다.
Tip : page-break-before: always; 속성을 사용하면 해당 요소 이전에 페이지를 나눌 수도 있습니다. 필요에 따라 선택하여 사용하세요.
인기글 목록
![[파이썬예제] 패키지 설치와 윈도우11에서 알림 띄우기](/thumb/story/2025/1745908580-3780.png/200)
25.04.29
![[Linux] 록키 리눅스 MySQL 삭제 후 MariaDB 설치하기 : Rocky Linux](/thumb/story/2025/1706681921-3496.png/200)
