[디자인블럭] he01 : 제품정의 - 헤드라인 임팩트형

 

 

 

✅ 디자인블럭 he01 — 헤드라인 임팩트형

📌 블럭 개요

he01은 상세페이지의 시작을 인상적으로 장식하는 풀스크린 헤드라인 블럭입니다.
강렬한 비주얼과 함께 브랜드 메시지를 직관적으로 전달하여 고객의 시선을 사로잡습니다.

---

🎯 사용 목적

• 첫 화면에서 브랜드 신뢰와 감성 어필
• 강한 메시지 강조가 필요한 상세페이지 도입부에 적합
• 자연산/산지직송/프리미엄 같은 키워드 전달에 효과적

---

🧩 디자인 특징

• 전체 배경 이미지 위에 메시지와 브랜드명 강조
• 중앙 집중형 텍스트 구성으로 시선 집중
• 곡선형 하단 컷 활용으로 다음 섹션과의 자연스러운 연결
• 감성적인 느낌과 생생한 현장감을 동시에 전달

---

📱 활용 예시

• 수산물 상세페이지: “활(活) 돌문어”, “산지직송 꽃게”
• 농산물/정육/공예품 등 프리미엄 제품 첫 인트로
• 브랜드 캠페인/특가 기획전의 상단 메인 배너로도 활용 가능

 

 

 

 

html

<!-- he01 : 제품 정의 -->
<div class="he01">
  <div class="row">


    <!-- 카드 1 -->
    <div class="col-sm-12 col-md-12 col-lg-6 offset-lg-3">
      <div class="box">
        <div class="braArea">신선수산</div>
        <div class="imgArea">
          <img src="{{$template}}/img/_hes/he01/he01_img01.jpg" alt="어부가 갓 잡은 돌문어를 들어올리는 장면">
        </div>
        <div class="txtArea">
          <p class="icn"><img src="{{$template}}/img/_hes/he01/he01_icn01.png" alt="문어 아이콘"></p>
          <p class="sub">바다 위, 그 순간을 바로 담다</p>
          <p class="title">활(活) 돌문어</p>
          <p class="desc">
            통발에서 힘차게 올라온 문어 한 마리,<br>
            <strong>어부의 손에서 바로 잡아 올린 진짜 자연산</strong><br>
            오염 없는 청정 해역에서,<br>수산 전문가가 직접 조업합니다.<br>
            해풍과 파도 속에서 길러낸 바다의 힘,<br>지금 만나보세요.
          </p>
        </div>
      </div>
    </div>


  </div>
</div>

 

 

 

 

 

 

css

/*****************************************************************
he01 : 제품정의
*****************************************************************/
.he01 {
    margin: 0;
    padding: 0;
    position: relative;
    /* background-color: #fff; */
}

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

.he01 .box {
    display: flex;
    position: relative;
    width: 100%;
}

.he01 .imgArea {
    width: 100%;
    position: relative;
}

.he01 .imgArea img {
    width: 100%;
    display: block;
    height: auto;
}

/*  */
.he01 .braArea {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #0088d6;
    padding: 10px 24px 12px 24px;
    border-radius: 0 0 30px 10px;
    font-weight: 700;
    font-size: 1.5em;
    color: #fff;
    z-index: 1;
    /* display: none; */
}

/*  */
.he01 .txtArea {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
    text-align: center;
    box-sizing: border-box;
    z-index: 2;
    /* background-color: rgba(221, 221, 221, 0.5); */
    border: 5px solid #fff;
    border-radius: 0px 0px 50px 0px;
    padding: 20px 10px;
    /* display: none; */
}

/* 상단아이콘 */
/* .he01 .txtArea:before {
    content: "eco";
    font-family: "Material Icons";
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0%;
    font-size: 5.0em;
    color: #fff;
    z-index: 10;
} */

.he01 .txtArea .sub {
    font-size: 1.5em;
    font-weight: 700;
    color: #fff;
}

.he01 .txtArea .title {
    line-height: 1.0;
    font-size: 4.0em;
    font-weight: 900;
    color: #fff;
}

.he01 .txtArea .desc {
    font-size: 1.250em;
    color: #fff;
}

.he01 .txtArea .desc strong {
    color: #0088d6;
    font-weight: 700;
}

/* 아이콘: 박스보다 약간 위에 띄우기 */
.he01 .txtArea .icn {
    position: absolute;
    top: -110px;
    /* 이미지가 절반 크기로 줄어들었으므로 위치도 조정 */
    left: 50%;
    transform: translateX(-0%);
    z-index: 3;
    /* 텍스트 박스보다 위 */
}

/* 아이콘 이미지: 텍스트 박스의 50% 너비로 */
.he01 .txtArea .icn img {
    width: 100%;
    max-width: 120px;
    /* 너무 커지는 것 방지 */
    height: auto;
}


@media screen and (min-width: 768px) {
    /* .he01 .txtArea .sub {
    }
    .he01 .txtArea .title {
    }
    .he01 .txtArea .desc {
    } */
}