CSS를 사용하여 브라우저 인쇄 설정(여백, 머리글, 바닥글)을 어떻게 제어할 수 있습니까?-CSS 튜토리얼-php.cn

CSS를 사용하여 브라우저 인쇄 설정(여백, 머리글, 바닥글)을 어떻게 제어할 수 있습니까?

Linda Hamilton

풀어 주다： 2024-12-30 06:21:10

원래의

329명이 탐색했습니다.

How Can I Control Browser Print Settings (Margins, Headers, Footers) Using CSS?

브라우저 인쇄 설정 변경(여백, 머리글, 바닥글)

브라우저 인쇄 설정 수정 주제를 다루려는 많은 시도가 있었지만 명확한 내용은 아직 파악하기 어렵습니다. 이 문서에서는 최신 CSS 표준을 기반으로 한 포괄적인 설명과 코드 예제를 제공합니다.

@page 지시문을 사용한 사용자 정의

CSS는 @page 지시문을 제공하여 인쇄용 페이지별 서식을 수정할 수 있습니다. 메디아. 이 지시어를 사용하여 개발자는 프린터 여백, 페이지 방향 및 기타 설정을 지정할 수 있습니다.

프린터 여백 설정

프린터 여백을 설정하려면 @page 지시어 내에서 여백 속성을 사용하세요. 이 속성은 밀리미터 단위의 값을 가지며 프린터 옵션 패널의 여백 설정에 영향을 줍니다.

참고: @page 속성에 대한 브라우저 동작은 다를 수 있습니다. 예를 들어 Safari는 여백 설정을 지원하지 않지만 다른 주요 브라우저는 지원합니다.

@page를 사용하여 머리글과 바닥글을 제거하려면 다음과 같이 여백을 설정하세요.

@page {
    margin: 0mm;
}

로그인 후 복사

이 기술은 지원하지 않을 수 있습니다. 브라우저별 여백이 비활성화되어 있으므로 인쇄된 콘텐츠가 여러 페이지에 걸쳐 있는 경우 효과적입니다.

브라우저별 동작

@page 지시어를 처리할 때 브라우저마다 동작이 다릅니다. 자세한 내용은 다음과 같습니다.

Firefox 3.6 이하: @page margins는 무시됩니다.
IE 7 이하: @page margins 무시됩니다.
Safari 5.1.7: @page 여백은 지원되지 않습니다.
Chrome 4.1: @page 여백은 무시됩니다.
IE 8: @page 여백은 준수되지만 브라우저 머리글과 바닥글은 준수되지 않습니다. 숨김.
Opera 10: @page 여백은 준수되지 않지만 배경이 투명하지 않으면 브라우저 머리글과 바닥글이 숨겨집니다.
Chrome 21 이상: @page 여백이 존중되며, 여백이 여백과 겹치면 브라우저 머리글과 바닥글이 숨겨집니다. content.

예제 코드

다음 HTML 및 CSS 코드는 @page 지시문을 사용하여 인쇄 설정을 사용자 정의하는 방법을 보여줍니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Print Test</title>
    <style type="text/css" media="print">
    @page 
    {
        size:  auto;
        margin: 0mm;
    }

    html
    {
        background-color: #FFFFFF; 
        margin: 0px;
    }

    body
    {
        border: solid 1px blue ;
        margin: 10mm 15mm 10mm 15mm;
    }
    </style>
</head>
<body>
  <div>Top line</div>
  <div>Line 2</div>
</body>
</html>

로그인 후 복사

참고: 이 코드는 Chrome에서는 브라우저 머리글과 바닥글을 숨기지만 다른 브라우저에서는 숨기지 않습니다.