타이틀, 이미지 타이틀

타이틀

Astro

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

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

Props:

level?:number : h1~6태그로 값 입력, 지정하지 않으면 div
lines?:number: 줄 수에 대한 값 입력, 줄이 넘칠 경우 말줄임 처리
style:string: 스타일 지정
- v-title--${style} 클래스 추가
- black: font-weight: 900 적용
- serif: Gloock 서체 적용
- underline: 밑 줄 적용

Code

<div class="v-title v-truncate">TITLE</div><!-- 시멘틱 무시, 스타일만 적용 시 div 태그 사용 -->
<h3 class="v-title v-truncate">Heading Level</h3><!-- h1 ~ h6 태그: 문서 아웃라인에 맞춰 적합한 레벨로 사용 -->
<div class="v-title v-title--black v-title--underline v-truncate">
  BLACK UNDERLINE TITLE
</div>
<div class="v-title v-title--black v-line-clamp-2">
  BLACK 2 LINES. 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>

Preview

TITLE

H3 TITLE

BLACK UNDERLINE TITLE

BLACK 2 LINES. 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!

이미지 타이틀

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

Code

TODO: 디자인 확인 필요

<h3 class="v-image-title"><!-- div, h1 ~ h6 태그: 상단의 타이틀 예제 참고 -->
  <img
    src="/path/to/image-title.png"
    alt="타이틀 내용 대체텍스트 필수!"
    width="400"
    height="300"
  />
</h3>

Preview

TBD.