ㅅㄷㄴㅅ
<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;
}
.a4-page {
width: 210mm;
height: 297mm;
background: white;
margin: 10mm auto;
position: relative;
overflow: hidden;
box-sizing: border-box;
}
.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 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.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;
}
.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;
}
@media (max-width: 767px) {
html, body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
html, body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.a4-page {
width: 100vw !important;
height: 100vh !important;
margin: 0 auto !important;
padding: 0 !important;
box-shadow: none !important;
page-break-after: always;
scroll-snap-align: start;
}
.photo-block,
.photo-block img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.page-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding-bottom: 50px;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: transparent;
color: #fff;
z-index: 3;
}
.text-block {
width: calc(100% - 32px);
font-size: 12px;
padding: 16px;
top: 50%;
bottom: auto;
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;
}
.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>
<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/20/2ae92c5f14c649ab53e19b45226c65ab.jpeg"><img alt="Desert Photo" src="/files/attach/images/2025/05/20/2ae92c5f14c649ab53e19b45226c65ab.jpeg" /> </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 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/20/2ae92c5f14c649ab53e19b45226c65ab.jpeg"><img alt="Desert Photo" src="/files/attach/images/2025/05/20/2ae92c5f14c649ab53e19b45226c65ab.jpeg" /> </a></div>
<div class="text-block">
<h3>Desert Echoes</h3>
<p>사막의 아침 공기가 아직 따스함을 품기 전,<br />
고요한 장면을 담은 한 컷.</p>
<p>#빛 #바람 #침묵</p>
</div>
</div>
<div class="footer align-center">꼬리글 예시 (가운데 정렬)</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/lightbox2@2/dist/js/lightbox.min.js"></script>
by eGrida posted May 26, 2025
