퀵 링크, HTML 모듈

퀵 링크

Astro

---
import QuickLink from "@shared/module/quick-link/QuickLink.astro";
import Carousel from "@shared/module/carousel/Carousel.astro";

const data = [
  /* ...*/
];
---

<Carousel slidesPerView={2.7551}>
  {
    data.map((item) => (
      <swiper-slide>
        <QuickLink to={item.to} media={item.media} text={item.text} />
      </swiper-slide>
    ))
  }
</Carousel>

Props:

• to:string: 링크 URL
• media:ComponentProps<typeof MediaEmbed>: 이미지/동영상. MediaEmbed 참조
• text?:string: 텍스트

Code

<swiper-container
  slides-offset-before="24"
  slides-offset-after="24"
  space-between="8"
  slides-per-view="2.7551"
  free-mode="true"
  sticky="true"
  class="v-carousel"
>
  <swiper-slide>
    <a class="v-quick-link">
      <div class="v-media-embed">
        <img
          class="v-media-embed__element v-media-embed__image"
          src="/path/to/image.jpg"
          alt=""
        />
      </div>
      <span class="v-quick-link__text v-font-bold">BRAND NAME</span>
    </a>
  </swiper-slide>
  …
</swiper-container>

Preview

HTML 모듈

Astro

---
import HtmlEmbed from "@shared/module/html-embed/HtmlEmbed.astro";
---

<HtmlEmbed wide={true}>
  <!-- HTML 코드 -->
</HtmlEmbed>

Props:

• wide?:boolean: 와이드형

Code

<div class="v-html-embed v-html-embed--wide">
  <!-- HTML 등록 코드 -->
  <p>
    There are over a hundred HTML elements. This page uses all of them. You’re
    looking at &lt;p&gt;&lt;/p&gt; right now.
  </p>
  <hgroup>
    <h1>
      <p>
        HTML loves text. We can get some huge text with &lt;h1&gt;&lt;/h1&gt;.
      </p>
    </h1>
    <h2>Or smaller with &lt;h2&gt;&lt;/h2&gt;</h2>
    <h3>And so on…</h3>
    <h4>And so on…</h4>
    <h5>And so on…</h5>
    <h6>
      <p>
        And… nope that’s it for headings. These are all in an
        &lt;hgroup&gt;&lt;/hgroup&gt; by the way.
      </p>
    </h6>
  </hgroup>
  <!-- /HTML 등록 코드 -->
</div>

Preview

There are over a hundred HTML elements. This page uses all of them. You’re looking at <p></p> right now.

HTML loves text. We can get some huge text with <h1></h1>.

Or smaller with <h2></h2>

And so on…

And so on…

And so on…

And… nope that’s it for headings. These are all in an <hgroup></hgroup> by the way.