1-2 i
<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title></title>
<link href="https://cdn.jsdelivr.net/npm/lightbox2@2/dist/css/lightbox.min.css" rel="stylesheet" />
<style type="text/css">/* 기본 바디 스타일 */
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;
}
.a4-page {
width: 210mm;
height: 297mm;
background: white;
position: relative;
overflow: visible;
box-sizing: border-box;
display: inline-block;
zoom: 0.8;
margin: 0;
vertical-align: top;
}
.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: #222;
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; }
.align-left { text-align: left; }
.align-right { text-align: right; }
/* 흰색 텍스트 테마 */
.a4-page.color-white .header,
.a4-page.color-white .footer {
color: white;
}
/* 검정색 텍스트 테마 */
.a4-page.color-black .header,
.a4-page.color-black .footer {
color: black;
}
.page-content {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
padding-bottom: 50px;
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;
}
.page1 {
width: 148mm;
aspect-ratio: 1 / 1;
overflow: hidden;
position: absolute;
left: 0;
}
.page1.p1 { top: 0; }
.page1.p2 { top: 148mm; }
.page1.p3 {
width: 62mm;
height: 297mm;
left: 148mm;
position: absolute;
top: 0;
overflow: hidden;
}
.page1.p3 img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: left center;
display: block;
}
.page2 {
position: absolute;
width: 136mm;
height: 297mm;
left: 0;
bottom: 0;
overflow: hidden;
z-index: 0;
}
.page2 img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: right center;
display: block;
z-index: 1;
position: relative;
}
.page2-text {
position: absolute;
bottom: 20mm;
right: 20mm;
left: auto;
top: auto;
transform: none;
text-align: right;
width: 50%;
background: rgba(255, 255, 255, 0.65);
padding: 20px;
box-sizing: border-box;
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
}
.page2-text h3 {
font-size: 18px;
margin: 0 0 8px;
}
@media (max-width: 767px) {
.page-container {
display: flex;
flex-direction: column;
align-items: center;
overflow-x: hidden;
padding: 0;
margin: 0;
}
.a4-page {
width: 210mm;
height: 297mm;
background: white;
position: relative;
overflow: visible;
box-sizing: border-box;
display: inline-block;
zoom: 0.5;
margin: 0;
vertical-align: top;
}
.page2-text.bottom-right {
position: absolute;
right: 16px;
bottom: 16px;
width: calc(100% - 32px);
font-size: 13px;
line-height: 1.5;
background: rgba(255, 255, 255, 0.75);
color: #000;
padding: 12px;
box-sizing: border-box;
}
.a4-outline {
display: none;
}
.header,
.footer {
font-size: 11px;
padding: 8px 12px;
color: #000;
background: transparent;
z-index: 3;
}
}
@media print {
.photo-block img,
.page1.p3 img,
.page2 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;
}
.header,
.footer {
font-size: 10pt;
color: #222 !important;
background: none !important;
text-shadow: none !important;
}
a[href]:after {
content: "";
}
}
</style>
by eGrida posted May 29, 2025
