본문: 사진 전면과 글 상자

사진이나 화면 캡처 한 장을 장 전체에 깔고, 왼쪽 아래 흰 상자에 결론과 설명. 촬영 시안, 현장 사진, 콘텐츠 예시. 글 상자 본문 3줄 이내. 값 바꾸는 법: .ph 자리에 사진을 배경으로 깔고(안내 글자 삭제), .box 안의 라벨·결론·설명·캡션 교체. 상자는 왼쪽 시작선(64px)에 고정.

장 레이아웃 유형 정리(madegooddesigns.com/slide-layout-ideas), Behance·Dribbble pitch deck·editorial slide layout 검색 결과의 공통 구성 의 full-bleed image + 글 상자, Behance editorial slide layout 의 사진 위 캡션 상자. 구성 방식만 참고, 코드와 문구는 직접 제작.

<section class="slide lo-photo-box">
  <div class="ph"><span>사진 자리 · 전면 1280 × 720</span></div>
  <div class="body">
    <div class="box">
      <p class="k">인플루언서 협업</p>
      <h1>사용 후기 영상을 상세페이지 첫 화면에 배치</h1>
      <p>리빙 분야 인플루언서 12명과 월 12건 제작. 같은 영상을 검색 광고와 디스플레이 광고 소재로 재사용</p>
      <p class="c">촬영 기준: 실제 거주 공간, 자연광, 제품 사용 장면 15초 이상</p>
    </div>
  </div>
  <div class="pg">20</div>
</section>

.slide.lo-photo-box{background:var(--soft)}
.slide.lo-photo-box .ph{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:flex-end;padding:40px 64px;font-size:var(--f-cap);color:var(--mu)}
.slide.lo-photo-box .body{position:relative;justify-content:flex-end;padding:0 0 24px}
.slide.lo-photo-box .box{width:560px;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:30px 36px 28px}
.slide.lo-photo-box .box p{margin:0;color:var(--ink2)}
.slide.lo-photo-box .box .k{font-weight:600;color:var(--ac)}
.slide.lo-photo-box h1{font-size:var(--f-h);font-weight:700;line-height:1.3;letter-spacing:-.025em;margin:6px 0 12px;text-wrap:balance}
.slide.lo-photo-box .box .c{font-size:var(--f-cap);color:var(--mu);margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}