A4 용지 크기 페이지에서 HTML 페이지를 만드는 방법은 무엇입니까?
예를 들어 HTML 페이지를 MS Word의 A4 크기 페이지처럼 동작시키는 것이 가능합니까?
기본적으로 저는 브라우저에서 HTML 페이지를 보여주고 A4 크기 페이지의 내용을 개략적으로 설명하고 싶습니다.
것으로 <br>예를 들어 태그.
또한 HTML 페이지가 인쇄되면 A4 크기의 종이 페이지로 나옵니다.
몇 년 전인 2005년 11월에, AlistApart.com 은 HTML과 CSS만을 사용하여 어떻게 책을 출판했는지에 대한 기사를 실었습니다.참조: http://alistapart.com/article/boom
다음은 그 기사의 발췌문입니다.
CSS2는 연속 미디어(think scrollbar)와 반대로 페이징 미디어(think sheets of paper)의 개념을 가지고 있습니다.스타일시트는 페이지 크기와 여백을 설정할 수 있습니다.페이지 템플릿에는 이름을 지정할 수 있으며 요소에는 인쇄할 이름이 지정된 페이지를 지정할 수 있습니다.또한 원본 문서의 요소는 페이지를 강제로 구분할 수 있습니다.다음은 우리가 사용한 스타일시트의 일부입니다.
@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의 경우 가능한 많은 디스플레이 장치와 웹 검색 클라이언트를 지원하기 위해 가변 너비(%)를 사용하여 페이지 너비와 이미지 너비를 가장 잘 설정합니다.
EDIT (26-02-2015)
오늘 스매싱 매거진에서 우연히 또 다른 최신 기사를 발견했습니다. 이 기사는 HTML과 CSS로 인쇄물을 디자인하는 것에 대해서도 다루고 있습니다. 만약을 위해 또 다른 튜토리얼을 사용할 수 있다면 말이죠.
EDIT (30-10-2018)
라는 점에서 저는 그것에 주목하게 되었습니다.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를 선택해야 합니다.
- 72 dpi (웹) = 595 X 842 픽셀
- 300 dpi(인쇄) = 2480 X 3508 픽셀
- 600 dpi(고급 인쇄) = 4960 X 7016 픽셀
하지만 번거로움을 피하고 단순히 사용할 것입니다.cm (cm) 또는mm사용하는 클라이언트에 따라 발생할 수 있는 렌더링 결함을 방지하기 위한 크기 조정(밀리미터)입니다.
웹 브라우저가 A4와 동일한 픽셀 치수로 페이지를 표시하도록 강제하는 것은 꽤 쉬울 것입니다.하지만, 사물이 렌더링될 때 몇 가지 기괴한 점이 있을 수 있습니다.
모니터에 72dpi가 표시된다고 가정하면 다음과 같은 것을 추가할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 842px;
width: 595px;
/* to centre page on screen*/
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
</body>
</html>
A4 사이즈는 210x297mm입니다.
따라서 HTML 페이지를 CSS로 해당 크기에 맞게 설정할 수 있습니다.
html,body{
height:297mm;
width:210mm;
}
각 페이지로 섹션을 만들고 아래 코드를 사용하여 여백, 높이 및 너비를 조정합니다.
만약 당신이 A4 사이즈를 인쇄하고 있다면요.
다음 사용자
Size : 8.27in and 11.69 inches
@page Section1 {
size: 8.27in 11.69in;
margin: .5in .5in .5in .5in;
mso-header-margin: .5in;
mso-footer-margin: .5in;
mso-paper-source: 0;
}
div.Section1 {
page: Section1;
}
그런 다음 모든 내용이 들어 있는 디브를 만듭니다.
<div class="Section1">
type your content here...
</div>
또는
@media print {
.page-break {
height: 0;
page-break-before: always;
margin: 0;
border-top: none;
}
}
body, p, a,
span, td {
font-size: 9pt;
font-family: Arial, Helvetica, sans-serif;
}
body {
margin-left: 2em;
margin-right: 2em;
}
.page {
height: 947px;
padding-top: 5px;
page-break-after: always;
font-family: Arial, Helvetica, sans-serif;
position: relative;
border-bottom: 1px solid #000;
}
저는 구글에서 검색한 후 이 솔루션을 보았습니다. "A4 CSS 페이지 템플릿"(codepen.io )을 검색하십시오.<page> 태그를 사용하여 브라우저에서 A4(A3, A5, 세로) 크기의 영역을 보여줍니다.이 태그 안에 내용이 표시되지만 브라우저 영역에 대한 절대 위치는 그대로입니다.
body {
background: rgb(204,204,204);
}
page {
background: white;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {
width: 21cm;
height: 29.7cm;
}
page[size="A4"][layout="portrait"] {
width: 29.7cm;
height: 21cm;
}
@media print {
body, page {
margin: 0;
box-shadow: 0;
}
}<page size="A4">A4</page>
<page size="A4" layout="portrait">A4 portrait</page>이것은 다른 css/js-library가 포함되지 않은 상태에서 작동합니다.현재 브라우저(IE, FF, Chrome)에서 작동합니다.
다양한 방법:
사용하기mm:
html, body {
width: 210mm;
height: 297mm;
}
사용하기cm:
html, body {
width: 21.0cm;
height: 29.7cm;
}
사용하기 점 용pt:
html, body {
width: 595pt;
height: 842pt;
}
저는 HTML을 사용하여 실제 종이에 실제 크기로 올바르게 인쇄되는 보고서를 생성했습니다.
만약 당신이 CSS 파일에서 mm를 조심스럽게 단위로 사용한다면, 적어도 한 페이지는 괜찮을 것입니다.하지만 사람들은 브라우저에서 인쇄 줌을 변경함으로써 당신을 망칠 수 있습니다.
저는 제가 하고 있던 모든 것이 한 페이지였던 것을 기억하는 것 같아서 페이지화에 대해 걱정할 필요가 없었습니다. 훨씬 더 어려울 수도 있습니다.
PPI와 DPI는 문서가 브라우저에서 인쇄되는 방식에 전혀 차이가 없습니다.프린터는 화면 도트 피치나 이미지의 DPI 등에 대한 정보를 얻지 않습니다. 이미지를 인쇄하는 경우 이미지가 화면에 표시되는 방식과 비슷한 크기로 인쇄됩니다.브라우저의 인쇄 프로세서는 이미지의 DPI를 72dpi와 같은 다소 낮은 수준에서 문서의 나머지 DPI로 증가시킬 것입니다. 이미지는 반 페이지 너비로 표시되고 물리적으로 약 4" 너비로 표시됩니다.이미지의 픽셀 폭은 브라우저에 올바르게 표시하기 위해 약 300인치입니다.명목상의 300DPI로 인쇄될 때까지 프로세서는 픽셀을 추가하고 이미지는 300DPI가 4"인 약 1200px로 증가합니다.
텍스트와 같은 벡터 또는 비화소 기반 요소와 관련하여 프린터는 화면 도트 피치 또는 브라우저 폭 등과 관련이 없는 드라이버로부터 자체 DPI를 선택합니다. 브라우저가 3000px 너비인 경우 인쇄 프로세서는 텍스트를 적절하게 래핑합니다.
여기 인쇄 디스플레이를 만드는 것이 어려운 점이 있습니다. 각 브라우저와 프린터는 텍스트 크기(pt, em, px)와 간격을 고유한 방식으로 해석합니다. 사용하는 프린터, 브라우저 및 심지어는 OS에 따라 페이지당 줄과 문자의 양이 달라집니다.그래서 당신이 브라우저와 프린터를 사용하여 당신의 컴퓨터에서 테스트를 하고 당신이 640x900인치의 상자에 텍스트를 표시할 수 있고 인쇄에 완벽하다는 것을 알게 되더라도, 인쇄를 시도하는 다음 사람은 아마도 그것을 다르게 인쇄할 수 있을 것입니다.각 프린터와 브라우저가 매번 동일하도록 강제할 수 있는 방법은 없습니다.
픽셀은 잊어버리고 DPI도 잊어버립니다. 픽셀을 사용할 수 있는 유일한 방법은 프린터에서 인쇄 가능한 영역의 너비를 시뮬레이션하는 테이블 너비를 설정하는 것입니다.그런 경우에 나는 폭이 640미터 가까이 된다는 것을 발견했습니다.
<link rel="stylesheet" href="/css/style.css" type="text/css">
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print">
의 평범한 처소럼평에서.style.css:
table.tableclassname {
width: 400px;
}
의 신의에서.print.css:
table.tableclassname {
width: 16 cm;
}
비슷한 문제를 찾다가 이것을 발견했습니다 - http://www.indigorose.com/forums/archive/index.php/t-13334.html
A4는 이미지 해상도에 따라 달라지는 화면 이미지로서 문서 형식입니다. 예를 들어 A4 문서의 크기는 다음과 같습니다.
- 72 dpi (웹) = 595 X 842 픽셀
- 300 dpi (인쇄) = 2480 X 3508 픽셀 (제가 알기로는 "A4", 즉 "210mm X 297mm @ 300 dpi")
- 600 dpi(인쇄) = 4960 X 7016 픽셀
저는 이 주제가 꽤 오래되었다는 것을 알지만, 그 주제에 대한 저의 경험을 공유하고 싶습니다.사실, 저는 제 일일 보고서 작성에 도움이 될 모듈을 찾고 있었습니다.저는 HTML + CSS(Word, Latex, OO, ... 대신)로 몇 가지 문서와 보고서를 작성하고 있습니다.목적은 A4 용지에 인쇄하여 친구들과 공유하는 것입니다.검색하는 대신, "페이지", 페이지 번호, 요약, 머리글, 바닥글 등을 처리할 수 있는 간단한 lib를 구현하기 위해 작은 재미있는 코딩 세션을 갖기로 했습니다.마지막으로 ~~2시간 만에 완료했으며, 그것이 최고의 도구는 아니지만 제 목적에 거의 적합하다는 것을 알고 있습니다.제 레포에서 이 프로젝트를 보시고 주저하지 마시고 아이디어를 공유해 주십시오.당신이 100%로 찾고 있는 것은 아닐 수도 있지만, 이 모듈이 당신을 도울 수 있다고 생각합니다.
기본적으로 저는 본체 "폭: 200mm;"와 높이: 290mm(A4보다 작음)로 구성된 페이지를 만듭니다.그런 다음 페이지 나누기를 사용했습니다: always; 그래서 브라우저의 "인쇄" 옵션은 페이지 분할 시기를 알 수 있습니다.
repo: https://github.com/kursion/jsprint
기술적으로는 그럴 수 있지만 모든 브라우저가 화면에 표시되는 대로 페이지를 인쇄하려면 많은 작업이 필요합니다.또한 대부분의 브라우저는 인쇄물에 URL, 인쇄 날짜 및 페이지 번호를 강제로 지정하지만 항상 원하는 것은 아닙니다.변경하거나 사용하지 않도록 설정할 수 없습니다.
대신 화면에 표시된 내용을 바탕으로 PDF를 생성하여 다운로드 및/또는 인쇄를 위해 PDF를 제공하는 것이 좋습니다.대부분의 사용 가능한 PDF 라이브러리는 유료이지만 기본 PDF를 만들 수 있는 몇 가지 무료 대안이 있습니다.
저는 1998년부터 A4 페이지에 인쇄하기 위해 680px를 상업 보고서에 사용했습니다.700px는 여백의 크기에 따라 올바르게 적합될 수 없습니다.최신 브라우저는 프린터의 페이지에 맞게 페이지를 축소할 수 있지만 680픽셀을 사용하면 거의 모든 브라우저에서 올바르게 인쇄됩니다.
코드 스니펫을 실행하고 결과를 확인하는 것은 HTML입니다.
window.print();<table width=680 border=1 cellpadding=20 cellspacing=0>
<tr><th>#</th><th>name</th></tr>
<tr align=center><td>1</td><td>DONALD TRUMP</td></tr>
<tr align=center><td>2</td><td>BARACK OBAMA</td></tr>
</table>JSFidle:
https://jsfiddle.net/ajofmm7r/
레이아웃을 a4 페이지의 비율을 가정하도록 설정하는 것은 전적으로 가능합니다.너비와 높이를 적절히 설정하기만 하면 됩니다(가능한 경우 확인).window.innerHeight그리고.window.innerWidth신뢰할 수 있을지는 모르겠지만).
까다로운 부분은 A4 인쇄입니다.예를 들어 Javascript는 기본적으로 페이지 인쇄만 지원합니다.window.print방법.@Prutswonder가 제안했듯이, 웹 페이지에서 PDF를 만드는 것이 아마도 가장 정교한 방법일 것입니다(애초 PDF 문서를 제공하는 것 외에).하지만, 이것은 사람들이 생각하는 것만큼 사소하지 않습니다.HTML: http://www.javaworld.com/javaworld/jw-04-2006/jw-0410-html.html 에서 PDF를 만들기 위한 모든 오픈 소스 Java 클래스에 대한 설명이 있는 링크입니다.
A4 비율 인쇄로 PDF를 만든 후에는 페이지의 A4 인쇄가 깨끗해집니다.그것이 시간을 투자할 가치가 있는지 여부는 또 다른 질문입니다.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"/>
<title>DIN A4 Page</title>
<style type="text/css">
@page { size: 21cm 29.7cm; margin: 2cm }
p { line-height: 120%; text-align: justify; background: transparent }
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</body>
</html>
알아요, 오랜만에 하는 일이지만, 아마 도움이 될 거예요. 직접 사용할 수 있어요.
@page {
size: A4 landscape;
}
이 링크를 방문해 주십시오.
언급URL : https://stackoverflow.com/questions/3341485/how-to-make-a-html-page-in-a4-paper-size-pages
'programing' 카테고리의 다른 글
| 스프링 부트 테스트가 웹 보안 구성을 존중하지 않음 (0) | 2023.08.10 |
|---|---|
| localdb를 따로 설치하는 방법은 무엇입니까? (0) | 2023.08.10 |
| 보안 웹 소켓 서버(tomcat)를 통해 각 소켓(HTTPS)이 있는 스프링 웹 소켓(WSS) (0) | 2023.08.10 |
| 가상 환경을 생성해야 하는 위치 (0) | 2023.08.10 |
| 왜 이 주장된 역참조 유형이 실행된 포인터 경고가 컴파일러에 특정적입니까? (0) | 2023.08.10 |