A4 용지 크기 페이지에서 HTML 페이지를 만드는 방법

질문 : A4 용지 크기 페이지에서 HTML 페이지를 만드는 방법은 무엇입니까?

---

예를 들어 HTML 페이지가 MS Word의 A4 크기 페이지처럼 동작하도록 할 수 있습니까?

기본적으로 브라우저에 HTML 페이지를 표시하고 A4 크기 페이지의 크기로 내용을 설명 할 수 있기를 원합니다.

단순함을 위해 HTML 페이지에는 텍스트 (이미지 등 없음) 만 포함되고 <br> 태그는 포함되지 않는다고 가정합니다.

또한 HTML 페이지를 인쇄하면 A4 크기의 종이 페이지로 나옵니다.

답변

---

오래 전 2005 년 11 월 AlistApart.com은 HTML과 CSS 만 사용하여 책을 출판 한 방법에 대한 기사를 게시했습니다. 참조 : http://alistapart.com/article/boom

다음은 그 기사의 일부입니다.

CSS2는 연속 미디어 (스크롤바 생각)와는 반대로 페이지 미디어 (종이를 생각하십시오)의 개념을 가지고 있습니다. 스타일 시트는 페이지 크기와 여백을 설정할 수 있습니다. 페이지 템플릿에는 이름을 부여 할 수 있으며 요소는 인쇄 할 이름이 지정된 페이지를 지정할 수 있습니다. 또한 소스 문서의 요소는 페이지 나누기를 강제 할 수 있습니다. 다음은 우리가 사용한 스타일 시트의 스 니펫입니다.

@page {
    size: 7in 9.25in;
    margin: 27mm 16mm 27mm 16mm;
}

미국에 기반을 둔 게시자가있는 경우 페이지 크기가 인치 단위로 지정되었습니다. 우리는 유럽인으로서 미터법 측정을 계속했습니다. CSS는 둘 다 허용합니다.

페이지 크기와 여백을 설정 한 후 올바른 위치에 페이지 나누기가 있는지 확인해야했습니다. 다음 발췌 부분은 장과 부록 뒤에 페이지 나누기가 생성되는 방식을 보여줍니다.

div.chapter, div.appendix {
    page-break-after: always;
}

또한 CSS2를 사용하여 명명 된 페이지를 선언했습니다.

div.titlepage {
    page: blank;
}

즉, 제목 페이지는 이름이 "공백"인 페이지에 인쇄됩니다. CSS2는 명명 된 페이지의 개념을 설명했지만 그 값은 머리글과 바닥 글을 사용할 수있을 때만 분명해집니다.

어쨌든…

A4를 인쇄하려면 물론 다른 치수가 필요합니다.

@page {
    size: 21cm 29.7cm;
    margin: 30mm 45mm 30mm 45mm;
     /* change the margins as you want them to be. */
}

이 기사는 페이지 나누기 설정 등과 같은 내용을 다룹니다. 따라서 완전히 읽고 싶을 수 있습니다.

귀하의 경우 트릭은 먼저 인쇄 CSS를 만드는 것입니다. 대부분의 최신 브라우저 (> 2005)는 확대 / 축소를 지원하며 이미 인쇄 CSS를 기반으로 한 웹 사이트를 표시 할 수 있습니다.

이제 웹 디스플레이를 약간 다르게 만들고 전체 디자인을 대부분의 브라우저 (예전의 2005 년 이전 브라우저 포함)에 맞게 조정해야합니다. 이를 위해 웹 CSS 파일을 만들거나 인쇄 CSS의 일부를 재정의해야합니다. 웹 디스플레이 용 CSS를 만들 때 브라우저는 모든 크기를 가질 수 있습니다 (예 : "모바일"에서 "대형 화면 TV"까지). 의미 : 웹 CSS의 경우 페이지 너비와 이미지 너비는 가능한 한 많은 디스플레이 장치와 웹 브라우저 클라이언트를 지원하기 위해 가변 너비 (%)를 사용하여 설정하는 것이 가장 좋습니다.

수정 (2015 년 2 월 26 일)

오늘 저는 SmashingMagazine에서 HTML과 CSS로 인쇄를위한 디자인을 다루는 또 다른 최신 기사를 우연히 발견했습니다.

수정 (2018 년 10 월 30 일)

size 가 유효한 CSS3가 아니라는 점에주의를 기울였습니다. 이는 실제로 정확합니다. 기사에 인용 된 코드를 반복했습니다. (설명 된대로) 좋은 오래된 CSS2였습니다 (이 기사가 나온 연도를 살펴보면 의미가 있음). 이 답변은 처음 게시되었습니다). 어쨌든 복사하여 붙여 넣기의 편의를 위해 유효한 CSS3 코드는 다음과 같습니다.

@media print {
    body{
        width: 21cm;
        height: 29.7cm;
        margin: 30mm 45mm 30mm 45mm; 
        /* change the margins as you want them to be. */
   } 
}

정말로 픽셀이 필요하다고 생각하는 경우 ( 실제로 픽셀 사용을 피해야 함 ) 인쇄를 위해 올바른 DPI를 선택해야합니다.

• 72dpi (웹) = 595 X 842 픽셀
• 300dpi (인쇄) = 2480 x 3508 픽셀
• 600dpi (고품질 인쇄) = 4960 x 7016 픽셀

그러나 저는 번거 로움 cm (센티미터) 또는 mm (밀리미터)를 사용하여 사용하는 클라이언트에 따라 발생할 수있는 렌더링 결함을 방지합니다.

출처 : https://stackoverflow.com/questions/3341485/how-to-make-a-html-page-in-a4-paper-size-pages