디자인블럭 he06 : 구성/스펙 - 제품 타입 비교형 (2단 응용)

2단형 적용

 

 

 

✅ 디자인블럭 he06 — 제품 타입 비교형 (2단 응용)

 

📌 블럭 개요

he06은 제품의 활용 목적과 구매 상황을 기준으로 다양한 소비 시나리오를 보여주는 카드형 블럭입니다.
카드 하나하나가 “이럴 땐 이걸 쓰세요”라는 느낌을 주기 때문에, 제품의 활용도와 고객 상황 공감을 극대화할 수 있습니다.

---

🎯 사용 목적

• 제품별 용도/상황별 맞춤 제안을 시각적으로 전달
• “어떤 고객이 어떤 용도로 쓰면 좋은지”를 쉽게 이해시키기
• 소비자의 선택 고민을 줄이고, 바로 구매 행동으로 유도
• 다양한 라인업을 가진 브랜드에서 세부 상품 차별화 설명에 최적

---

🧩 디자인 특징

• 기본 2단 카드형 구성, 카드 수는 자유롭게 확장 가능
  • 모바일에서는 1단, PC에서는 2~4단 자동 전환
• 카드마다 타입명(상단 라벨) + 시각적 이미지 + 설명 텍스트로 구성
• 문어 제품을 예로 들면:
  • 활문어: 생물 그대로
  • 자숙문어: 손질 완제품
  • 대용량: 식당용/대량구매
  • 캠핑용: 불향 그릴 안주용 등
• 직관적인 키워드 강조와 소비자 입장에서의 표현 사용

---

📱 활용 예시

• 수산물 상세페이지:
  • 카드1: 활(活) 문어 — 신선한 생물, 시각적 임팩트
  • 카드2: 숙회용 자숙 문어 — 손질완료, 바로 먹는 용도
  • 카드3: 대용량 식당용 — 업소/대량 구매 대상
  • 카드4: 캠핑 직화용 — 불향, 안주용, 휴대성 강조
• 정육류: 구이용/샤브샤브용/국거리용/선물세트용 구분
• 반찬/가공식품/샐러드류: 조리완료/반조리/냉동/해동용 등
• 전자제품: 실내용/차량용/휴대용/사무용 같은 용도 분류

---

💡 확장 활용 팁

• 카드 수를 조정하여 2단/3단/4단까지 자유 확장
• 카드별 “자세히 보기” 버튼을 넣어 상세 설명 앵커로 이동 가능
• 제품 라벨(상단 파란색 박스)에 아이콘 삽입하여 인지도 향상
• 스크롤 시 카드 등장 애니메이션 추가로 역동성 강화 가능

 

 

 

 

html

<!-- he06 : 구성/스펙 -->
<div class="he06">
  <div class="row">


    <!-- 카드 1 : 무게 중심 -->
    <div class="col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4 mx-auto">
      <div class="box">
        <div class="box_inner">
          <div class="braArea">활(活) 문어</div>
          <div class="imgArea">
            <span><img src="{{$template}}/img/_hes/he06/he06_img01.jpg" alt="한 손에 들린 큼직한 문어 이미지"></span>
          </div>
          <div class="txtArea">
            <p class="desc">
              한 손에 꽉 찬 묵직함!<br>
              무게감부터 신뢰감 뿜뿜~<br>
              <strong>이건 진짜배기 자연산 문어</strong>
            </p>
            <p class="info">
              크기와 무게 모두 만족,<br>
              <strong>손맛+눈맛+먹는 맛 3박자!</strong>
            </p>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 2 : 요리 활용 중심 -->
    <div class="col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4 mx-auto">
      <div class="box">
        <div class="box_inner">
          <div class="braArea">숙회용 자숙 문어</div>
          <div class="imgArea">
            <span><img src="{{$template}}/img/_hes/he06/he06_img02.jpg" alt="숙회로 조리된 문어 슬라이스 이미지"></span>
          </div>
          <div class="txtArea">
            <p class="desc">
              탱글한 식감 그대로 살려서,<br>
              초장만 있으면 게임 끝!<br>
              <strong>문어 숙회로 최고의 안주 완성</strong>
            </p>
            <p class="info">
              초무침, 숙회, 샐러드까지<br>
              <strong>어떤 요리에도 OK</strong>
            </p>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 3 : 식당용/업소용 -->
    <div class="col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4 mx-auto">
      <div class="box">
        <div class="box_inner">
          <div class="braArea">대용량 식당용</div>
          <div class="imgArea">
            <span><img src="{{$template}}/img/_hes/he06/he06_img03.jpg" alt="박스에 담긴 대량 문어 이미지"></span>
          </div>
          <div class="txtArea">
            <p class="desc">
              대량 구매로도 신선도 보장!<br>
              업소용 대용량 박스 포장<br>
              <strong>바로 삶아서, 바로 플레이팅</strong>
            </p>
            <p class="info">
              <strong>횟집, 일식집, 선술집</strong>에서<br>
              즐겨 찾는 프리미엄 문어입니다.
            </p>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 4 : 캠핑/직화용 -->
    <div class="col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4 mx-auto">
      <div class="box">
        <div class="box_inner">
          <div class="braArea">캠핑 직화 필수템</div>
          <div class="imgArea">
            <span><img src="{{$template}}/img/_hes/he06/he06_img04.jpg" alt="숯불에 구운 문어 다리 이미지"></span>
          </div>
          <div class="txtArea">
            <p class="desc">
              불향 입은 문어 다리,<br>
              바삭탱글 이중 식감에 중독주의!<br>
              <strong>야외 캠핑에 완벽한 해산물 안주</strong>
            </p>
            <p class="info">
              캠핑장에서 불멍과 함께,<br>
              <strong>문어 다리 하나면 분위기 끝</strong>
            </p>
          </div>
        </div>
      </div>
    </div>


  </div>
</div>

 

 

 

 

 

css

/*****************************************************************
he06 : 구성/스펙
*****************************************************************/
.he06 {
    padding: 20px 0px 0px;
}

.he06 .row>div {
    padding: 1px;
    margin: 0 0px 50px;
}

.he06 .box {
    height: 100%;
}

.he06 .box .box_inner {
    position: relative;
    padding: 0 0px 0px;
    height: 100%;
    border-radius: 0px;
    border: 1px solid #ccc;
}

/*  */
.he06 .box .braArea {
    position: absolute;
    top: -23px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px 5px 10px;
    border-radius: 0px;
    white-space: nowrap;
    /* ✅ 줄바꿈 방지 */
    pointer-events: none;
    /* 클릭 방해 방지 */
    z-index: 2;
    background-color: #0088d6;
    border-radius: 3px;
    font-weight: 700;
    font-size: 1.250em;
    color: #fff;
}

/*  */
.he06 .imgArea {
    padding: 0px 0 0 0;
    text-align: center;
}

.he06 .imgArea img {
    width: 100%;
    /* border-radius: 50px; */
}

.he06 .txtArea {
    background-color: #fff;
    text-align: center;
    padding: 0px 0;
}

.he06 .txtArea h4 {
    padding: 10px 0;
    font-weight: 700;
    font-size: 1.750em;
    color: #111;
}

.he06 .txtArea .desc {
    padding: 10px;
    line-height: 1.4;
    font-weight: 500;
    font-size: 1.0em;
    color: #333;
}

.he06 .txtArea .info {
    padding: 10px 0 10px;
    border-top: 1px dotted #888;
    font-weight: 500;
    font-size: 1.0em;
    color: #999;
}

/* he06 블럭 내 카드 4번 숨김 처리 */
.he06 .row>div:nth-of-type(4) {
    /* display: none; */
}

/*  */
@media screen and (min-width: 768px) {
    .he06 .row>div {
        padding: 5px;
    }
}