이미지/기획전/동영상

Note

동영상 적용 관련 내용은 비디오 플레이어 및 Media Embed 문서 참고해주세요.

Astro

---
import MediaBanner from "@shared/module/media-banner/MediaBanner.astro";
---

<MediaBanner
  to="#"
  media={{
    src: `/path/to/image.jpg`,
    width: 375,
    height: 562,
  }}
  linkText={true}
  smallTitle="SMALL TITLE"
  name="BANNER NAME"
  subName="BANNER SUB NAME"
  button="BUTTON TEXT"
  style="wide"
/>

<MediaBanner
  to="#"
  media={{
    src: `/path/to/image.jpg`,
    width: 350,
    height: 525,
  }}
  linkText={true}
  smallTitle={{ text: "SMALL TITLE" }}
  name={{ text: "BANNER NAME", lines: 2 }}
  separator={true}
  subName={{ text: "BANNER SUB NAME", lines: 3 }}
  button="BUTTON TEXT"
  style="layered"
/>

Props:

• to:string - 링크 주소

• media: ComponentProps<typeof MediaEmbed> - MediaEmbed props

• linkText:boolean - 텍스트에 링크를 사용할지 여부(서브 타이틀)

• smallTitle?: MaybeTextContent - 소 타이틀

• name?: MaybeTextContent - 배너명

• separator?: boolean - 배너명 하단 구분선

• subName?: MaybeTextContent - 서브 배너명

• button?: MaybeTextContent - 버튼 텍스트

• style?: "layered" | "wide" | "stretched" - 배너 스타일

  • "layered": 텍스트-안, 이미지/동영상 영역 위에 텍스트가 겹쳐지는 레이어드형
  • "wide": 이미지/동영상 영역 좌우 여백 없을 경우 사용. 텍스트 영역은 좌/우 여백 있음
  • "stretched": 이미지/동영상 영역 좌우 여백 없음. 텍스트 영역도 좌/우 여백 없음

Types

• TextContent
  • text: string
  • tag?: keyof HTMLElementTagNameMap
  • font?: "pretendard" | "sans" | "gloock" | "serif"
  • weight?: "regular" | "black"
  • lines?: number
• MaybeTextContent: string | TextContent

텍스트-안

BRAND NAME

THIS IS A HEADLINE THIS IS A HEADLINE THIS IS A HEADLINE THIS IS A HEADLINE THIS IS A HEADLINE THIS IS A HEADLINE THIS IS A HEADLINE THIS IS A HEADLINE THIS IS A HEADLINE THIS IS A HEADLINE

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, labore? Obcaecati tempora voluptate laboriosam impedit modi deleniti est sequi provident aliquam in at veniam ab asperiores, iusto, nihil reiciendis eligendi! Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, labore? Obcaecati tempora voluptate laboriosam impedit modi deleniti est sequi provident aliquam in at veniam ab asperiores, iusto, nihil reiciendis eligendi! Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, labore? Obcaecati tempora voluptate laboriosam impedit modi deleniti est sequi provident aliquam in at veniam ab asperiores, iusto, nihil reiciendis eligendi!

BUTTON TEXT

HTML

<div class="v-media-banner v-media-banner--layered">
  <div class="v-media-banner__media">
    <a href="/link/to/page">
      <div class="v-media-embed v-media-embed--dim">
        <img
          class="v-media-embed__element v-media-embed__image"
          src="/path/to/image.jpg"
          alt=""
          width="375"
          height="562"
        />
      </div>
    </a>
  </div>
  <div class="v-media-banner__content">
    <a href="#" class="v-media-banner__link">
      <div class="v-media-banner__text">
        <div class="v-media-banner__header">
          <div class="v-media-banner__small-title v-font-bold">SMALL TITLE</div>
          <div class="v-line-clamp-3 v-media-banner__name v-font-bold">
            BANNER NAME
          </div>
        </div>
        <div class="v-line-clamp-3 v-media-banner__sub-name v-font-regular">
          BANNER SUB NAME
        </div>
      </div>
    </a>
    <a
      href="/link/to/page"
      class="v-button v-button--outlined v-button--full v-media-banner__button"
      >BUTTON TEXT</a
    >
  </div>
</div>

구분선 있는 경우:

BRAND NAME

THIS IS A HEADLINE

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, labore? Obcaecati tempora voluptate laboriosam impedit modi deleniti est sequi provident aliquam in at veniam ab asperiores, iusto, nihil reiciendis eligendi!

BUTTON TEXT

HTML

<div class="v-media-banner v-media-banner--layered">
  <div class="v-media-banner__media">
    <a href="/link/to/page">
      <div class="v-media-embed v-media-embed--dim">
        <img
          class="v-media-embed__element v-media-embed__image"
          src="/path/to/image.jpg"
          alt=""
          width="375"
          height="562"
        />
      </div>
    </a>
  </div>
  <div class="v-media-banner__content">
    <a href="#" class="v-media-banner__link">
      <div class="v-media-banner__text">
        <div class="v-media-banner__header">
          <div class="v-media-banner__small-title v-font-bold">SMALL TITLE</div>
          <div class="v-line-clamp-3 v-media-banner__name v-font-bold">
            BANNER NAME
          </div>
        </div>
        <div class="v-media-banner__separator"></div>
        <div class="v-line-clamp-3 v-media-banner__sub-name v-font-regular">
          BANNER SUB NAME
        </div>
      </div>
    </a>
    <a
      href="/link/to/page"
      class="v-button v-button--outlined v-button--full v-media-banner__button"
      >BUTTON TEXT</a
    >
  </div>
</div>

텍스트-밖

스탠다드

BRAND NAME

THIS IS A HEADLINE

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, labore? Obcaecati tempora voluptate laboriosam impedit modi deleniti est sequi provident aliquam in at veniam ab asperiores, iusto, nihil reiciendis eligendi!

BUTTON TEXT

HTML

<div class="v-media-banner">
  <div class="v-media-banner__media">
    <a href="/link/to/page">
      <div class="v-media-embed v-media-embed--dim">
        <img
          class="v-media-embed__element v-media-embed__image"
          src="/path/to/image.jpg"
          alt=""
          width="375"
          height="562"
        />
      </div>
    </a>
  </div>
  <div class="v-media-banner__content">
    <a href="#" class="v-media-banner__link">
      <div class="v-media-banner__text">
        <div class="v-media-banner__header">
          <div class="v-media-banner__small-title v-font-bold">SMALL TITLE</div>
          <div class="v-line-clamp-3 v-media-banner__name v-font-bold">
            BANNER NAME
          </div>
        </div>
        <div class="v-media-banner__separator"></div>
        <div class="v-line-clamp-3 v-media-banner__sub-name v-font-regular">
          BANNER SUB NAME
        </div>
      </div>
    </a>
    <a
      href="/link/to/page"
      class="v-button v-button--outlined v-button--full v-media-banner__button"
      >BUTTON TEXT</a
    >
  </div>
</div>

와이드

BRAND NAME

THIS IS A HEADLINE

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, labore? Obcaecati tempora voluptate laboriosam impedit modi deleniti est sequi provident aliquam in at veniam ab asperiores, iusto, nihil reiciendis eligendi!

BUTTON TEXT

HTML

<div class="v-media-banner v-media-banner--wide">
  <div class="v-media-banner__media">
    <a href="/link/to/page">
      <div class="v-media-embed v-media-embed--dim">
        <img
          class="v-media-embed__element v-media-embed__image"
          src="/path/to/image.jpg"
          alt=""
          width="375"
          height="562"
        />
      </div>
    </a>
  </div>
  <div class="v-media-banner__content">
    <a href="#" class="v-media-banner__link">
      <div class="v-media-banner__text">
        <div class="v-media-banner__header">
          <div class="v-media-banner__small-title v-font-bold">SMALL TITLE</div>
          <div class="v-line-clamp-3 v-media-banner__name v-font-black">
            BANNER NAME
          </div>
        </div>
        <div class="v-media-banner__separator"></div>
        <div class="v-line-clamp-3 v-media-banner__sub-name v-font-regular">
          BANNER SUB NAME
        </div>
      </div>
    </a>
    <a
      href="/link/to/page"
      class="v-button v-button--outlined v-button--full v-media-banner__button"
      >BUTTON TEXT</a
    >
  </div>
</div>

Carousel 안에 사용하는 경우

BRAND NAME

THIS IS A HEADLINE

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, labore? Obcaecati tempora voluptate laboriosam impedit modi deleniti est sequi provident aliquam in at veniam ab asperiores, iusto, nihil reiciendis eligendi!

BUTTON TEXT

BRAND NAME

THIS IS A HEADLINE

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, labore? Obcaecati tempora voluptate laboriosam impedit modi deleniti est sequi provident aliquam in at veniam ab asperiores, iusto, nihil reiciendis eligendi!

BUTTON TEXT

BRAND NAME

THIS IS A HEADLINE

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, labore? Obcaecati tempora voluptate laboriosam impedit modi deleniti est sequi provident aliquam in at veniam ab asperiores, iusto, nihil reiciendis eligendi!

BUTTON TEXT

BRAND NAME

THIS IS A HEADLINE

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, labore? Obcaecati tempora voluptate laboriosam impedit modi deleniti est sequi provident aliquam in at veniam ab asperiores, iusto, nihil reiciendis eligendi!

BUTTON TEXT

HTML

<script type="module">
  if (!window.customElements.get("swiper-container")) {
    import("/ui/lib/swiper/swiper-element-customized-bundle.min.js");
  }
  if (!window.customElements.get("video-player")) {
    import("/ui/element/video-player.js");
  }
</script>
<swiper-container
  space-between="8"
  slides-per-view="1"
  slides-per-group="1"
  navigation="true"
  pagination="true"
  class="v-carousel"
>
  <swiper-slide>
    <div class="v-media-banner v-media-banner--stretched">
      <div class="v-media-banner__media">
        <a href="/link/to/page">
          <div class="v-media-embed v-media-embed--dim">
            <img
              class="v-media-embed__element v-media-embed__image"
              src="/path/to/image.jpg"
              alt=""
              width="375"
              height="562"
            />
          </div>
        </a>
      </div>
      <div class="v-media-banner__content">
        <a href="#" class="v-media-banner__link">
          <div class="v-media-banner__text">
            <div class="v-media-banner__header">
              <div class="v-media-banner__small-title v-font-bold">
                SMALL TITLE
              </div>
              <div class="v-line-clamp-3 v-media-banner__name v-font-bold">
                BANNER NAME
              </div>
            </div>
            <div class="v-media-banner__separator"></div>
            <div class="v-line-clamp-3 v-media-banner__sub-name v-font-regular">
              BANNER SUB NAME
            </div>
          </div>
        </a>
        <a
          href="/link/to/page"
          class="v-button v-button--outlined v-button--full v-media-banner__button"
          >BUTTON TEXT</a
        >
      </div>
    </div>
  </swiper-slide>
  <swiper-slide>
    <div class="v-media-banner v-media-banner--stretched">
      <div class="v-media-banner__media">
        <a href="#">
          <div class="v-media-embed v-media-embed--cover">
            <video-player
              autoplay
              class="v-video-player v-media-embed__element v-media-embed__video"
            >
              <video
                poster="/path/to/poster.jpg"
                width="375"
                height="562"
                playsinline
              >
                <source src="/path/to/video.mp4" type="video/mp4" />
              </video>
            </video-player>
          </div>
        </a>
      </div>
      <div class="v-media-banner__content">
        <a href="#" class="v-media-banner__link">
          <div class="v-media-banner__text">
            <div class="v-media-banner__header">
              <div class="v-media-banner__small-title v-font-bold">
                SMALL TITLE
              </div>
              <div class="v-line-clamp-3 v-media-banner__name v-font-bold">
                BANNER NAME
              </div>
            </div>
            <div class="v-media-banner__separator"></div>
            <div class="v-line-clamp-3 v-media-banner__sub-name v-font-regular">
              BANNER SUB NAME
            </div>
          </div>
        </a>
        <a
          href="/link/to/page"
          class="v-button v-button--outlined v-button--full v-media-banner__button"
          >BUTTON TEXT</a
        >
      </div>
    </div>
  </swiper-slide>
  <!-- ... -->
</swiper-container>

비디오 링크 처리

자동 재생 시 비디오 영역도 링크 처리

BRAND NAME

THIS IS A HEADLINE

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, labore? Obcaecati tempora voluptate laboriosam impedit modi deleniti est sequi provident aliquam in at veniam ab asperiores, iusto, nihil reiciendis eligendi!

BUTTON TEXT

HTML

<div class="v-media-banner">
  <div class="v-media-banner__media">
    <a href="/path/to/link">
      <div class="v-media-embed v-media-embed--cover">
        <video-player
          autoplay
          class="v-video-player v-media-embed__element v-media-embed__video"
        >
          <video
            poster="/path/to/poster.jpg"
            width="375"
            height="562"
            playsinline
          >
            <source src="/path/to/video.mp4" type="video/mp4" />
          </video>
        </video-player>
      </div>
    </a>
  </div>
  <div class="v-media-banner__content">
    <a href="#" class="v-media-banner__link">
      <div class="v-media-banner__text">
        <div class="v-media-banner__header">
          <div class="v-media-banner__small-title v-font-bold">BRAND NAME</div>
          <div class="v-line-clamp-2 v-media-banner__name v-font-bold">
            THIS IS A HEADLINE
          </div>
        </div>
        <div class="v-line-clamp-3 v-media-banner__sub-name v-font-regular">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora,
          labore? Obcaecati tempora voluptate laboriosam impedit modi deleniti
          est sequi provident aliquam in at veniam ab asperiores, iusto, nihil
          reiciendis eligendi!
        </div>
      </div>
    </a>
    <a
      href="/path/to/link"
      class="v-button v-button--outlined v-button--full v-media-banner__button"
      >BUTTON TEXT</a
    >
  </div>
</div>

자동 재생이 아닌 경우 비디오 컨트롤러 조작이 필요하므로 비디오 영역에 링크 적용하지 않음

BRAND NAME

THIS IS A HEADLINE

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, labore? Obcaecati tempora voluptate laboriosam impedit modi deleniti est sequi provident aliquam in at veniam ab asperiores, iusto, nihil reiciendis eligendi!

BUTTON TEXT

HTML

<div class="v-media-banner">
  <div class="v-media-banner__media">
    <div class="v-media-embed v-media-embed--cover">
      <video-player
        class="v-video-player v-media-embed__element v-media-embed__video"
      >
        <video
          poster="/path/to/poster.jpg"
          width="375"
          height="562"
          playsinline
        >
          <source src="/path/to/video.mp4" type="video/mp4" />
        </video>
      </video-player>
    </div>
  </div>
  <div class="v-media-banner__content">
    <a href="#" class="v-media-banner__link">
      <div class="v-media-banner__text">
        <div class="v-media-banner__header">
          <div class="v-media-banner__small-title v-font-bold">BRAND NAME</div>
          <div class="v-line-clamp-2 v-media-banner__name v-font-bold">
            THIS IS A HEADLINE
          </div>
        </div>
        <div class="v-line-clamp-3 v-media-banner__sub-name v-font-regular">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora,
          labore? Obcaecati tempora voluptate laboriosam impedit modi deleniti
          est sequi provident aliquam in at veniam ab asperiores, iusto, nihil
          reiciendis eligendi!
        </div>
      </div>
    </a>
    <a
      href="/path/to/link"
      class="v-button v-button--outlined v-button--full v-media-banner__button"
      >BUTTON TEXT</a
    >
  </div>
</div>