page 5 new 3
<style type="text/css">
.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, .page5.p2, .page5.p3 {
width: 140px;
height: 210px; /* 2:3 비율 */
}
.page5.p1 {
right: 0;
top: 10mm;
z-index: 1;
}
.page5.p2 {
left: 0;
bottom: 10mm;
z-index: 1;
}
.page5.p3 {
right: 0;
bottom: 10mm;
z-index: 1;
}
.page5 img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 767px) {
.page5-a5 {
width: 100%;
max-width: 420px;
margin: 0 auto 40px;
}
}
</style>
<div class="page5-a5">
<!-- 오른쪽 상단 세로 사진 -->
<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>
<!-- 왼쪽 하단 세로 사진 -->
<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>
<!-- 오른쪽 하단 세로 사진 -->
<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>
by eGrida posted May 14, 2025
