Skip to content
SHINSEGAE V UI

코너 타이틀

텍스트 타이틀

Astro
---
import Title from "@shared/ui/title/Title.astro";
---


<Title level={3} lines={2}>
  Lorem ipsum dolor, sit amet gqjpfconsectetur adipisicing elit.
</Title>

Props:

  • level?:number : h1~6태그로 값 입력, 지정하지 않으면 div
  • lines?:number: 줄 수에 대한 값 입력, 줄이 넘칠 경우 말줄임 처리 (default: 1)
  • font?: "sans" | "serif" | "pretendard" | "gloock": 서체 지정
    • "sans", "pretendard": v-font-sans 클래스 적용
    • "serif", "gloock": v-font-serif 클래스 적용
  • weight?: "regular" | "black": v-font-${weight} 클래스 적용
  • wide?: boolean: v-title--wide 클래스 적용. 좌우 여백 제거
<!-- h1 ~ h6 태그: 문서 아웃라인에 맞춰 적합한 레벨로 사용 -->
<h3 class="v-title v-truncate">TITLE</h3>


<!-- 와이드 -->
<h3 class="v-title v-truncate v-title--wide">TITLE</h3>


<!-- 시멘틱 무시, 스타일만 적용 시 div 태그 사용 -->
<div class="v-title v-truncate">TITLE</div>


<!-- Pretendard Black 클래스 v-title--black, 1줄 말줄임 클래스 v-truncate -->
<div class="v-title v-font-black v-truncate">TITLE</div>


<!-- 2줄 말줄임 클래스 v-line-clamp-2 -->
<div class="v-title v-font-black v-line-clamp-2">TITLE</div>

TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj

TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj

TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj

TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj

TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj

TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj TITLE qypfgj

H3 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam libero neque accusamus expedita necessitatibus, repellat ratione. Veritatis repellat rerum, quas eveniet ex quod nam qui voluptates numquam molestias, dolorum ipsum!

DIV Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam libero neque accusamus expedita necessitatibus, repellat ratione. Veritatis repellat rerum, quas eveniet ex quod nam qui voluptates numquam molestias, dolorum ipsum!

BLACK Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam libero neque accusamus expedita necessitatibus, repellat ratione. Veritatis repellat rerum, quas eveniet ex quod nam qui voluptates numquam molestias, dolorum ipsum!

BLACK 2 LINES Lorem gqjpfipsum dolor, sit amet consectetur adipisicing elit. Ipsam libero neque accusamus expedita necessitatibus, repellat ratione. Veritatis repellat rerum, quas eveniet ex quod nam qui voluptates numquam molestias, dolorum ipsum!

헤더와 같이 사용

핫 딜 영역과 같이 타이틀 영역 내 추가 요소가 있는 경우 .v-corner-header 클래스를 사용하여 감싸줍니다.

<header class="v-corner-header">
  <h2 class="v-title v-truncate">TITLE</h2>
  <countdown-timer>…</countdown-timer>
</header>

HOT DEAL

00 : 00 : 00

이미지 타이틀

Astro
---
import ImageTitle from "@shared/ui/image-title/ImageTitle.astro";
---


<ImageTitle
  src="/images/thumbnail.png"
  alt="타이틀 내용 대체텍스트 필수!"
  width={400}
  height={300}
  level={3}
/>

Props:

  • src:string : 이미지 경로
  • alt:string : 이미지 대체 텍스트
  • width?:number : 이미지 가로 크기
  • height?:number : 이미지 세로 크기
  • level?:number : h1~6태그로 값 입력, 지정하지 않으면 div
<h3 class="v-image-title">
  <!-- div, h1 ~ h6 태그: 상단의 타이틀 예제 참고 -->
  <img
    src="/path/to/image-title.png"
    alt="타이틀 내용 대체텍스트 필수!"
    width="400"
    height="300"
  />
</h3>


<!-- 와이드 -->
<h3 class="v-image-title v-image-title--wide">
  <img
    src="/path/to/image-title.png"
    alt="타이틀 내용 대체텍스트 필수!"
    width="400"
    height="300"
  />
</h3>