[디자인블럭] he09 : 제품특이정보 - 핵심 특장점 강조형 아이콘 블럭

2x3단 / 3x2단 변형 가능

 

 

 

 

 

✅ [디자인블럭] he09 : 제품특이정보 - 핵심 특장점 강조형 아이콘 블럭

 

📌 블럭 개요

he09는 제품이나 브랜드의 주요 장점들을 아이콘과 짧은 문장으로 간결하게 전달하는 신뢰 포인트 강조형 블럭입니다.
배경 이미지 위에 직관적인 카드형 콘텐츠를 격자 배치하여, 브랜드 가치를 감각적으로 요약할 수 있습니다.

---

 

 

🎯 사용 목적

• 브랜드 혹은 제품의 신뢰도·신선도·철학 등 간접 가치를 강조하고 싶을 때
• 텍스트 설명보다는 비주얼 중심의 간결한 표현 방식이 필요한 콘텐츠에 적합
• 상세페이지의 상단 또는 하단에서 브랜드 차별점 또는 약속 사항 요약용으로 활용 가능
• 구매 전에 고객이 신뢰할 수 있는 요소를 빠르게 인지하도록 설계

---

 

 

🧩 디자인 특징

• 6가지 특장점을 카드형 구조로 배치한 아이콘 강조형 레이아웃
• 각 항목은 아이콘 + 제목 + 설명의 3단 구성으로 사용자 이해도를 높임
• 배경 이미지 위에 겹쳐지는 스타일로 시각적인 집중도와 감성 전달을 동시에 실현
• 콘텐츠가 많지 않아도 정보가 압축되어 한눈에 들어오는 UX 구조
• 아이콘 색상, 텍스트 수, 배치 수 등 커스터마이징 범용성도 우수

---

 

 

📱 활용 예시

• 식품: 산지 직송, 무첨가, 당일 발송, 제철 수확 등 브랜드 신뢰 요소 표현
• 전자제품: 정품 인증, 빠른 A/S, 에너지 절감, 친환경 포장 등
• 뷰티/건강: 저자극, 임상 테스트 완료, 유기농 성분, 무색소
• 교육/서비스: 전문 설계, 1:1 관리, 빠른 응답, 체계적 시스템 등

수산물·농산물에만 한정되지 않으며,
어떤 상품이든 브랜드 약속·핵심 강점을 요약 전달하는 목적으로 범용적으로 활용할 수 있습니다.

 

 

---

💻 HTML 설명

• .imgArea는 전체 배경 이미지를 채우는 구조이며, 콘텐츠 위에 흐릿한 이미지 느낌을 연출
• .listArea는 position: absolute로 중앙에 배치되며,
  display: grid를 사용해 2열 3행 형태의 정렬
• .listItem은 반투명 배경(rgba(255,255,255,0.7))을 적용해
  배경 이미지와 정보 블럭이 자연스럽게 어우러지도록 구성됨
• 각 리스트 항목은 다음 요소로 구성:
  1. .icon: Material Icons 기반 원형 컬러 아이콘
  2. .title: 강조 문구 (짧고 굵은 키워드)
  3. .desc: 간략 설명 텍스트 (2줄 이내)
• 반응형 그리드로 모바일/PC 모두 안정적인 비율 유지
• 기본 구조는 6개 항목을 기준으로 작성되어 있으나,
  항목 수 조정(4개, 8개 등) 및 컬럼 수 변경도 grid 속성 조정으로 손쉽게 대응 가능

 

 

 

 

 

html

<!-- he09 : 제품특이정보 -->
<div class="he09">
  <div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12">
      <div class="box">


        <div class="imgArea">
          <img src="{{$template}}/img/_hes/he09/he09_img01.png" alt="신선한 농산물 배경">
        </div>


        <div class="listArea">
          <div class="listItem">
            <div class="icon">
              <span class="material-icons">eco</span>
            </div>
            <p class="title">신선함 가득</p>
            <p class="desc">당일 수확, 당일 발송</p>
          </div>
          <div class="listItem">
            <div class="icon">
              <span class="material-icons">verified</span>
            </div>
            <p class="title">철저한 품질 관리</p>
            <p class="desc">엄격한 선별로 믿을 수 있어요</p>
          </div>
          <div class="listItem">
            <div class="icon">
              <span class="material-icons">restaurant</span>
            </div>
            <p class="title">다양한 활용</p>
            <p class="desc">간편하게 요리에 사용하세요</p>
          </div>
          <div class="listItem">
            <div class="icon">
              <span class="material-icons">local_shipping</span>
            </div>
            <p class="title">빠른 직배송</p>
            <p class="desc">신선함 그대로 고객님 댁까지</p>
          </div>
          <div class="listItem">
            <div class="icon">
              <span class="material-icons">spa</span>
            </div>
            <p class="title">자연 그대로</p>
            <p class="desc">불필요한 가공 없는 건강함</p>
          </div>
          <div class="listItem">
            <div class="icon">
              <span class="material-icons">emoji_nature</span>
            </div>
            <p class="title">제철 농산물</p>
            <p class="desc">가장 맛있는 시기에 배송</p>
          </div>
        </div>


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

 

 

 

 

 

css

/*****************************************************************
he09 : 제품특이정보
*****************************************************************/
.he09 {
    
}

.he09 .row>div {
    padding: 0px;
}

.he09 .box {
    position: relative;
    width: 100%;
}

.he09 .imgArea {
    width: 100%;
}

.he09 .imgArea img {
    width: 100%;
}

.he09 .listArea {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    gap: 5px;
    z-index: 2;
    text-align: center;
}

.he09 .listItem {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 5px;
    padding: 20px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.he09 .icon {
    width: 60px;
    height: 60px;
    background: #73a500;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.he09 .icon .material-icons {
    font-size: 2.5em;
    color: #fff;
}

.he09 .title {
    margin-bottom: 5px;
    font-weight: 700;
    font-size: 1.5em;
    color: #111;
}

.he09 .desc {
    font-size: 1.125em;
    color: #555;
}