개발노트
부트스트랩5 인쇄 페이지 나누기 완벽 가이드 (CSS page-break)
부트스트랩 인쇄 페이지나누기 CSS pagebreak 프린트
CSS
2025.08.26 15 회 읽음
CSS
3일 전 15
페이지 나누기 클래스 추가하기
가장 간단한 방법은 페이지 나누기를 위한 별도의 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)