CSS 인쇄: 초보자를 위한 종합 가이드

안녕하세요, 미래의 CSS 마에스트로 여러분! 오늘 우리는 CSS 인쇄의 fascinational한 세상으로 뛰어들어 보겠습니다. 여러분의 친절한 이웃 컴퓨터 교사로서, 이 여정을 함께 하게 되어 기쁩니다. 코드를 한 줄도 작성해 본 적이 없어도 걱정하지 마세요 - 우리는 매우 기본적인 것부터 시작하여 차근차근 올라갈 것입니다. 그러니 커피(또는 당신이 좋아하는 차)를 한 잔 마시고, 시작해 보세요!

CSS - Printing

CSS 인쇄 - 인쇄 스타일 시트 사용하기

어떤 웹페이지를 인쇄해 보았지만, 화면에서 보는 것과 전혀 다르게 나왔던 경험이 있나요? 그때 인쇄 스타일 시트가 구원자로 등장합니다! 이 것은 마치 웹 콘텐츠를 인쇄 친화적인 형식으로 변환하는 마법의 주문 같은 것입니다.

간단한 예제를 보겠습니다:

<head>
<link rel="stylesheet" type="text/css" href="screen.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>

이 코드에서 우리는 브라우저에게 화면과 인쇄를 위해 다른 스타일 시트를 사용하도록 지시하고 있습니다. media 속성이 우리의 비밀 무기입니다. 화면에서 페이지를 봤을 때는 screen.css를 사용하지만, 인쇄 버튼을 눌렀을 때는 print.css가 적용됩니다.

CSS 인쇄 - 미디어 쿼리와 @page 규칙 사용하기

이제 미디어 쿼리와 @page 규칙으로 우리의 게임을 레벨 업 시켜보겠습니다. 이 것들은 CSS 인쇄의 듀오 마법사입니다!

@media print {
body {
font-size: 12pt;
color: #000;
background-color: #fff;
}

@page {
margin: 1in;
}
}

이 코드는 "브라우저야, 인쇄할 때는 텍스트를 12pt로, 검정색에 하얀 배경으로, 각 쪽에 1인치의 여백을 주세요."라고 말합니다. @media print 부분이 우리의 미디어 쿼리이고, @page는 페이지 레이아웃을 설정합니다.

CSS 인쇄 - 인쇄 요청 감지하기

웹페이지가 누군가가 인쇄하려고 할 때 알 수 있었으면 멋질 것 같지 않나요? 그렇다면 이렇게 할 수 있습니다:

window.addEventListener('beforeprint', function() {
console.log('인쇄 중...');
});

window.addEventListener('afterprint', function() {
console.log('인쇄 완료');
});

이 자바스크립트 코드는 인쇄가 시작되고 끝나는 것을 귀 기울여 듣는 작은 스파이입니다. 마지막 순간의 조정에 매우 유용합니다!

CSS 인쇄 - @page 규칙 사용하기

@page 규칙은 인쇄된 페이지를 제어하는 마법의 지팡이입니다. 그것을 활용해 보겠습니다:

@page {
size: A4;
margin: 0;
}

@page :first {
margin-top: 2cm;
}

여기서 우리는 모든 페이지를 A4 크기로 설정하고 여백을 제거하며, 첫 페이지에는 특별히 2cm의 상단 여백을 주고 있습니다. 콘텐츠에 환영의 붉은 카펫을 깔아주는 것과 같습니다!

CSS 인쇄 - 미디어 쿼리 사용하기

@media를 이미 봤지만, 더 깊이 탐구해 보겠습니다:

@media print {
.no-print {
display: none;
}

a[href^="http"]:after {
content: " (" attr(href) ")";
}
}

이 코드는 클래스 no-print을 가진 요소를 숨기고, 외부 링크 뒤에 URL을 추가합니다. 인쇄를 위한 웹페이지를 정리해주는 개인 비서와 같습니다!

CSS 인쇄 - afterprint 이벤트 사용하기

우리의 작은 자바스크립트 스파이를 다시 한 번 활용해 보겠습니다:

window.addEventListener('afterprint', function() {
document.body.style.backgroundColor = 'lightblue';
alert('인쇄물을 즐기셨나요!');
});

이 코드는 인쇄 후 배경색을 푸른색으로 변경하고, 친절한 메시지를 띄웁니다. 사용자에게 작은 감사의 인사를 남기는 것과 같습니다!

CSS 인쇄 - 외부 스타일 시트에 링크하기

마지막으로, 외부 인쇄 스타일 시트에 링크하는 방법을 다시 요약해 보겠습니다:

<link rel="stylesheet" type="text/css" href="print.css" media="print">

이 줄은 인쇄 친화적인 웹페이지로 가는 금지 티켓입니다. print.css 파일을 만들어 인쇄 스타일을 추가하면 끝입니다!

방법	설명	예제
인쇄 스타일 시트	인쇄 미디어를 위한 별도의 CSS 파일	`<link rel="stylesheet" type="text/css" href="print.css" media="print">`
미디어 쿼리	인쇄 시 적용되는 CSS 규칙	`@media print { body { font-size: 12pt; } }`
@page 규칙	페이지 특정 속성을 제어	`@page { margin: 1in; }`
인쇄 요청 감지	인쇄 시도를 감지하는 자바스크립트	`window.addEventListener('beforeprint', function() { ... });`
afterprint 이벤트	인쇄 후 코드를 실행	`window.addEventListener('afterprint', function() { ... });`

그렇게 되면, 여러분은 CSS 인쇄의 세계로 첫 걸음을 뗐습니다. 연습이 완벽을 만든다는 것을 기억하고, 두려워 말고 실험해 보세요. 누가 알겠는가? 여러분이 인쇄 스타일시트의 picasso가 될 수 있을지도 모릅니다! 다음 번에 다시 만날 때까지, 즐겁게 코딩하세요!

Credits: Image by storyset