인쇄 스타일

개념 이해하기

인쇄 환경에서는 메뉴와 조작 버튼을 숨기고 링크 목적지, 페이지 나눔, 흑백 대비를 고려합니다. display:none으로 숨긴 정보는 인쇄 결과에서 완전히 사라지므로 핵심 콘텐츠까지 제거하지 않도록 미리보기로 확인합니다.

이번 예제의 출발점은 @media print { nav, button { display:none; } }입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.

화면 밖의 출력 환경이나 크기가 정해진 미디어를 다룰 때 사용합니다. 원본 비율, 잘림, 인쇄 결과처럼 일반 화면에서 놓치기 쉬운 조건을 별도로 시험하세요.

처음에는 예제를 그대로 확인한 다음 브라우저 인쇄 미리보기에서 메뉴가 사라지고 링크 주소가 표시되는지 확인하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.