상세페이지 구조 견본(상·중·하 3구간)

D-목업-상세페이지-구조

언제 쓰는가

상세페이지 기획·개선 제안에서 전체 흐름을 구간별로 보여줄 때. 화면 3개 고정, 구간별 블록 3~4개(총 10개). 설명 3행. 값 바꾸는 법: 블록 이름과 설명만 교체. 사진 블록은 class="bk im", 블록 안 채움은 .fi(칸 수는 i 개수, 줄은 .fi.v, 버튼은 .fi.bt). 구간별 3~4개, 총 10개 기준.

참고

커머스 상세페이지 구성 관행(후킹, 근거, 후기, 구매 유도 순서), 스마트스토어·쿠팡 상위 상품 상세 구조 일반. 화면 구성과 규격만 참고, HTML·CSS 직접 제작. 로고·캡처 이미지 미사용.

조각

<div class="dk dk-mdpst">
  <div class="lf">
    <div class="fr">
      <div class="fc"><p class="fl">상단 · 후킹</p><div class="ph mock n"><div class="sb"><span>9:41</span><i></i></div><div class="wf"><div class="bk im"><div class="bh"><span class="no">01</span><p>대표 장면과 핵심 혜택<small>한 줄 제목과 제품 사진</small></p></div><div class="fi"><i></i></div></div><div class="bk"><div class="bh"><span class="no">02</span><p>신뢰 수치 3개<small>후기 수, 재구매율, 평점</small></p></div><div class="fi"><i></i><i></i><i></i></div></div><div class="bk"><div class="bh"><span class="no">03</span><p>고객 문제 공감<small>검색어 그대로의 고민 문장</small></p></div><div class="fi v"><span class="ln" style="width:92%"></span><span class="ln" style="width:74%"></span><span class="ln" style="width:55%"></span></div></div></div></div></div>
      <div class="fc"><p class="fl">중단 · 설득</p><div class="ph mock n"><div class="sb"><span>9:41</span><i></i></div><div class="wf"><div class="bk im"><div class="bh"><span class="no">04</span><p>해결 원리<small>도식 한 장으로 설명</small></p></div><div class="fi"><i></i></div></div><div class="bk"><div class="bh"><span class="no">05</span><p>성분·인증 근거<small>시험 성적, 인증 마크</small></p></div><div class="fi"><i></i><i></i><i></i></div></div><div class="bk"><div class="bh"><span class="no">06</span><p>사용 전후 비교<small>같은 조건의 사진 2장</small></p></div><div class="fi"><i></i><i></i></div></div><div class="bk"><div class="bh"><span class="no">07</span><p>구매 후기 3건<small>사진 후기 우선</small></p></div><div class="fi v"><span class="ln" style="width:92%"></span><span class="ln" style="width:74%"></span><span class="ln" style="width:55%"></span></div></div></div></div></div>
      <div class="fc"><p class="fl">하단 · 구매</p><div class="ph mock n"><div class="sb"><span>9:41</span><i></i></div><div class="wf"><div class="bk"><div class="bh"><span class="no">08</span><p>구성과 옵션<small>세트 구성표, 추천 옵션</small></p></div><div class="fi"><i></i><i></i><i></i></div></div><div class="bk"><div class="bh"><span class="no">09</span><p>자주 묻는 질문<small>배송, 교환, 사용법</small></p></div><div class="fi v"><span class="ln" style="width:92%"></span><span class="ln" style="width:74%"></span><span class="ln" style="width:55%"></span></div></div><div class="bk"><div class="bh"><span class="no">10</span><p>구매 버튼<small>혜택 마감 시점과 함께</small></p></div><div class="fi bt"><i></i></div></div></div></div></div>
    </div>
    <p class="cap">구성 예시, 실제 소재 아님</p>
  </div>
  <div class="rt">
    <p class="dk-lb">자사 · 상세페이지</p>
    <h3>구간별 블록 구성</h3>
    <dl>
      <div><dt>상단</dt><dd>대표 장면과 핵심 혜택, 신뢰 수치, 고객 문제 공감. 3초 안에 계속 볼 이유 제시</dd></div>
      <div><dt>중단</dt><dd>해결 원리, 성분·인증 근거, 사용 전후, 후기. 의심 해소 구간</dd></div>
      <div><dt>하단</dt><dd>구성·옵션, 자주 묻는 질문, 배송·교환, 구매 버튼. 망설임 제거 구간</dd></div>
    </dl>
  </div>
</div>

스타일

.dk-mdpst{display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px;align-items:center}
.dk-mdpst .lf{display:flex;flex-direction:column;align-items:center;gap:10px}
.dk-mdpst .fr{display:flex;gap:18px;align-items:flex-start}
.dk-mdpst .fc{display:flex;flex-direction:column;align-items:center;gap:6px}
.dk-mdpst .fl{font-size:var(--f-cap);font-weight:600;color:var(--ink2);margin:0}
.dk-mdpst .cap{font-size:var(--f-cap);color:var(--mu);margin:0}
.dk-mdpst .rt .dk-lb{margin:0 0 4px}
.dk-mdpst .rt h3{font-size:var(--f-lg);font-weight:700;margin:0 0 var(--s3);letter-spacing:-.02em;line-height:1.35}
.dk-mdpst .rt dl{margin:0;border-top:1px solid var(--line2)}
.dk-mdpst .rt dl div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:var(--s4);padding:13px 0;border-bottom:1px solid var(--line)}
.dk-mdpst .rt dt{font-size:var(--f-sm);font-weight:600;color:var(--mu);padding-top:2px}
.dk-mdpst .rt dd{margin:0;font-size:var(--f-body);color:var(--ink2)}
.dk-mdpst .ph{width:300px;height:372px;border:5px solid var(--ink);border-radius:24px;background:#fff;overflow:hidden;display:flex;flex-direction:column;font-size:11px;line-height:1.4;color:#222;letter-spacing:-.01em;text-align:left;position:relative}
.dk-mdpst .ph.n{width:232px}
.dk-mdpst .ph.dkm{background:#242424;color:#fff}
.dk-mdpst .ph>*{flex:none}
.dk-mdpst p{margin:0}
.dk-mdpst .ph b{color:inherit;font-weight:700}
.dk-mdpst .sb{display:flex;justify-content:space-between;align-items:center;padding:6px 16px 3px;font-size:10px;font-weight:600}
.dk-mdpst .sb i{display:block;width:16px;height:8px;border:1px solid currentColor;border-radius:2px;opacity:.7}
.dk-mdpst .g{background:var(--soft);border-radius:4px;flex:none;display:flex;align-items:center;justify-content:center;color:#a39d98;font-size:9px}
.dk-mdpst .ln{display:block;height:6px;border-radius:3px;background:var(--g1)}
.dk-mdpst .fx{display:flex;align-items:center;gap:6px}
.dk-mdpst .col{display:flex;flex-direction:column;gap:2px;min-width:0}
.dk-mdpst .sp{justify-content:space-between}
.dk-mdpst .f1{flex:1;min-width:0}
.dk-mdpst .t9{font-size:9px}
.dk-mdpst .t10{font-size:10px}
.dk-mdpst .t12{font-size:12px}
.dk-mdpst .t13{font-size:13px}
.dk-mdpst .bd{font-weight:700}
.dk-mdpst .mu{color:#8b8f94}
.dk-mdpst .hr{height:6px;background:#f0f1f3}
.dk-mdpst .pd{padding:8px 12px}
.dk-mdpst .ic{display:inline-block;width:14px;height:14px;border:1.5px solid currentColor;border-radius:4px;flex:none}
.dk-mdpst .ic.o{border-radius:50%}
.dk-mdpst .av{width:22px;height:22px;border-radius:50%;background:var(--g1);flex:none}

.dk-mdpst .wf{flex:1!important;min-height:0;display:flex;flex-direction:column;gap:6px;padding:8px 10px 10px}
.dk-mdpst .bk{border:1px dashed var(--line2);border-radius:6px;padding:7px 8px;display:flex;flex-direction:column;gap:6px;flex:1;min-height:0}
.dk-mdpst .bh{display:flex;gap:7px;align-items:flex-start}
.dk-mdpst .fi{flex:1;min-height:0;display:flex;gap:5px}
.dk-mdpst .fi.v{flex-direction:column;justify-content:center;gap:6px}
.dk-mdpst .fi i{flex:1;border-radius:4px;background:var(--soft)}
.dk-mdpst .fi.bt i{background:var(--ink);flex:none;height:22px;align-self:center;width:100%;border-radius:6px}
.dk-mdpst .bk.im .fi i{background:var(--g1)}
.dk-mdpst .bk.im{background:var(--soft);border-style:solid;border-color:var(--soft)}
.dk-mdpst .no{font-size:9px;font-weight:700;color:var(--mu);font-variant-numeric:tabular-nums}
.dk-mdpst .bk p{font-size:11px;font-weight:600;color:var(--ink)}
.dk-mdpst .bk small{font-size:9px;color:var(--mu);display:block;font-weight:400}