nn5

<div class="pdf-a4-wrapper" style="display: flex; flex-direction: column; align-items: center;"> <!-- Page 5 --> <div class="pdf-page white" data-page-name="비정형 세로 확장" style="padding: 10mm;"> <div class="photo-group column" data-group="group5" style="display: flex; flex-direction: column; gap: 4mm;"> <div style="display: flex; justify-content: flex-start;"> <a href="/files/attach/images/2025/04/30/d0dd1f909b0ae15ff1e57b855a71189a.jpg" data-lightbox="group5" data-title="첫 번째 사진 (왼쪽 정렬)"> <img src="/files/attach/images/2025/04/30/d0dd1f909b0ae15ff1e57b855a71189a.jpg" alt="첫 번째 사진" style="width: 100mm; aspect-ratio: 2 / 3;"> </a> </div> <div style="display: flex; justify-content: flex-end; align-items: flex-start; gap: 10mm;"> <div class="text-box bordered left-align" style="width: calc(100% - 80mm); box-sizing: border-box;"> <h2 class="title">비정형 세로 확장</h2> <p class="body">이 레이아웃은 사진 배치에 따라 시선 이동이 달라지도록 구성됩니다. 텍스트는 시선을 안내하는 역할을 합니다.</p> <p class="desc">우측에 길게 세워진 사진과 좌측에 배치된 설명이 균형을 이룹니다.</p> </div> <a href="/files/attach/images/2025/04/30/89d3b27326ccef36a4a74af6a0a75068.jpg" data-lightbox="group5" data-title="세로 사진 (오른쪽 정렬)"> <img src="/files/attach/images/2025/04/30/89d3b27326ccef36a4a74af6a0a75068.jpg" alt="세로 사진" style="width: 60mm; aspect-ratio: 2 / 3; margin-right: 10mm;"> </a> </div> </div> <div class="pdf-footer center">5. 비정형 세로 확장 -</div> </div> </div>