[디자인블럭] he07 : 비교/차이점 - 강조형 카드

 

 

 

✅ 디자인블럭 he07 : 비교/차이점 강조형 카드

 

📌 블럭 개요

he07은 두 가지 이상의 항목을 비교하여 차이를 시각적으로 보여주는 카드형 블럭입니다.
사이즈, 품질, 원산지, 성능 등 구분 요소를 명확히 전달하여 고객의 이해를 돕고 신뢰 기반의 구매를 유도합니다.

---

🎯 사용 목적

• 제품 간 사이즈, 품질, 구성 등 차이점을 명확히 보여줄 때
• 우리 제품 vs 타 제품 구조로 브랜드 우위 강조
• 고객 선택 시 헷갈리는 옵션들을 직관적으로 비교
• 눈에 띄는 차이를 시각적/텍스트로 동시에 전달할 때 적합

---

🧩 디자인 특징

• 2개 이상의 비교 항목을 카드 형식으로 좌우 배치
• 상단 라벨(일반농장, 우리농장)로 브랜드 또는 타입 구분
• 이미지 + 크기/특징/추천 사용법 등의 항목별 설명으로 구성
• 반응형 구조로 모바일에서 1열, PC에서 2~4열까지 자유 전환
• 비교선, 강조 테두리, 폰트 굵기 등을 활용해 주목도 향상

---

📱 활용 예시

• 농산물: 일반 감자 vs 프리미엄 감자, 소형 vs 중형 크기 비교
• 수산물: 자숙 vs 생물, 국산 vs 수입산 등 비교
• 전자제품: 기본형 vs 고급형, 배터리 용량/화질/성능 차이
• 생활용품: 일반형 vs 친환경형, 소용량 vs 대용량 등

---

💡 확장 활용 팁

• 카드 수를 3~4개까지 확장 가능 (예: 일반/프리미엄/특선/대용량 비교)
• 클릭형 토글 비교, 애니메이션 강조 효과 삽입도 가능
• “추천 대상” 항목을 추가해 상황별 선택 가이드 구성 가능

 

 

 

html

<!-- he07 : 비교/차이점 -->
<div class="he07">
  <div class="row">

    <!-- 카드 1 -->
    <div class="col-6 col-sm-6 col-md-6 col-lg-3 col-xl-3 mx-auto">
      <div class="box">
        <div class="box_inner">
          <div class="braArea">일반농장</div>
          <div class="imgArea">
            <span><img src="{{$template}}/img/_hes/he07/he07_img01.jpg" alt="소형 감자 이미지"></span>
          </div>
          <div class="txtArea">
            <p class="desc">
              크기 <strong>약 4~5cm</strong><br>
              특징 <strong>껍질째 조리 가능</strong><br>
              추천 <strong>샐러드/구이/통감자 요리</strong>
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 카드 2 -->
    <div class="col-6 col-sm-6 col-md-6 col-lg-3 col-xl-3 mx-auto">
      <div class="box">
        <div class="box_inner">
          <div class="braArea">우리농장</div>
          <div class="imgArea">
            <span><img src="{{$template}}/img/_hes/he07/he07_img02.jpg" alt="감자 이미지"></span>
          </div>
          <div class="txtArea">
            <p class="desc">
              크기 <strong>약 5~7cm</strong><br>
              특징 <strong>크기 균일</strong><br>
              추천 <strong>조림/구이/버터감자</strong>
            </p>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

 

 

 

 

 

css

/*****************************************************************
he07 : 비교/차이점
*****************************************************************/
.he07 {
    padding: 0 10px;
}

.he07 .row>div {
    padding: 0px;
    margin: 0 0px 30px;
}

.he07 .box {
    height: 100%;
}

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

.he07 .row>div:nth-of-type(2) .box .box_inner {
    border: 3px dotted #f00;
}

/*  */
.he07 .box .braArea {
    position: absolute;
    top: -23px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 15px 2px 15px;
    border-radius: 0px;
    pointer-events: none;
    /* 클릭 방해 방지 */
    z-index: 2;
    background-color: #ff6600;
    border-radius: 3px;
    font-weight: 700;
    font-size: 1.250em;
    color: #fff;
}

.he07 .row>div:nth-of-type(1) .box .braArea {
    background-color: #888;
}

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

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

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

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

.he07 .txtArea .desc {
    line-height: 1.2;
    font-weight: 700;
    font-size: 1.250em;
    color: #333;
}

.he07 .txtArea .desc strong {
    display: block;
    padding-bottom: 0px;
    font-weight: 700;
    font-size: 1.0em;
    color: #666;
}

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

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