new 1-4 +2
<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 {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0mm;
font-size: 0;
}
.a4-page {
width: 210mm;
height: 297mm;
background: white;
position: relative;
overflow: visible;
box-sizing: border-box;
display: inline-block;
zoom: 0.75;
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;
}
.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: relative;
top: 0; left: 0; right: 0; bottom: 0;
padding-bottom: 50px;
z-index: 0;
width: 100%;
height: 100%;
}
/* 공통 페이지와 패널 */
.page {
position: absolute;
overflow: hidden;
}
.panel {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.panel img, .page img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.text-box {
position: absolute;
top: 20mm;
right: 20mm;
width: 50%;
background: rgba(255, 255, 255, 0.65);
padding: 20px;
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: right;
}
.text-box h3 {
font-size: 18px;
margin: 0 0 8px;
}
.text-box p {
margin: 0 0 6px;
}
@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;
}
.a4-outline {
display: none;
}
.header,
.footer {
font-size: 11px;
padding: 8px 12px;
color: #000;
background: transparent;
z-index: 3;
}
}
@media print {
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;
}
.panel img, .page img {
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
position: absolute !important;
}
a[href]:after {
content: "";
}
}
/* 1페이지 */
.page--1 {
width: 210mm;
height: 297mm;
position: relative;
}
.page--1 .panel--p1 {
position: absolute;
top: 0;
left: 0;
width: 148.5mm;
height: 148.5mm;
}
.page--1 .panel--p2 {
position: absolute;
top: 148.5mm;
left: 0;
width: 148.5mm;
height: 148.5mm;
}
.page--1 .panel--p3 {
position: absolute;
top: 0;
left: 148.5mm;
width: 198mm;
height: 297mm;
}
.page--1 .panel--p3 img {
object-fit: cover;
object-position: left center;
}
/* 2페이지 */
.page--2 {
width: 210mm;
height: 297mm;
position: relative;
overflow: hidden;
}
.page--2 .panel--p1 {
position: absolute;
top: 0;
left: 0;
width: 198mm;
height: 297mm;
}
.page--2 .panel--p1 img {
width: 272mm;
height: 297mm;
object-fit: cover;
object-position: left center;
transform: translateX(-61.5mm);
display: block;
}
.page--2 .text-box {
position: absolute;
top: auto;
bottom: 50mm;
right: 20mm;
width: 50%;
background: rgba(255, 255, 255, 0.65);
padding: 20px;
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: right;
height: auto;
}
.page--2 .text-box h3 {
font-size: 18px;
margin: 0 0 8px;
}
.page--2 .text-box p {
margin: 0 0 6px;
}
/* 3페이지 */
.page--3 {
width: 210mm;
height: 297mm;
position: relative;
}
.page--3 .panel--p1 {
position: absolute;
top: 74.5mm;
left: 0;
width: 148.5mm;
height: 74mm;
}
.page--3 .panel--p2 {
position: absolute;
top: 148.5mm;
left: 0;
width: 148.5mm;
height: 148.5mm;
}
.page--3 .panel--p3 {
position: absolute;
top: 74.5mm;
left: 148.5mm;
width: 272mm;
height: 222mm;
}
.page--3 .panel--p3 img {
object-fit: cover;
object-position: left center;
}
/* 4페이지 */
.page--4 {
width: 210mm;
height: 297mm;
position: relative;
overflow: hidden;
}
.page--4 .panel--p1 {
position: absolute;
top: 74.5mm;
left: 0;
width: 272mm;
height: 222mm;
}
.page--4 .panel--p1 img {
width: 272mm;
height: 222mm;
object-fit: cover;
object-position: left center;
transform: translateX(-61.5mm);
display: block;
}
.page--4 .text-box {
position: absolute;
top: 15mm;
right: 30mm;
width: 40%;
background: rgba(255, 255, 255, 0.65);
padding: 20px;
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: right;
height: auto;
}
.page--4 .text-box h3 {
font-size: 18px;
margin: 0 0 8px;
}
.page--4 .text-box p {
margin: 0 0 6px;
}
</style>
<div class="page-container"><!-- 1페이지 -->
<div class="a4-page page page--1 color-white">
<div class="a4-outline"> </div>
<div class="header align-left">머릿글 예시 (왼쪽 정렬)</div>
<div class="page-content">
<div class="panel panel--p1"><a data-lightbox="page12" data-title="Desert View" href="/files/attach/images/2025/05/27/6fe9b71ccc1f2a29273b117fd3d0377b.jpg"><img alt="Page 1 Photo" src="/files/attach/images/2025/05/27/6fe9b71ccc1f2a29273b117fd3d0377b.jpg" /> </a></div>
<div class="panel panel--p2"><a data-lightbox="page12" data-title="Desert View" href="/files/attach/images/2025/05/27/399b5b75a49ce138e93218e25b0cd60f.jpg"><img alt="Page 1 Photo" src="/files/attach/images/2025/05/27/399b5b75a49ce138e93218e25b0cd60f.jpg" /> </a></div>
<div class="panel panel--p3"><img alt="Page 1 Photo" src="/files/attach/images/2025/06/02/316111bbc21810c191c527f1132597f5.jpg" /></div>
</div>
<div class="footer align-left">- Page 1 -</div>
</div>
<!-- 2페이지 -->
<div class="a4-page page page--2 color-black">
<div class="a4-outline"> </div>
<div class="header align-right">머릿글 예시 (오른쪽 정렬)</div>
<div class="page-content">
<div class="panel panel--p1"><a data-lightbox="page12" data-title="Desert Panorama" href="/files/attach/images/2025/06/02/316111bbc21810c191c527f1132597f5.jpg"><img alt="Page 2 Photo" src="/files/attach/images/2025/06/02/316111bbc21810c191c527f1132597f5.jpg" /> </a></div>
<div class="text-box">
<h3>조용한 오후의 초콜릿</h3>
<p>창밖의 흐릿한 빛 아래, 회색 후드 속에 숨겨진 작은 일상.<br />
무심한 듯 건네는 초콜릿 하나에도 온기가 담긴다.</p>
<p>#후드티 #초콜릿 #고요한순간</p>
</div>
</div>
<div class="footer align-right">- Page 2 -</div>
</div>
</div>
<p> </p>
<p> </p>
<div class="page-container"><!-- 3페이지 -->
<div class="a4-page page page--3 color-white">
<div class="a4-outline"> </div>
<div class="header align-left">머릿글 예시 (왼쪽 정렬)</div>
<div class="page-content">
<div class="panel panel--p1"><a data-lightbox="page12" data-title="Desert View" href="/files/attach/images/2025/06/02/b9d31b1d5ecce649a557ef84f068c76e.jpg"><img alt="Page 1 Photo" src="/files/attach/images/2025/06/02/b9d31b1d5ecce649a557ef84f068c76e.jpg" /> </a></div>
<div class="panel panel--p2"><a data-lightbox="page12" data-title="Desert View" href="/files/attach/images/2025/06/02/ac812853e50fac938e680ec5eb1c28b7.jpg"><img alt="Page 1 Photo" src="/files/attach/images/2025/06/02/ac812853e50fac938e680ec5eb1c28b7.jpg" /> </a></div>
<div class="panel panel--p3"><img alt="Page 1 Photo" src="/files/attach/images/2025/06/02/43103cef155a0ce5034f05daa683f463.jpg" /></div>
</div>
<div class="footer align-left">- Page 3 -</div>
</div>
<!-- 4페이지 -->
<div class="a4-page page page--4 color-black">
<div class="a4-outline"> </div>
<div class="header align-right">머릿글 예시 (오른쪽 정렬)</div>
<div class="page-content">
<div class="panel panel--p1"><a data-lightbox="page12" data-title="Desert Panorama" href="/files/attach/images/2025/06/02/43103cef155a0ce5034f05daa683f463.jpg"><img alt="Page 2 Photo" src="/files/attach/images/2025/06/02/43103cef155a0ce5034f05daa683f463.jpg" /> </a></div>
<div class="text-box">
<h3>조용한 오후의 초콜릿</h3>
<p>창밖의 흐릿한 빛 아래, 회색 후드 속에 숨겨진 작은 일상.<br />
무심한 듯 건네는 초콜릿 하나에도 온기가 담긴다.</p>
<p>#후드티 #초콜릿 #고요한순간</p>
</div>
</div>
<div class="footer align-right">- Page 4 -</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/lightbox2@2/dist/js/lightbox.min.js"></script>
<p> </p>
<p> </p>
by eGrida posted Jun 03, 2025
