디자인블럭 he05 : 제품가격 - 제품 구성/가격 강조형 카드

1단형

 

 

 

 

2단형 / 3단형 반응형 구조

 

 

 

 

✅ 디자인블럭 he05 : 제품가격 - 제품 구성/가격 강조형 카드

📌 블럭 개요
he05는 다양한 중량 옵션과 활용 방법을 카드 형태로 보여주는 제품 설명 블럭입니다.
한눈에 들어오는 레이아웃으로 소비자 선택 편의성을 높이며, 실제 사용 상황을 자연스럽게 상상하게 해줍니다.

---

🎯 사용 목적

• 제품의 무게/구성/가공상태/활용방법 등을 비교 소개
• 중량·가공·용도별로 나뉘는 다양한 옵션 안내
• 구매자가 자신에게 맞는 제품을 고르기 쉽게 구성
• 캠핑, 자취, 가정식 등 활용 시나리오와 함께 어필 가능

---

🧩 디자인 특징

• 최대 3개의 카드로 중량/가공방식/활용처를 분류
• 텍스트 영역 + 실제 제품 연출 이미지 구성
• 상단 강조 텍스트 + **하단 라벨(예: ‘1~3kg’, ‘자숙 문어’, ‘캠핑 전용’)**로 시각적 구분
• 반응형 카드 구조로 모바일/PC 모두 자연스럽게 정렬
• 키워드 강조 및 아이콘 없는 체크리스트 방식으로 간결하게 표현

---

📱 활용 예시

• 수산물 상세페이지:
  • 카드1: 1~3kg 소포장부터 대용량까지 다양 선택
  • 카드2: 손질 완료된 자숙 문어 → 간편식/간단 요리에 적합
  • 카드3: 5kg 대용량 캠핑 전용 숯불구이용 문어
• 농산물/정육 제품: 생/손질/간편조리 식품의 옵션 안내형 콘텐츠로 확장 활용
• 브랜드 상세페이지: 패키지 구성별 소개(Starter/Standard/Premium 등)

---

💡 확장 활용 팁

• 카드 개수를 4~6개로 확장하여 슬라이더로 구현 가능
• 하단 라벨(무게/타입) 클릭 시 상세 페이지 내 앵커 이동 적용
• 쇼핑몰 연동 시, 각 카드에 해당하는 바로구매/선택버튼과 연동 가능

 

 

 

 

html

<!-- he05 : 제품가격 -->
<div class="he05">
  <div class="row">


    <!-- 카드 1 -->
    <div class="col-sm-12 col-md-12 col-lg-6 col-xl-4 mx-auto">
      <div class="box">
        <div class="box_inner">
          <div class="txtArea">
            <h4>먹을 만큼만!<br>1~3kg 다양 구성</h4>
            <p class="desc">
              ✔ 1인용 소포장부터<br>
              ✔ 온 가족이 즐기는 넉넉 구성까지<br>
              ✔ 취향과 필요에 맞춘 중량 선택
            </p>
          </div>
          <div class="imgArea">
            <span><img src="{{$template}}/img/_hes/he05/he05_img01.jpg" alt="문어 다양한 중량 구성 이미지"></span>
            <div class="labelweight">1~3kg</div>
            <div class="etc">연출 이미지</div>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 2 -->
    <div class="col-sm-12 col-md-12 col-lg-6 col-xl-4 mx-auto">
      <div class="box">
        <div class="box_inner">
          <div class="txtArea">
            <h4>간편하게 즐기는<br>진공 자숙문어</h4>
            <p class="desc">
              ✔ 손질 완료, 해동 후 바로 먹는 편리함<br>
              ✔ 식감 살아있는 부드러운 자숙<br>
              ✔ 바쁜 일상에도 손쉽게 한 끼 완성
            </p>
          </div>
          <div class="imgArea">
            <span><img src="{{$template}}/img/_hes/he05/he05_img02.jpg" alt="자숙문어 활용 이미지"></span>
            <div class="labelweight">자숙 문어</div>
            <div class="etc">연출 이미지</div>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 3 -->
    <div class="col-sm-12 col-md-12 col-lg-6 col-xl-4 mx-auto">
      <div class="box">
        <div class="box_inner">
          <div class="txtArea">
            <h4>캠핑엔 역시<br>불맛 문어 숯불구이!</h4>
            <p class="desc">
              ✔ 야외에서 화로에 굽는 문어의 진미<br>
              ✔ 넉넉한 5kg로 단체 캠핑에도 딱!<br>
              ✔ 분위기와 맛, 모두 잡는 캠핑메뉴
            </p>
          </div>
          <div class="imgArea">
            <span><img src="{{$template}}/img/_hes/he05/he05_img03.jpg" alt="캠핑장에서 굽는 문어 이미지"></span>
            <div class="labelweight">캠핑 전용</div>
            <div class="etc">연출 이미지</div>
          </div>
        </div>
      </div>
    </div>


  </div>
</div>

 

 

 

 

 

css

/*****************************************************************
he05 : 제품가격
*****************************************************************/
.he05 {
    padding: 0;
}

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

.he05 .box {
    overflow: hidden;
    margin-bottom: 50px;
    /* border-radius: 50px; */
    position: relative;
}

.he05 .box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    z-index: 0;
    pointer-events: none;
}

.he05 .box_inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/*  */
.he05 .imgArea {
    position: relative;
    text-align: center;
    /* background-color: #666; */
    /* border-radius: 0 0 30px 0; */
}

.he05 .imgArea img {
    width: 100%;
    border-radius: 150px 0 150px 0;
}

.he05 .imgArea .labelweight {
    position: absolute;
    top: 0px;
    right: 0px;
    transform: translate(0%, 0%);
    z-index: 1000;
    padding: 20px 20px 20px 20px;
    pointer-events: none;
    font-family: "TTTtangsbudaejjigaeB";
    background-color: #0088d6;
    /* border: 1px solid #ff7f08; */
    border-radius: 0 0 0 50px;
    text-shadow: 1px 1px 5px rgb(255, 255, 255, 0);
    font-weight: 700;
    font-size: 2.0em;
    color: #fff;
}

.he05 .imgArea .etc {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    padding: 0px;
    font-weight: 500;
    font-size: 1.0em;
    color: #fff;
}

/*  */
.he05 .txtArea {
    background-color: #fff;
    text-align: center;
    padding: 10px 0px;
}

.he05 .txtArea h4 {
    padding: 10px 0;
    line-height: 1.0;
    font-weight: 700;
    font-size: 3.0em;
    color: #111;
}

.he05 .txtArea .desc {
    font-size: 1.125em;
    color: #111;
}

.he05 .txtArea .desc strong {
    display: inline-block;
    padding: 3px 10px;
    background-color: #111;
    border-radius: 3px;
    font-weight: 700;
    font-size: 1.0em;
    color: #fff;
}

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

    .he05 .box {
        margin-bottom: 100px;
    }
}