3P : 14 2
<!-- 모바일 축소를 위한 래퍼 -->
<div class="pdf-scale-wrapper">
<!-- 기존 A4 페이지 레이아웃 -->
<div class="pdf-a4-wrapper">
<!-- Page 14 -->
<div class="pdf-page white" data-page-name="14페이지" style="padding: 10mm 10mm;">
<!-- 상단 문구 -->
<div class="pdf-header left">반대의 배치, 다른 균형</div>
<!-- 사진 그룹 (좌: 정방형 2장 / 우: 세로사진) -->
<div class="photo-group" data-group="group14" style="display: flex; gap: 2mm; justify-content: center; margin-top: -10mm;">
<!-- 왼쪽: 정방형 2장 세로배치 -->
<div class="left-square-stack" style="display: flex; flex-direction: column; gap: 2mm;">
<a href="/files/attach/images/2025/05/02/628c74f0cac8f286377628cac8044f4d.jpg" data-lightbox="group14">
<img src="/files/attach/images/2025/05/02/628c74f0cac8f286377628cac8044f4d.jpg" alt="정방형1" style="width: 80mm; aspect-ratio: 1 / 1; object-fit: cover;" />
</a>
<a href="/files/attach/images/2025/05/02/22f2789842dbc9ef1684f54126289c95.jpg" data-lightbox="group14">
<img src="/files/attach/images/2025/05/02/22f2789842dbc9ef1684f54126289c95.jpg" alt="정방형2" style="width: 80mm; aspect-ratio: 1 / 1; object-fit: cover;" />
</a>
</div>
<!-- 오른쪽: 세로 사진 (40:81 비율) -->
<div class="right-vertical" style="display: flex; flex-direction: column;">
<a href="/files/attach/images/2025/05/02/ae787cf5dc14a4560fe9522e9ef91ab4.jpg" data-lightbox="group14">
<img src="/files/attach/images/2025/05/02/ae787cf5dc14a4560fe9522e9ef91ab4.jpg" alt="세로사진" style="width: 80mm; aspect-ratio: 40 / 81; object-fit: cover;" />
</a>
</div>
</div>
<!-- 글상자 -->
<div class="text-box bordered left-align">
<h2 class="title">균형의 전환</h2>
<p class="body">이전과 반대의 구도를 통해 시선의 흐름과 공간의 중심을 전환했습니다. 오른쪽으로 기울어진 무게 중심이 더 동적인 인상을 남깁니다.</p>
<p class="desc">같은 구성요소도 위치가 바뀌면 전혀 다른 긴장감을 만들어냅니다.</p>
</div>
<!-- 페이지 번호 -->
<div class="pdf-footer center">14. 반대의 배치 -</div>
</div> <!-- .pdf-page -->
</div> <!-- .pdf-a4-wrapper -->
</div> <!-- .pdf-scale-wrapper -->
by eGrida posted May 02, 2025
