ImageTitle

이미지로 구성된 타이틀 컴포넌트입니다. 브랜드 로고 등을 타이틀로 사용할 때 활용합니다.

Astro

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

<ImageTitle src="/path/to/logo.png" alt="브랜드명" width={120} height={40} />
<ImageTitle src="/path/to/logo.png" alt="브랜드명" width={120} height={40} level={2} />

Props:

• src: string: 이미지 소스 URL (필수)
• alt: string: 대체 텍스트 (필수)
• width?: number: 이미지 너비
• height?: number: 이미지 높이
• level?: 1 | 2 | 3 | 4 | 5 | 6: 헤딩 레벨. 지정하면 h{level} 태그로 렌더링, 미지정시 div

Code

<!-- div로 렌더링 -->
<div class="v-image-title">
  <img src="/path/to/logo.png" alt="브랜드명" width="120" height="40" />
</div>

<!-- h2로 렌더링 -->
<h2 class="v-image-title">
  <img src="/path/to/logo.png" alt="브랜드명" width="120" height="40" />
</h2>

Preview