게시일: 2024년 10월 30일
Chrome 131부터 CSS를 사용하여 페이지를 인쇄할 때 페이지의 여백에 콘텐츠를 추가할 수 있습니다. 이 게시물에서는 페이지로 나눈 미디어의 페이지 모델과 이 기능을 사용하여 웹페이지의 인쇄 출력을 개선하는 방법을 설명합니다.
CSS에는 페이지로 나눈 미디어, CSS 페이지로 나눈 미디어 모듈, 페이지로 나눈 미디어용 CSS 생성 콘텐츠를 다루는 사양이 포함되어 있습니다. 페이지가 인쇄될 때만 사용되는 기능 (PDF로 인쇄 포함)을 정의합니다. 이 CSS를 지원하고 HTML과 CSS에서 책과 기타 인쇄물을 생성할 수 있는 사용자 에이전트가 있습니다. 하지만 애플리케이션에서 인쇄하거나 PDF를 만들어야 하는 경우가 많음에도 불구하고 웹브라우저에서는 이 기능이 제대로 지원되지 않았습니다.
Chrome과 Firefox는 @page at-rule을 지원합니다. 이 규칙을 사용하면 인쇄할 페이지의 크기와 콘텐츠 주변의 여백 크기를 정의할 수 있습니다. Chrome 131부터는 생성된 콘텐츠를 사용하여 관련 여백 @규칙을 타겟팅하여 여백에 콘텐츠를 추가할 수도 있습니다.
페이지 모델
페이지로 나눈 미디어에서 사용되는 페이지 모델은 페이지 상자를 정의합니다. 이는 종이 한 장입니다. 페이지 상자 안에는 페이지 여백, 페이지 테두리, 페이지 패딩, 마지막으로 콘텐츠가 표시되는 페이지 영역이 있습니다. 콘텐츠를 인쇄하면 콘텐츠를 포함하는 데 필요한 만큼 페이지로 분할됩니다.
그런 다음 페이지 여백이 16개의 상자로 분할되며 각 상자에는 해당하는 at-rule이 있습니다.
@top-left-corner@top-left@top-center@top-right@top-right-corner@left-top@left-middle@left-bottom@right-top@right-middle@right-bottom@bottom-left-corner@bottom-left@bottom-center@bottom-right@bottom-right-corner
여백 상자 크기
상단 및 하단 상자의 높이와 왼쪽 및 오른쪽 상자의 너비는 @page를 사용하여 설정된 여백 크기로 정의됩니다. 따라서 모서리 상자는 이러한 여백의 교차로 생성된 고정 크기를 갖습니다. 하지만 각 모서리 사이의 세 상자는 유연합니다. flex: auto를 사용하는 플렉스 레이아웃의 상자와 유사하게 동작하므로 공간을 채우기 위해 늘어나지만, 한 상자에 긴 텍스트 문자열을 넣고 다른 상자에는 아무것도 넣지 않으면 텍스트가 있는 상자가 텍스트를 래핑하는 대신 늘어납니다.
여백 상자에 콘텐츠 추가
여백 상자에 콘텐츠를 추가하려면 ::before 및 ::after 의사 요소와 마찬가지로 CSS 생성 콘텐츠를 사용합니다. 이 경우 타겟팅하려는 상자와 관련된 at-rule을 사용합니다. 다음 CSS는 왼쪽 하단 여백 상자 또는 오른쪽 페이지에 '내 책'이라는 텍스트를 추가합니다. 또한 텍스트의 스타일을 지정합니다.
@page :right {
@bottom-left {
content: "My book";
font-size: 9pt;
color: #333;
}
}
텍스트 문자열 외에도 여백에 페이지 카운터를 추가할 수 있습니다. 미리 정의된 page 카운터에는 현재 페이지가 포함됩니다. 다음 CSS는 오른쪽 페이지의 오른쪽 하단과 왼쪽 페이지의 왼쪽 하단에 추가합니다.
@page :right {
@bottom-right {
content: counter(page);
}
}
@page :left {
@bottom-left {
content: counter(page);
}
}
항상 총 페이지 수를 포함하는 pages 카운터도 있습니다.
페이지 여백 사용 시 유의사항
브라우저에서 인쇄하는 경우 브라우저에서 표시할 여유 공간이 있으면 일부 페이지 여백 콘텐츠가 자동으로 추가됩니다. 콘텐츠를 추가한 경우에도 이 작업이 실행됩니다. 자동으로 생성된 머리글과 바닥글은 인쇄 대화상자에서 사용 중지할 수 있습니다.
페이지의 여백을 0으로 설정하거나 브라우저 헤더와 바닥글을 위한 공간이 없을 정도로 작은 값으로 설정하면 헤더와 바닥글이 표시되지 않습니다.
Chromium의 기본 페이지 레이아웃 개념으로 인해 인쇄된 문서의 첫 번째 페이지에 자동 콘텐츠를 위한 공간이 없으면 공간이 있는 후속 페이지에도 브라우저 콘텐츠가 표시되지 않습니다.
페이지로 나눈 미디어의 향후 가능성
페이지로 나눈 미디어 사양에는 CSS를 사용한 인쇄용 디자인 도움말에 설명된 여러 다른 기능이 포함되어 있습니다. 다음 기능의 사용 사례가 있는 경우 연결된 버그에 추가하세요.
문자열 설정
책에는 여백에 현재 장 제목이 인쇄되는 경우가 많습니다. 이 제목은 책을 읽을 때마다 변경되므로 CSS에 하드코딩할 수 없습니다. string-set 속성을 사용하면 HTML에서 값을 설정한 후 생성된 콘텐츠에서 사용할 수 있습니다. 다음 CSS는 챕터 제목이 <h1>로 마크업된다고 가정합니다. 각 <h1>의 콘텐츠를 가져와 오른쪽 페이지의 오른쪽 상단 여백에 사용합니다. 다음 <h1>에 도달하면 그 이후의 마진 값이 업데이트됩니다.
h1 {
string-set: doctitle content();
}
@page :right {
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 8pt;
}
}
string-set 및 string()의 Chromium 버그
교차 참조
문서가 인쇄되면 다른 페이지에 대한 참조는 일반적으로 참조를 찾을 수 있는 페이지 번호를 사용하여 표시됩니다. 이러한 상호 참조는 target-counter을 사용하여 만들 수 있습니다. 링크에 적용하면 링크가 웹의 참조로 이동하고, 인쇄하면 페이지 번호가 표시됩니다.
<a class="xref" href="#ref1">my reference</a>
a.xref:after {
content: " (page " target-counter(attr(href, url), page) ")";
}
각주
각주도 페이지로 나눈 미디어 사양의 기능입니다. HTML에서는 클래스를 사용하여 각주가 되어야 하는 텍스트를 식별합니다. 예를 들면 다음과 같습니다.
<p>This is some text <span class=”fn”>this is a footnote</span>.</p>
그런 다음 float의 footnote 값을 사용하여 이 텍스트를 각주로 바꿉니다. 문서를 인쇄하면 단락에서 삭제되고 각주로 표시됩니다.
.fn {
float: footnote;
}