웹사이트는 인쇄할 수 있어야 한다

웹페이지를 인쇄할 수 있다는 것과 읽기 좋은 인쇄물을 얻는 것은 다름. 직접 운영하는 사이트를 인쇄해 보니 글자가 너무 크고, 헤더와 흑백 링크의 가독성도 좋지 않았음 CSS의 @media print 로 인쇄 전용 스타일을 적용하고, 화면과 인쇄물에 표시할 요소를 따로 지정할 수 있음 인쇄용으로 글자 크기와 링크 색상을 조정했으며, 본문은 12pt, 제목은 그보다 크게 하고 링크는 검은색으로 바꿈 코드 블록의 페이지 나눔은 해결하지 못함. 스타일을 손봐도 블록이 한 덩어리로 유지되며 페이지 경계에서 나뉘지 않는 문제가 남아 있음 단순한 사이트에서도 인쇄 최적화에 오전 시간의 상당 부분이 들었고 실제 인쇄 독자가 얼마나 될지도 불확실하지만, 텍스트를 선호하는 매체로 읽게 하는 배려는 가치가 있음 인쇄 전용 CSS로 바꾼 것 종이 문서에 직접 표시하며 읽는 방식이 개인적으로 더 몰입에 도움이 되어, 자신의 콘텐츠도 다른 사람이 인쇄물로 읽기 좋게 만들고자 함 CTRL-P 로 사이트를 시험 인쇄했을 때 본문은 모두 보였지만, 글자는 두 단계 정도 너무 컸고 헤더는 보기 좋지 않았으며 링크는 흑백에서 흐릿한 회색으로 보였음 @media print 안에서 표시 여부와 서식을 바꿔 인쇄물을 조정함 .onlyPrint 는 기본적으로 display: none으로 숨기고, 인쇄할 때 display: inline으로 표시함. 현재 부제에 짧은 작성자 표기를 넣는 데 사용함 .noPrint 는 인쇄할 때 display: none으로 숨김. 인쇄물에서 보기 좋지 않은 사이트 헤더에 적용함 글자 크기는 p, ol에 12pt, h3, h4에 13pt, h2에 14pt, h1에 16pt를 적용함. 화면용 가변 크기 글자가 인쇄물에서는 보기 좋지 않아 조정함 코드 블록의 .giallo에는 3px solid black 테두리를, .giallo-l에는 11pt 글자 크기를 적용함 링크에는 color: black !important 를 적용해, 흑백 인쇄에서 보기 좋지 않은 파란색 대신 본문과 같은 검은색을 사용함 변경 결과는 CTRL-P 또는 페이지의 인쇄 버튼으로 확인할 수 있으며, 공개한 CSS 코드는 자유롭게 가져다 써도 됨 코드 블록은 조정 후에도 가장 보기 좋지 않은 부분으로 남았고, 페이지 경계에서 나뉘지 않는 문제의 해결책을 찾고 있음 적은 독자를 위한 배려도 가치가 있음 인쇄 시 요소를 숨기거나 표시하는 작업에 오전 시간의 상당...