n 5-6

<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: ""; } } /* 5페이지 */ .page--5 { width: 210mm; height: 297mm; position: relative; overflow: hidden; } .page--5 .panel--p1 { position: absolute; width: 63mm; height: 84mm; top: 13mm; left: 147mm } .page--5 .panel--p2 { width: 70mm; height: 105mm; top: 178mm; left: 0mm; } .page--5 .panel--p3 { width: 138mm; height: 184mm; top: 99mm; left: 72mm; } /* 6페이지 */ .page--6 { width: 210mm; height: 297mm; position: relative; overflow: hidden; } .page--6 .panel--p1 { top: 13mm; left: 0; width: 138mm; height: 207mm; } .page--6 .panel--p2 { width: 50mm; height: 50mm; top: 13mm; left: 140mm; } .page--6 .panel--p3 { position: absolute; top: 65mm; left: 140mm; width: 50mm; height: 155mm; } .page--6 .panel--p9 img { width: 272mm; height: 222mm; object-fit: cover; object-position: left center; transform: translateX(-61.5mm); display: block; } .page--6.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--6 .text-box h3 { font-size: 18px; margin: 0 0 8px; } .page--6 .text-box p { margin: 0 0 6px; } </style> <div class="page-container"><!-- 5페이지 --> <div class="a4-page page page--5 color-black"> <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="photo 1" 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="photo 2" 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--p3"><a data-lightbox="page12" data-title="photo 3" 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> <div class="footer align-left">- Page 5 -</div> </div> <!-- 6페이지 --> <div class="a4-page page page--6 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="panel panel—p2"><a data-lightbox="album" data-title="Top Right" href="/files/attach/images/2025/05/14/4020a34df72660453772a6f9c00bed58.jpg"><img alt="Top Right" src="/files/attach/images/2025/05/14/4020a34df72660453772a6f9c00bed58.jpg" /> </a></div> <div class="text-box"> <h3>조용한 오후의 초콜릿</h3> <p>창밖의 흐릿한 빛 아래, 회색 후드 속에 숨겨진 작은 일상.<br /> 무심한 듯 건네는 초콜릿 하나에도 온기가 담긴다.</p> <p>#후드티 #초콜릿 #고요한순간</p> </div> </div> <div class="footer align-right">- Page 6 -</div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/lightbox2@2/dist/js/lightbox.min.js"></script>