[디자인블럭] he31 : 상품정보고시 – 제품 상세정보를 신뢰감 있게 전달하는 정보 블럭

 

 

 

 

 

 

✅ [디자인블럭] he31 : 상품정보고시 – 제품 상세정보를 신뢰감 있게 전달하는 정보 블럭

 

 

 

 

 

🔠 블럭개요

상품의 원재료, 원산지, 보관법 등 핵심 정보들을 테이블 형식으로 정리해 소비자의 이해를 돕는 정보 고시 블럭입니다.

 

 

 

 

 

📌 사용목적

• 제품 구매 전 고객이 가장 궁금해하는 핵심 정보를 간단명료하게 정리
• 법적 고시사항 및 제품 신뢰도 확보 목적
• 식품, 건강기능식품, 생활용품 등 정보 고시가 필수인 상품에 적합

 

 

 

 

 

🎨 디자인 특징

• 테이블 기반 레이아웃으로 정보 구조화
• "상품명, 원재료명, 함량, 원산지, 보관방법"의 고정 필드 구성
• 보조 텍스트는 별도 하단 안내로 배치해 가독성 확보
• 모바일에서도 가로 스크롤 가능한 구조로 반응형 대응
• 은은한 음영과 박스형 디자인으로 구분감 강화

 

 

 

 

 

❄️ 활용 예시 (제품/브랜드 등)

• 식품 브랜드 / 건강식품
“문어가 100%라서 믿고 먹을 수 있었어요. 원산지까지 명확하게 표시되어 좋았어요.”
→ 원재료와 원산지를 강조해 소비자 신뢰 확보

 

• 뷰티 브랜드 / 기능성 화장품
“성분과 함량을 한눈에 확인할 수 있어 안심됐습니다.”
→ 기능성 제품의 성분 고시 필수 조건 충족

 

• 생활용품 / 주방도구
“소재 정보가 잘 정리되어 있어 품질을 믿을 수 있었어요.”
→ 실리콘, 스테인리스 등 소재 정보 표시에 효과적

 

• 전자제품 / 생활가전
“보관과 사용 시 주의사항까지 안내돼서 제품 관리에 유용했어요.”
→ 사용 환경, 보관법 등을 안내하는 데 적합

 

• 교육/문구류 / 어린이 제품
“아이 물건이라 성분이나 원산지가 중요했는데 잘 표기돼 있네요.”
→ 어린이용 제품에 필수적인 고시 정보 구성에 유리

 

 

 

 

 

📢 마케팅 콘텐츠 확장 예시

• SNS 카드뉴스
→ 원재료 정보와 함께 제품의 신뢰 포인트를 카드로 구성해 브랜드 신뢰감 강화

 

• 쇼핑몰 상세페이지
→ 제품 설명 하단에 본 블럭 삽입해 구매 결정 유도

 

• 오프라인 매장 POP
→ 테이블 형태 그대로 출력하여 소비자가 제품 정보를 바로 확인할 수 있도록 제작

 

• 블로그 콘텐츠
→ 제품 리뷰에 블럭 형태로 정보 고시 삽입 시 전문성과 신뢰도 동시 확보

 

 

 

 

 

💻 HTML 설명

상품 정보는 <table> 요소를 활용해 정리하며, 각 항목은 <th>(항목명), <td>(내용)로 구성됩니다. 보조 안내문은 <p> 태그와 <br> 태그를 이용해 줄바꿈 처리합니다. 스타일은 반응형 대응을 위해 .tableArea에 overflow-x: auto를 적용하며, 테두리와 음영 처리로 시각적 구분을 강화합니다. 모바일 환경에서도 정보 확인이 용이하도록 설계되었습니다.

 

 

 

 

 

👉 커스터마이징 팁

• 항목 추가/삭제: 상품 유형에 따라 “유통기한”, “알레르기 유발 성분” 등 항목을 추가
• 색상 커스터마이징: 브랜드 색상에 맞춰 테이블 헤더 배경 또는 텍스트 색상 조정
• 고시문 통일: 다수 제품 페이지에 일괄 적용 시 CSS 클래스를 공통으로 관리해 효율적으로 운영

 

 

 

 

 

 

 

 

html

<!-- he31 : 상품정보고시 -->
<div class="he31">
  <div class="row">
    <div class="col-sm-12 col-md-12 col-lg-10 mx-auto">
      <div class="box">


        <div class="titArea">
          <p class="title">상품정보고시</p>
        </div>


        <div class="tableArea">
          <table>
            <tbody>
              <tr>
                <th>상품명</th>
                <td>활문어 / 자숙 문어</td>
              </tr>
              <tr>
                <th>원재료명</th>
                <td>문어 100%</td>
              </tr>
              <tr>
                <th>함량</th>
                <td>100%</td>
              </tr>
              <tr>
                <th>원산지</th>
                <td>국내산</td>
              </tr>
              <tr>
                <th>보관방법</th>
                <td>수령 즉시 냉장(0~5℃) 보관, 빠른 섭취 권장</td>
              </tr>
            </tbody>
          </table>
        </div>


        <div class="txtArea">
          <p class="desc">
            ※ 살아있는 문어는 수령 후 빠른 손질 및 섭취를 권장합니다<br>
            ※ 냉동 보관 시 식감과 품질이 저하될 수 있습니다<br>
            ※ 흐르는 물에 깨끗이 세척한 후 요리해 주세요<br>
            ※ 문어 다리의 흡착판 탈락은 자연스러운 현상으로 품질에는 이상 없습니다
          </p>
        </div>


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

 

 

 

 

 

 

css

/*****************************************************************
he31 : 상품정보고시
*****************************************************************/
.he31 {
    padding: 0px 0;
}

.he31 .row {}

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

.he31 .box {
    padding: 10px;
    border: 0px solid #eee;
}

/*  */
.he31 .titArea {
    text-align: center;
}

.he31 .titArea .title {
    margin: 10px 0;
    font-weight: bold;
    font-size: 1.250em;
    color: #333;
}

/*  */
.he31 .tableArea {
    overflow-x: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.he31 .tableArea table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.0em;
    text-align: left;
}

.he31 .tableArea th,
.he31 .tableArea td {
    padding: 10px 10px;
    border: 1px solid #ddd;
}

.he31 .tableArea th {
    background: #f8f8f8;
    font-weight: 600;
    width: 30%;
    color: #333;
}

.he31 .tableArea td {
    color: #555;
}

/*  */
.he31 .txtArea {
    margin: 15px 0;
}

.he31 .txtArea .desc {
    font-size: 0.750em;
    color: #888;
}

@media screen and (min-width: 768px) {}