page 1-6 new
<style type="text/css">.page1-a5 {
width: 420px;
height: 595px;
position: relative;
background-image: url('/files/attach/images/2025/04/30/ea837362da02d633b8b0168375e79183.jpg');
background-size: 200% auto;
background-repeat: no-repeat;
background-position: left center;
overflow: hidden;
border: 1px solid #ccc;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
margin: 0 auto;
}
.page1 {
width: 297.5px;
aspect-ratio: 1 / 1;
overflow: hidden;
position: absolute;
left: 0;
}
.page1.p1 {
top: 0;
}
.page1.p2 {
top: 297.5px;
}
.page1 img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.page2-a5 {
width: 420px;
height: 595px;
position: relative;
background-image: url('/files/attach/images/2025/04/30/ea837362da02d633b8b0168375e79183.jpg');
background-size: 200% auto;
background-repeat: no-repeat;
background-position: right center;
overflow: hidden;
border: 1px solid #ccc;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
margin: 0 auto;
}
.page2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-40%, -50%);
width: 70%;
aspect-ratio: 1 / 1;
overflow: hidden;
box-shadow: 0 0 4px rgba(0,0,0,0.2);
}
.page2 img {
width: 100%;
height: 100%;
object-fit: cover;
}
.page3-a5 {
width: 420px;
height: 595px;
margin: 0 auto;
background-color: white;
border: none;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.page3 {
position: absolute;
background-repeat: no-repeat;
}
.page3.p1 {
width: 275px;
height: 140px;
left: 0;
bottom: 280px;
z-index: 1;
}
.page3.p2 {
width: 275px;
height: 275px;
left: 0;
bottom: 0;
z-index: 1;
}
.page3.p3 {
width: 140px;
height: 420px;
left: 280px;
bottom: 0;
background-image: url('/files/attach/images/2025/05/13/29f6a1a4707e7c878080754974dd5088.jpg');
background-size: 560px 420px;
background-position: left center;
z-index: 0;
}
.page3 img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.page4-a5 {
width: 420px;
height: 595px;
margin: 0 auto;
background-color: white;
border: none;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.page4 {
position: absolute;
width: 420px;
height: 420px;
left: 0;
bottom: 0;
background-image: url('/files/attach/images/2025/05/13/29f6a1a4707e7c878080754974dd5088.jpg');
background-size: 560px 420px;
background-position: right center;
background-repeat: no-repeat;
z-index: 0;
}
.page4-tbox {
position: absolute;
top: 20px;
width: 70%;
right: 5%;
background: rgba(255, 255, 255, 0.9);
padding: 16px;
box-shadow: 0 0 6px rgba(0,0,0,0.1);
font-size: 13px;
line-height: 1.4;
z-index: 2;
}
.page4-tbox h3 {
font-size: 16px;
margin: 0 0 8px;
}
.page4-tbox p {
margin: 0 0 6px;
}
.page5-a5 {
width: 420px;
height: 595px;
margin: 0 auto;
background-color: white;
border: none;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.page5 {
position: absolute;
}
.page5.p1 {
width: 100px;
height: 157px; /* 조정: p1과 p3 사이를 5mm 확보하기 위해 줄임 */
right: 0;
top: 5mm;
z-index: 1;
}
.page5.p2 {
width: 155px; /* 조정: p2와 p3 사이를 5mm 확보하기 위해 줄임 */
height: 232.5px; /* 2:3 비율 유지 */
left: 0;
bottom: 10mm;
z-index: 1;
}
.page5.p3 {
width: 250px;
height: 375px;
right: 0;
bottom: 10mm;
z-index: 1;
}
.page5 img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.page6-a5 {
width: 420px;
height: 595px;
margin: 0 auto;
background-color: white;
border: none;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.page6 {
position: absolute;
background-repeat: no-repeat;
}
.page6.p1 {
width: 270px;
height: 360px; /* 3:4 세로 비율 */
left: 5mm;
top: 5mm;
z-index: 1;
}
.page6.p2 {
width: 125px;
height: 125px; /* 1:1 정방향 */
right: 0mm;
top: 5mm;
z-index: 1;
}
.page6.p3 {
width: 125px;
height: 227px;
right: 0mm;
top: calc(5mm + 125px + 2mm); /* p2 아래 2mm 여백 */
z-index: 1;
}
.page6-tbox {
position: absolute;
bottom: 10mm;
right: 2mm;
width: 200px;
background: rgba(255, 255, 255, 0.9);
padding: 10px;
box-shadow: 0 0 6px rgba(0,0,0,0.1);
font-size: 10px;
line-height: 1.4;
z-index: 2;
}
.page6-tbox h3 {
font-size: 16px;
margin: 0 0 8px;
}
.page6-tbox p {
margin: 0 0 6px;
}
.page6 img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ✅ 모바일 대응 */
@media (max-width: 767px)
.page1-a5 {
background-position-x: left;
}
.page2-a5 {
background-position-x: right;
}
.page1 {
left: 0; /* 왼쪽에 정확히 붙이기 */
}
.page2 {
left: 50%;
transform: translate(-50%, -50%);
}
.page6-a5;
.page5-a5;
.page4-a5;
.page3-a5 {
width: 100%;
max-width: 420px;
margin: 0 auto 40px;
}
}
</style>
<div class="spread">
<div class="page1-a5">
<div class="page1 p1"><a data-lightbox="album" data-title="Top Left" href="/files/attach/images/2025/04/30/0493a3f881d83c0263211d06af551990.jpg"><img alt="Top Left" src="/files/attach/images/2025/04/30/0493a3f881d83c0263211d06af551990.jpg" /> </a></div>
<div class="page1 p2"><a data-lightbox="album" data-title="Bottom Left" href="/files/attach/images/2025/04/30/aed9d0c3fbcc3bd8a5a1e2070ce3fcaf.jpg"><img alt="Bottom Left" src="/files/attach/images/2025/04/30/aed9d0c3fbcc3bd8a5a1e2070ce3fcaf.jpg" /> </a></div>
</div>
<div class="page2-a5">
<div class="page2"><a data-lightbox="album" data-title="Right Highlight" href="/files/attach/images/2025/04/30/ea837362da02d633b8b0168375e79183.jpg"><img alt="Right Highlight" src="/files/attach/images/2025/04/30/ea837362da02d633b8b0168375e79183.jpg" /> </a></div>
</div>
</div>
<p> </p>
<div class="spread">
<div class="page3-a5">
<div class="page3 p2"><a data-lightbox="album" data-title="Bottom Left" href="/files/attach/images/2025/04/30/aed9d0c3fbcc3bd8a5a1e2070ce3fcaf.jpg"><img alt="Bottom Square" src="/files/attach/images/2025/04/30/aed9d0c3fbcc3bd8a5a1e2070ce3fcaf.jpg" /> </a></div>
<div class="page3 p1"><a data-lightbox="album" data-title="Top Left (16:9)" href="/files/attach/images/2025/04/30/9eacc12e05e7a13cae22c45d941614d2.jpg"><img alt="Top Rect" src="/files/attach/images/2025/04/30/9eacc12e05e7a13cae22c45d941614d2.jpg" /> </a></div>
<div class="page3 p3"> </div>
</div>
<div class="page4-a5">
<div class="page4"> </div>
<div class="page4-tbox">
<h3>Desert Echoes</h3>
<p>사막의 아침 공기가 아직 따스함을 품기 전</p>
<p>고요한 장면을 담은 한 컷</p>
<p>#빛 #바람 #침묵</p>
</div>
</div>
<p> </p>
<div class="page5-a5"><!-- p1: 상단 오른쪽, 세로 비율 4:5 (수정됨) -->
<div class="page5 p1"><a data-lightbox="album" data-title="Top Right" href="/files/attach/images/2025/05/13/9e6951c0ae1c2dcfdfde24e7880e5f69.jpg"><img alt="Top Right" src="/files/attach/images/2025/05/13/9e6951c0ae1c2dcfdfde24e7880e5f69.jpg" /> </a></div>
<!-- p2: 하단 왼쪽, 세로 비율 2:3 (수정됨) -->
<div class="page5 p2"><a data-lightbox="album" data-title="Bottom Left" href="/files/attach/images/2025/05/13/964c45c07e7c9e0c22077a9c6842a98f.jpg"><img alt="Bottom Left" src="/files/attach/images/2025/05/13/964c45c07e7c9e0c22077a9c6842a98f.jpg" /> </a></div>
<!-- p3: 하단 오른쪽, 가로 250px에 2:3 비율 -->
<div class="page5 p3"><a data-lightbox="album" data-title="Bottom Right" href="/files/attach/images/2025/05/13/1924fdcee942825449910ea4b4db917c.jpg"><img alt="Bottom Right" src="/files/attach/images/2025/05/13/1924fdcee942825449910ea4b4db917c.jpg" /> </a></div>
</div>
<div class="page6-a5"><!-- p1: 상단 왼쪽, 세로 2:3 -->
<div class="page6 p1"><a data-lightbox="album" data-title="Top Left" href="/files/attach/images/2025/05/14/44c0a7a133cf6750be9b0461f788ce70.jpg"><img alt="Top Left" src="/files/attach/images/2025/05/14/44c0a7a133cf6750be9b0461f788ce70.jpg" /> </a></div>
<!-- p2: 상단 오른쪽, 정방형 1:1 -->
<div class="page6 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>
<!-- p3: p2 아래 5mm 간격, 세로형 16:9 -->
<div class="page6 p3"><a data-lightbox="album" data-title="Bottom Right" href="/files/attach/images/2025/05/14/de93bf8cda7cd091f2b003e7aa6d3dd9.jpg"><img alt="Bottom Right" src="/files/attach/images/2025/05/14/de93bf8cda7cd091f2b003e7aa6d3dd9.jpg" /> </a></div>
<!-- 텍스트 박스: 하단 오른쪽 배치 -->
<div class="page6-tbox">
<h3>Desert Echoes</h3>
<p>사막의 아침 공기가 아직 따스함을 품기 전</p>
<p>고요한 장면을 담은 한 컷</p>
<p>#빛 #바람 #침묵</p>
</div>
</div>
</div>
by eGrida posted May 14, 2025
