우선 최소한의 작업을 위해 bootstrap을 이용하기로 하자.
https://standout.tistory.com/1074
개인 bootstrap stylesheet만들기
bootstrap을 통해 본인만의 stylesheet를 소유해보자. Bootstrap에 접속해 cdn 코드를 복붙한다. https://getbootstrap.com/ Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuil
standout.tistory.com
우선 전체 코드를 첨부한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.print{display: none;}
@page {
size: A4;
margin: 1cm;
}
@media print {
.container {font-size: 2rem;color: red;}
.print{display: block; color: blue;}
.btn{display: none;}
}
</style>
</head>
<body class="mt-5">
<div class="container">
<h1 class="mb-4">Print Test</h1>
<p>This is a sample HTML content for testing print styles.</p>
<button class="btn btn-primary" onclick="window.print()">Print</button>
</div>
<div class="print">
<h1 class="mb-4">Print Test</h1>
<p>This is a sample HTML content for testing print styles.</p>
</div>
</body>
</html>
window.print()시에 @page와 @media print를 적용하여 출력하도록 설정한다.
<button class="btn btn-primary" onclick="window.print()">Print</button>
출력용 레이아웃을 따로 나눠 출력해도 좋고,
기존 레이아웃에 포함시켜 추가해서 출력해도 좋다.
.print{display: none;}
@media print {
.print{display: block;}
.btn{display: none;}
}
완료.
'HTML·CSS' 카테고리의 다른 글
| Sass 기본사용법 (0) | 2024.06.27 |
|---|---|
| 크로스브라우징: @supports, 속성지원여부에 따른 브라우저별 CSS 스타일 적용하기 (0) | 2023.10.26 |
| <br>치기 귀찮을때, white-space 자동줄바꿈 (0) | 2023.07.18 |
| 로고png 블랙/화이트로 만들기, CSS filter (0) | 2023.07.12 |
| css 초기화, Eric Meyer’s Reset CSS,HTML5 Doctor Reset stylesheet (0) | 2023.05.10 |
