[디자인블럭] he19 : 프로모션 정보 시각화형 혜택 안내 블럭

1단/2단/3단 프로모션 배너

 

 

 

 

 

✅ [디자인블럭] he19 : 프로모션 정보 시각화형 혜택 안내 블럭

 

 

🔍 블럭 개요

단기 프로모션이나 이벤트를 강조하기 위한 정보형 시각화 블럭.
명확한 텍스트 구성과 직관적인 표 레이아웃으로 고객의 구매 결정에 직접적인 영향을 줍니다.

---

 

🎯 사용 목적

• 할인, 적립, 사은품 등 혜택 내용을 정리된 표 형식으로 명확하게 전달
• 구매 전환을 유도하는 한정 기간, 특별 조건 강조용
• 상세페이지 하단 “마지막 구매 유도” 구간에서 신뢰감 있게 활용 가능

---

 

💡 디자인 특징

• 텍스트 중심 구성으로 가독성 극대화
• 메인 컬러를 통일시켜 이벤트별 브랜딩 정체성 유지
• 표(Table) 요소를 이용해 이해도 및 설득력 강화
• 2개까지의 카드 구성 시, 한 화면에 직관적으로 배치 가능

---

 

📱 활용 예시

• 혜택 강조 블럭으로 구성
  – “지금 구매 시 10% 할인”, “카드 결제 시 무이자 할부 제공”
  → 이벤트 시즌, 정기 할인 행사 등에서 중심 메시지로 사용 가능

• 쇼핑몰 상세페이지 내 주요 혜택 정리용
  – "구매 고객 전원 적용", "이벤트 카드 전용" 등 구체 조건을 명시
  → 고객의 할인 혜택 오해 방지 및 CS 감소에 기여

• 할인 캠페인 안내 콘텐츠로 활용
  – 광고용 배너나 별도 랜딩페이지와 함께 활용 시 시너지
  → 리타겟팅 광고나 인스타그램 프로모션 게시물에도 적합

---

 

🛠 HTML 설명

• .he19 클래스는 전체 이벤트 블럭의 레이아웃을 구성합니다.
• .txtArea는 상단의 제목 및 설명 텍스트 구역입니다.
• .tableArea는 주요 혜택 조건을 표 형식으로 정리한 영역입니다.
• 표 안에는 대상, 내용, 기간, 문의 등의 정보를 명확하게 나열할 수 있습니다.
• 카드 3개 이상 사용 시 .he19 .row>div:nth-of-type(3) 등의 CSS를 활용해 개별 블럭 숨김 처리 가능

 

 

 

 

html

<!-- he19 : 이벤트/행사 -->
<div class="he19">
  <div class="row">


    <!-- 카드 1 : 구매 할인 -->
    <div class="col-md-12 col-lg-10 mx-auto">
      <div class="box">
        <div class="box_inner">


          <div class="txtArea">
            <p class="title">지금 구매 시<br><span class="point">10% 할인</span></p>
            <p class="desc">
              오늘 준비한 신선함, 오늘 혜택까지!<br>
              <strong>지금 주문하시면 10% 즉시 할인</strong><br>
              건강한 선택, 합리적인 가격으로 만나보세요.
            </p>
          </div>


          <div class="tableArea">
            <table>
              <tbody>
                <tr>
                  <th>대상</th>
                  <td>구매 고객 전원</td>
                </tr>
                <tr>
                  <th>내용</th>
                  <td>총 결제금액의 10% 즉시 할인</td>
                </tr>
                <tr>
                  <th>기간</th>
                  <td>202X년 7월 1일 ~ 7월 31일</td>
                </tr>
              </tbody>
            </table>
          </div>


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


    <!-- 카드 2 : 무이자 할부 -->
    <div class="col-md-12 col-lg-6 col-xl-4">
      <div class="box">
        <div class="box_inner">


          <div class="txtArea">
            <p class="title">3개월 / 6개월<br><span class="point">무이자 할부</span></p>
            <p class="desc">
              넉넉하게 준비하세요!<br>
              <strong>3개월 무이자 할부</strong>로 부담 없이 결제 가능.<br>
              합리적으로 여유 있게 선택하세요.
            </p>
          </div>


          <div class="tableArea">
            <table>
              <tbody>
                <tr>
                  <th>대상</th>
                  <td>이벤트 카드 결제 고객</td>
                </tr>
                <tr>
                  <th>내용</th>
                  <td>최대 3개월 무이자 할부 제공</td>
                </tr>
                <tr>
                  <th>문의</th>
                  <td>고객센터 0000-0000</td>
                </tr>
              </tbody>
            </table>
          </div>


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


    <!-- 카드 3 : 전문 상담 -->
    <div class="col-md-12 col-lg-6 col-xl-4">
      <div class="box">
        <div class="box_inner">


          <div class="txtArea">
            <p class="title">구매 전<br><span class="point">전문 상담</span></p>
            <p class="desc">
              궁금한 점, 선택 전 고민까지!<br>
              <strong>전문 상담</strong>으로 친절하게 도와드립니다.<br>
              사용법·보관법 꿀팁도 함께 알려드려요.
            </p>
          </div>


          <div class="tableArea">
            <table>
              <tbody>
                <tr>
                  <th>상담시간</th>
                  <td>09:00 ~ 18:00</td>
                </tr>
                <tr>
                  <th>점심시간</th>
                  <td>12:00 ~ 13:00</td>
                </tr>
                <tr>
                  <th>휴무</th>
                  <td>주말·공휴일</td>
                </tr>
              </tbody>
            </table>
          </div>


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


  </div>
</div>

 

 

 

 

 

cs

/*****************************************************************
he19 : 이벤트/행사
*****************************************************************/
.he19 {
    padding: 0px 0;
}

.he19 .row {}

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

/* 공통 박스 스타일 */
.he19 .box {
    background: #264700;
    /* 옥수수 느낌의 밝은 노란색 */
    /* border-radius: 15px; */
    margin-bottom: 30px;
    padding: 30px 10px;
    color: #333;
}

/* 텍스트 영역 */
.he19 .txtArea {
    text-align: center;
}

.he19 .txtArea .title {
    font-size: 2.0em;
    font-weight: 700;
    margin-bottom: 15px;
    color: #fff;
    /* 고동색 포인트로 안정감 */
}

.he19 .txtArea .title .point {
    font-size: 2.0em;
    color: #ffc400;
    /* 진한 주황 계열 강조 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.he19 .txtArea .desc {
    font-size: 1.5em;
    margin-bottom: 15px;
    color: #fff;
}

/* 테이블 영역 */
.he19 .tableArea {
    margin-top: 15px;
    padding: 10px;
    background-color: #335f00;
    /* border-radius: 10px; */
    font-size: 1.125em;
}

.he19 .tableArea table {
    width: 100%;
    border-collapse: collapse;
}

.he19 .tableArea th {
    width: 30%;
    padding: 10px;
    background: #f6ffe1;
    border: 1px solid #ddd;
    text-align: center;
    color: #333;
}

.he19 .tableArea td {
    border: 1px solid #ddd;
    padding: 10px;
    background: #fff;
    text-align: left;
    color: #111;
}

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

/* 반응형 여백 조정 */
@media screen and (min-width: 768px) {
    .he19 .tableArea {
        /* 추가 반응형 필요 시 여기에 작성 */
    }
}