WIP: hero-icon-cards_1 블록 + 오답노트 + figma 관련 파일
- 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>
This commit is contained in:
76
templates/blocks/BEPs/solution-goals.html
Normal file
76
templates/blocks/BEPs/solution-goals.html
Normal file
@@ -0,0 +1,76 @@
|
||||
<!-- Solution 제작 목표: 5개 목표 카드 + 중앙 텍스트 -->
|
||||
<!--
|
||||
📋 solution-goals
|
||||
─────────────────
|
||||
용도: Solution 제작의 5가지 핵심 목표 (Easy, Convenient, Quality, Cost, Speed)
|
||||
슬롯:
|
||||
main_text: 중앙 메인 텍스트
|
||||
goals[]: 목표 카드 목록
|
||||
- en: 영문 라벨 (예: "Easy Like Breath")
|
||||
- ko: 한글 라벨 (예: "(쉬운 이해)")
|
||||
- icon: 아이콘 이미지 경로 (선택)
|
||||
Figma 원본: Frame 1171276072
|
||||
색상: 제목 #ffffff on dark, 본문 #000000, 영문 gradient text
|
||||
-->
|
||||
<div class="block-sol-goals">
|
||||
<div class="sg-title">Solution 제작 목표</div>
|
||||
<div class="sg-main">{{ main_text }}</div>
|
||||
<div class="sg-grid" style="--sg-count: {{ goals|length }}">
|
||||
{% for g in goals %}
|
||||
<div class="sg-card">
|
||||
{% if g.icon %}<img class="sg-icon" src="{{ g.icon }}" alt="{{ g.en }}">{% endif %}
|
||||
<div class="sg-en">{{ g.en }}</div>
|
||||
<div class="sg-ko">{{ g.ko }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-sol-goals {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
.sg-title {
|
||||
font-size: var(--font-subtitle, 16px);
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
background: #1a365d;
|
||||
display: inline-block;
|
||||
padding: 6px 20px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.sg-main {
|
||||
font-size: var(--font-body, 14px);
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
line-height: var(--line-height-ko, 1.7);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.sg-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--sg-count, 5), 1fr);
|
||||
gap: 14px;
|
||||
}
|
||||
.sg-card {
|
||||
text-align: center;
|
||||
}
|
||||
.sg-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
object-fit: contain;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.sg-en {
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
color: #1a365d;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.sg-ko {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user