@media print로 종이나 PDF에 불필요한 UI를 정리합니다.
인쇄 환경에서는 메뉴와 조작 버튼을 숨기고 링크 목적지, 페이지 나눔, 흑백 대비를 고려합니다. display:none으로 숨긴 정보는 인쇄 결과에서 완전히 사라지므로 핵심 콘텐츠까지 제거하지 않도록 미리보기로 확인합니다.
화면에서는 연한 초록 메뉴 띠와 완료 표시 버튼이 함께 보이지만, 인쇄할 때는 @media print 안의 규칙이 nav와 button을 display: none으로 빼고 .demo의 테두리도 지웁니다. 링크 뒤에는 ::after가 attr(href)로 읽은 주소를 괄호 안에 붙여, 종이에서도 참고 문서가 어느 주소인지 알 수 있습니다. body 배경을 흰색으로 둔 규칙은 배경 인쇄 설정을 켠 사용자에게도 옅은 초록 바탕이 찍히지 않게 합니다.
화면 밖의 출력 환경이나 크기가 정해진 미디어를 다룰 때 사용합니다. 원본 비율, 잘림, 인쇄 결과처럼 일반 화면에서 놓치기 쉬운 조건을 별도로 시험하세요.
화면 CSS가 그대로 인쇄된다고 가정하면 어두운 배경과 고정 요소가 잉크를 많이 쓰거나 내용을 가릴 수 있습니다.
직접 바꿔보세요브라우저 인쇄 미리보기에서 메뉴가 사라지고 링크 주소가 표시되는지 확인하세요.