[디자인블럭] he08 : 사이즈표 - 옵션 분류 및 정보 요약형 표 구성

테이블 구조 - 사이즈표 2단형

 

 

 

✅ 디자인블럭 he08 : 사이즈표 - 옵션 분류 및 정보 요약형 표 구성

 

📌 블럭 개요

he08은 제품의 사이즈, 용량, 구성 단위 등 옵션 정보를 표 형식으로 정리하여
소비자의 선택을 돕는 정보 중심 블럭입니다.
구매 전 비교/분류가 필요한 제품군에서 특히 유용하며,
텍스트만으로는 전달하기 어려운 내용을 구조적 레이아웃으로 명확하게 보여줍니다.

---

 

🎯 사용 목적

• 제품의 중량, 사양, 타입, 구성 단위 등에 따른 옵션 구분을 시각적으로 전달
• 고객이 자신의 용도에 맞는 선택 기준을 명확하게 이해하도록 유도
• 쇼핑몰 상품 상세페이지에서 옵션 선택 전 가이드 영역으로 활용
• 다양한 유형의 상품을 구조화하여 제시함으로써 구매전환율 향상에 기여

---

 

🧩 디자인 특징

• 상단 이미지 영역(imgArea): 제품 일러스트 또는 상징 이미지 삽입
• 옵션 비교 표(sizeTableArea):
  • 등급 / 개당 무게 또는 기준치 / 특징 요약 항목으로 구성
  • 예: S/M/L/XL 사이즈, 무게, 수용 인원, 제품 용도 등
• 구성 및 사용 안내 표(materialTableArea):
  • 포장 단위 / 용량(또는 수량) / 추천 활용처 항목
  • 다양한 고객 상황(1인용/가정용/업소용 등)에 맞춘 활용 제안 가능
• 두 표는 table 구조의 colgroup + tbody 기반으로 마크업되어 있어,
  스타일 확장 및 반응형 구성 시 유연하게 커스터마이징 가능
• 하단에는 주의 문구 또는 안내 텍스트 삽입 영역 포함 (※ 포장 방식에 따라 차이 안내 등)

---

 

📱 활용 예시 (수정된 일반 문단 스타일)

수산물을 예로 들면,
문어의 크기별 특징(특대~소)과 각 용도(구이/찜/캠핑 등)를 표로 정리하여
소비자가 자신의 요리 목적이나 상황에 맞는 사이즈를 쉽게 선택할 수 있도록 구성할 수 있습니다.

하지만 이 구조는 수산물에 한정되지 않고, 다양한 제품군에도 동일하게 적용 가능합니다. 예를 들어:

• 정육 제품: 중량별 등급, 부위별 조리 방법, 포장 단위 안내
• 전자기기: 모델별 스펙(RAM/저장용량 등) 및 용도별 추천 사용처
• 가공식품: 소/중/대 패키지별 용도, 보관 방식, 구성 품목 안내
• 패션/의류: 사이즈(S~XL)별 신체 조건, 체형별 스타일 매칭 제안

 

 

 

 

html

<!-- he08 : 사이즈표 -->
<div class="he08">
  <div class="row">
    <div class="col-sm-12 col-md-12 col-lg-10 mx-auto">
      <div class="box">


        <!-- 이미지 영역 -->
        <div class="imgArea">
          <img src="{{$template}}/img/_hes/he08/he08_img01.png" alt="문어 사이즈 비교 예시 이미지">
        </div>


        <!-- 사이즈 & 무게 비교표 -->
        <div class="sizeTableArea">
          <p class="title">✨ 사이즈별 특징</p>
          <table>
            <colgroup>
              <col>
              <col style="width: 30%;">
              <col style="width: 40%;">
            </colgroup>
            <thead>
              <tr>
                <th>등급</th>
                <th>개당 무게 (g)</th>
                <th>특징 요약</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>특대 (XXL)</td>
                <td><strong>1kg 이상</strong></td>
                <td>
                  비주얼 충격!<br>숙회·구이 등<br>메인 디쉬 전용
                </td>
              </tr>
              <tr>
                <td>대 (XL)</td>
                <td>600~999g</td>
                <td>
                  푸짐한 양감!<br>찜·조림에 딱<br>식당 전용 인기 사이즈
                </td>
              </tr>
              <tr>
                <td>중 (M)</td>
                <td>300~599g</td>
                <td>
                  간편 요리용!<br>문어덮밥·볶음에 활용도 굿
                </td>
              </tr>
              <tr>
                <td>소 (S)</td>
                <td>200~299g</td>
                <td>
                  캠핑용·1인분 요리<br>냉동보관도 간편
                </td>
              </tr>
            </tbody>
          </table>
          <p class="desc">
            ※ 손질 전 기준이며, 실중량은 손질 방식에 따라 달라질 수 있어요.
          </p>
        </div>


        <!-- 구성 & 추천 용도 -->
        <div class="materialTableArea">
          <p class="title">📦 구성 & 추천 용도</p>
          <table>
            <colgroup>
              <col>
              <col style="width: 30%;">
              <col style="width: 40%;">
            </colgroup>
            <thead>
              <tr>
                <th>구성</th>
                <th>포장 단위</th>
                <th>추천 사용</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1마리 단위</td>
                <td>개별 진공포장</td>
                <td>
                  캠핑, 혼밥족 추천<br>손질 간편·냉동 보관 용이
                </td>
              </tr>
              <tr>
                <td>2~3마리 세트</td>
                <td>1.5~2kg</td>
                <td>
                  소규모 가족용,<br>샐러드·덮밥 다용도 활용
                </td>
              </tr>
              <tr>
                <td>5kg 대용량</td>
                <td>식당·요식업체 전용</td>
                <td>
                  문어숙회·문어찜 등<br>대량 조리에 최적화
                </td>
              </tr>
            </tbody>
          </table>
          <p class="desc">
            ※ 중량은 손질/포장 방식에 따라 차이가 있을 수 있어요.
          </p>
        </div>


      </div>
    </div>
  </div>
</div>

 

 

 

 

 

css

/*****************************************************************
he08 : 사이즈표
*****************************************************************/
.he08 {
    position: relative;
    margin: 0px 0 50px;
    padding: 0px 0 0px;
    background-color: #fff;
}

.he08 .row>div {
    /* padding: 0px; */
}

/* 이미지 */
.he08 .imgArea {
    padding: 10px 0 10px;
    text-align: center;
}

.he08 .imgArea img {
    max-width: 300px;
    width: 100%;
    height: auto;
}

/* 사이즈표 */
.he08 .sizeTableArea {
    margin: 0px 0;
    padding: 10px 0 10px;
}

.he08 .sizeTableArea .title {
    margin-bottom: 15px;
    font-weight: 700;
    font-size: 1.5em;
}

.he08 .sizeTableArea table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    border-top: 1px solid #111;
}

.he08 .sizeTableArea th,
.he08 .sizeTableArea td {
    border-bottom: 1px solid #ddd;
    padding: 10px 5px;
    white-space: nowrap;
    text-align: left;
}

.he08 .sizeTableArea .desc {
    margin-top: 10px;
    font-size: 0.9em;
    color: #666;
    text-align: left;
}

/* 상품특성 */
.he08 .materialTableArea {
    margin: 0px 0 0px;
    padding: 50px 0 10px;
}

.he08 .materialTableArea .title {
    margin-bottom: 15px;
    font-weight: 700;
    font-size: 1.5em;
}

.he08 .materialTableArea table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    border-top: 1px solid #111;
}

.he08 .materialTableArea th,
.he08 .materialTableArea td {
    text-align: left;
}

.he08 .materialTableArea th,
.he08 .materialTableArea td {
    border-bottom: 1px solid #ddd;
    padding: 10px 5px;
    white-space: nowrap;
}

.he08 .materialTableArea .desc {
    margin-top: 10px;
    font-size: 0.9em;
    color: #666;
    text-align: left;
}

/* 미니망고 - 연노랑 */
.materialTableArea table tr.type-mini {
    background-color: #fffbe6;
}

/* 중과 - 연핑크 */
.materialTableArea table tr.type-mid {
    background-color: #fff0f3;
}

/* 대과 - 연민트 */
.materialTableArea table tr.type-large {
    background-color: #f0fdfa;
}

/* 특과 - 연보라 */
.materialTableArea table tr.type-premium {
    background-color: #f6f0ff;
}


/*  */
.he08 .materialTableArea .active {
    font-weight: 700;
}