page 5 new 5
<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 {
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;
}
@media (max-width: 767px) {
.page5-a5 {
width: 100%;
max-width: 420px;
margin: 0 auto 40px;
}
}
</style>
<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>
by eGrida posted May 14, 2025
