A4 크기로 인쇄하도록 HTML 페이지를 디자인하려면 어떻게 해야 합니까?

A4 용지 크기로 HTML 페이지를 디자인하는 방법

많은 사용자가 크기와 여백을 모방하는 HTML 페이지를 인쇄하는 기능을 원합니다. A4 크기의 시트 중 하나입니다. 이 기사에서는 이 효과를 달성하는 데 필요한 기술을 살펴봅니다.

인쇄용 CSS 미디어 쿼리

HTML 페이지의 인쇄 크기를 제어하는 ​​핵심은 CSS 미디어를 활용하는 데 있습니다. 쿼리. 이러한 쿼리는 인쇄 매체를 대상으로 하며 특정 스타일을 적용할 수 있도록 합니다. A4 크기 인쇄의 경우 다음 @media 쿼리를 사용할 수 있습니다.

@media print {
    body {
        width: 21cm;
        height: 29.7cm;
        margin: 30mm 45mm 30mm 45mm;
    }
}

이 코드는 인쇄된 페이지의 너비와 높이를 각각 A4 페이지에 해당하는 21cm와 29.7cm로 설정합니다. 또한 원하는 페이지 크기를 달성하기 위해 30mm(상단 및 하단) 및 45mm(왼쪽 및 오른쪽)의 여백을 정의합니다.

이후 페이지 나누기

HTML의 경우 콘텐츠가 지정된 페이지 크기를 초과하면 후속 페이지를 만들어야 합니다. 이는 CSS 페이지 나누기를 삽입하여 수행할 수 있습니다. 예:

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

이 코드는 모든 장이 새 페이지에서 시작되도록 합니다.

브라우저 표시

웹 표시를 최적화하려면 인쇄된 A4 크기를 유지하면서 페이지를 변경하려면 별도의 웹 CSS 파일을 만들거나 인쇄 CSS의 일부를 재정의하세요. 예:

@media screen {
    body {
        width: 80%;
        height: auto;
        margin: 20px;
    }
}

이 코드는 자동 높이 조정을 통해 표시 너비를 사용 가능한 브라우저 공간의 80%로 설정합니다. 웹 친화적인 레이아웃을 위해 여백도 20px로 줄였습니다.

결론

CSS 미디어 쿼리를 구현하고 페이지 나누기를 관리하면 인쇄 시 A4 크기 문서처럼 작동하는 HTML 페이지입니다. 인쇄 CSS와 웹 CSS를 분리함으로써 페이지는 다양한 보기 환경에 최적화된 디스플레이를 유지할 수도 있습니다.

위 내용은 A4 크기로 인쇄하도록 HTML 페이지를 디자인하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!