sample
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title>A4 2페이지 80% 붙이기</title>
<link href="https://cdn.jsdelivr.net/npm/lightbox2@2/dist/css/lightbox.min.css" rel="stylesheet" />
<style>
/* 기본 바디 스타일 */
body {
font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
margin: 0;
background: #f5f5f5;
}
/* 페이지 전체를 감싸는 컨테이너 */
.page-container {
text-align: center; /* 페이지를 중앙 정렬 */
font-size: 0; /* inline-block 간의 공백 제거 */
}
/* A4 페이지 단위 구성 */
.a4-page {
width: 210mm; /* A4 너비 */
height: 297mm; /* A4 높이 */
background: white;
position: relative;
overflow: hidden;
box-sizing: border-box;
display: inline-block; /* 가로 정렬을 위한 inline-block */
zoom: 0.8; /* ✅ PC에서 실제 표시 비율: 80% */
margin: 0; /* 페이지 간 여백 제거 */
vertical-align: top;
}
/* A4 점선 테두리 (인쇄 시 제외됨) */
.a4-outline {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
border: 1px dashed #ccc;
pointer-events: none;
z-index: 1;
}
/* 상단 및 하단 텍스트 (머릿글/꼬리글) */
.header,
.footer {
font-size: 12px;
color: #fff;
padding: 8px 20mm;
box-sizing: border-box;
position: absolute;
left: 0;
width: 100%;
z-index: 3;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
.footer { bottom: 0; }
.align-center { text-align: center; }
/* 본문 콘텐츠 영역 */
.page-content {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
padding-bottom: 50px; /* footer 영역 확보 */
z-index: 0;
}
/* 이미지 블록 전체 */
.photo-block {
width: 100%;
height: 100%;
overflow: hidden;
}
/* 배경 이미지 스타일 */
.photo-block img {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* 이미지 위에 표시되는 텍스트 박스 */
.text-block {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
background: rgba(255, 255, 255, 0.65);
padding: 20px;
box-sizing: border-box;
text-align: center;
font-size: 13px;
line-height: 1.5;
z-index: 2;
}
.text-block h3 {
font-size: 18px;
margin: 0 0 8px;
}
/* 모바일 반응형 (767px 이하) */
@media (max-width: 767px) {
.page-container {
display: block; /* 수직 배치 */
}
.a4-page {
max-width: 420px;
max-height: 595px;
margin: 0 auto !important;
padding: 0 !important;
box-shadow: none !important;
page-break-after: always;
scroll-snap-align: start;
display: block;
zoom: 1 !important; /* 모바일에서는 원래 비율 */
}
.photo-block,
.photo-block img {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.page-content {
padding-bottom: 50px;
}
.footer {
background: transparent;
color: #fff;
z-index: 3;
}
.text-block {
width: calc(100% - 32px);
font-size: 12px;
padding: 16px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.65);
}
.text-block h3 {
font-size: 15px;
}
.header,
.footer {
padding: 8px 16px;
}
}
/* 인쇄용 설정 */
@media print {
.photo-block img {
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
position: absolute !important;
}
html, body {
background: white;
margin: 0;
padding: 0;
height: auto;
overflow: visible;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.a4-page {
width: 210mm !important;
height: 297mm !important;
margin: 0 auto !important;
box-shadow: none !important;
page-break-after: always;
transform: none !important;
zoom: 1 !important;
}
.a4-outline {
display: none !important;
}
.text-block {
font-size: 11.5pt !important;
background: rgba(255, 255, 255, 0.8) !important;
}
.header,
.footer {
font-size: 10pt;
color: #222 !important;
background: none !important;
text-shadow: none !important;
}
a[href]:after {
content: "";
}
}
</style>
</head>
<body>
<div class="page-container">
<!-- 1페이지 -->
<div class="a4-page">
<div class="a4-outline"></div>
<div class="header align-center">머릿글 예시 (가운데 정렬)</div>
<div class="page-content">
<div class="photo-block">
<a data-lightbox="page1" data-title="Desert View" href="/files/attach/images/2025/05/27/1de1f189d98891c296454f0c6e8dace1.jpg">
<img src="/files/attach/images/2025/05/27/1de1f189d98891c296454f0c6e8dace1.jpg" alt="Page 1 Photo" />
</a>
</div>
<div class="text-block">
<h3>Desert Echoes</h3>
<p>사막의 아침 공기가 아직 따스함을 품기 전,<br>고요한 장면을 담은 한 컷.</p>
<p>#빛 #바람 #침묵</p>
</div>
</div>
<div class="footer align-center">꼬리글 예시 (가운데 정렬)</div>
</div>
<!-- 2페이지 -->
<div class="a4-page">
<div class="a4-outline"></div>
<div class="header align-center">머릿글 예시 (가운데 정렬)</div>
<div class="page-content">
<div class="photo-block">
<a data-lightbox="page2" data-title="Desert View" href="/files/attach/images/2025/05/27/6a6de607c32ddcd212da379aa4d26a21.jpg">
<img src="/files/attach/images/2025/05/27/6a6de607c32ddcd212da379aa4d26a21.jpg" alt="Page 2 Photo" />
</a>
</div>
<div class="text-block">
<h3>Desert Echoes</h3>
<p>사막의 아침 공기가 아직 따스함을 품기 전,<br>고요한 장면을 담은 또 한 컷.</p>
<p>#빛 #바람 #침묵</p>
</div>
</div>
<div class="footer align-center">꼬리글 예시 (가운데 정렬)</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/lightbox2@2/dist/js/lightbox.min.js"></script>
</body>
</html>
by eGrida posted May 27, 2025
