- hero-icon-cards_1.html: hero-icon-cards 변형 (icon → 소제목+불릿 계층) - compare-detail-gradient.html: 하단 2열 비교 블록 (Figma Frame 4 기반) - 오답노트.md: 절대 하지 말아야 하는 실수 목록 - figma_to_html.py: Figma→HTML 변환 스크립트 - static/figma-assets/: Figma export 이미지 (배지, 화살표) - 주의: compare-detail-gradient CSS 폰트 크기가 임의 수정됨 — 원본 복원 필요 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
30 lines
795 B
HTML
30 lines
795 B
HTML
<!-- 상세보기 버튼: 그라데이션 배경 + 둥근 모서리 -->
|
|
<!--
|
|
📋 detail-button
|
|
─────────────────
|
|
용도: 팝업 또는 상세 페이지로 이동하는 버튼
|
|
슬롯: label (기본: "상세보기")
|
|
Figma 원본: Frame 1171276068
|
|
색상: 배경 그라데이션 #fff → #e3d8bf, 텍스트 #ffffff
|
|
-->
|
|
<div class="block-detail-btn">
|
|
<span class="db-label">{{ label | default('상세보기') }}</span>
|
|
</div>
|
|
|
|
<style>
|
|
.block-detail-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(90deg, #ffffff, #e3d8bf);
|
|
border-radius: 7px;
|
|
padding: 4px 16px;
|
|
cursor: pointer;
|
|
}
|
|
.db-label {
|
|
font-size: var(--font-caption, 11px);
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
}
|
|
</style>
|