1p-2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A4 Web Gallery - 갤러리 오리진</title>
<style>
:root {
--show-header-footer-line: 1;
--show-center-line: 1;
--show-horizontal-center-line: 1;
}
.a4-page {
width: 210mm;
height: 297mm;
margin: 0 auto;
position: relative;
outline: 1px solid #000;
}
.center-line {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 0;
border-left: calc(var(--show-center-line) * 1px) dashed #999;
pointer-events: none;
}
.horizontal-center-line {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 0;
border-top: calc(var(--show-horizontal-center-line) * 1px) dashed #999;
pointer-events: none;
}
.white { background: white; }
.yellow { background: #fff9db; }
.blue { background: #e7f0ff; }
.red { background: #ffe5e5; }
.pink { background: #ffeaf5; }
.black { background: #1a1a1a; color: white; }
.gray { background: #f2f2f2; }
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@media screen and (max-width: 768px) {
.a4-page {
width: 100%;
height: auto;
aspect-ratio: 210 / 297;
}
}
</style>
</head>
<body>
<div class="a4-page">
<img src="/files/attach/images/2025/05/04/850158a6e300b7e670de684ac051a271.jpg" alt="페이지 1 전체 사진" style="position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:0;" />
<div class="center-line"></div>
<div class="horizontal-center-line"></div>
<div style="height: 10mm; border-bottom: calc(var(--show-header-footer-line) * 1px) dashed #999; display: flex; align-items: center; justify-content: center; font-size: 10px; position: relative; z-index:1; background: transparent;">머릿말 영역</div>
<div style="height: calc(100% - 20mm); position: relative; z-index:1;"></div>
<div style="position: absolute; bottom: 0; left: 0; right: 0; height: 10mm; border-top: calc(var(--show-header-footer-line) * 1px) dashed #999; display: flex; align-items: center; justify-content: center; font-size: 10px; z-index:1; background: transparent;">페이지 1</div>
</div>
<div class="a4-page">
<div class="center-line"></div>
<div class="horizontal-center-line"></div>
<div style="height: 10mm; border-bottom: calc(var(--show-header-footer-line) * 1px) dashed #999; display: flex; align-items: center; justify-content: center; font-size: 10px; position: relative; z-index:1; background: transparent;">머릿말 영역</div>
<div style="height: calc(100% - 20mm); position: relative; z-index:1; display: flex; align-items: center; justify-content: center;">
<img src="/files/attach/images/2025/05/04/ef43be8c1a64bd7b49781042b31ff01d.jpg" alt="페이지 2 사진" style="max-width: 85%; max-height: 85%; object-fit: contain; box-shadow: 0 0 3mm rgba(0,0,0,0.1);" />
</div>
<div style="position: absolute; bottom: 0; left: 0; right: 0; height: 10mm; border-top: calc(var(--show-header-footer-line) * 1px) dashed #999; display: flex; align-items: center; justify-content: center; font-size: 10px; z-index:1; background: transparent;">페이지 2</div>
</div>
</body>
</html>
by eGrida posted May 04, 2025
