웹 페이지 인쇄 시 특정 요소를 숨기는 방법

웹 페이지를 인쇄할 때 버튼, 광고, 내비게이션 메뉴처럼 화면에는 필요하지만 종이에는 불필요한 요소가 있을 수 있습니다. 이런 요소들은 CSS의 @media print 미디어 쿼리를 활용하면 간단하게 숨길 수 있습니다.

1. 인쇄용 CSS 스타일 작성하기

먼저 <style> 태그 안에 @media print 규칙을 추가하고, 숨기고 싶은 요소에 display: none 속성을 지정합니다.

<style>
@media print {
    .noprint {
        display: none;
    }
}
</style>

참고: visibility: hidden을 사용할 수도 있습니다. 두 속성의 차이는 다음과 같습니다.

• display: none — 요소가 완전히 제거된 것처럼 처리되어 해당 공간 자체가 사라집니다. 레이아웃이 재배치됩니다.
• visibility: hidden — 요소는 보이지 않지만 원래 차지하던 공간은 그대로 유지됩니다. 빈 여백이 남습니다.

인쇄 시 깔끔한 레이아웃을 원한다면 대부분 display: none을 사용하는 것이 좋습니다.

2. 숨길 요소에 클래스 적용하기

다음으로, 인쇄에서 제외하고 싶은 콘텐츠를 해당 클래스가 지정된 <div>로 감싸줍니다.

<div class="noprint">
    여기에 인쇄 시 숨기고 싶은 요소를 넣습니다.
</div>

3. 동작 방식

이렇게 설정하면 화면에서는 해당 요소가 정상적으로 표시되지만, 사용자가 브라우저의 인쇄 기능(Ctrl+P / Cmd+P)을 실행하면 .noprint 클래스가 적용된 영역은 인쇄물에서 자동으로 제외됩니다.

추가 팁

• 여러 요소에 동일하게 적용하려면 클래스(.noprint)를 사용하고, 특정 하나의 요소만 숨기려면 아이디(#noprint)를 사용해도 됩니다.
• 인쇄 전용 스타일을 별도 파일로 관리하려면 <link rel="stylesheet" href="print.css" media="print">처럼 외부 CSS 파일을 연결하는 방법도 좋습니다.
• 반대로 화면에는 숨기고 인쇄할 때만 보여야 하는 요소(예: 출처 표기, 로고)는 @media screen에서 숨기고 @media print에서 표시하도록 설정하면 됩니다.