kyeongmin
05703c8e72
- 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>
107 lines
4.0 KiB
HTML
107 lines
4.0 KiB
HTML
<!-- 배지 헤더 2열 비교: 3D 리본 탭 + 좌/우 비교 + 선택적 하단 문구 -->
|
|
<!--
|
|
📋 compare-2col-badge
|
|
─────────────────
|
|
용도: 두 개념/전략/기술을 나란히 비교. 3D 리본 탭이 컨테이너 위에 걸침.
|
|
슬롯: badge_title, left_title, left_body, right_title, right_body, statement(선택)
|
|
Figma 원본: Frame 3 (정책 달성 — 틸 리본 + 흰 둥근 컨테이너 + 2열 비교)
|
|
수학적 계산:
|
|
badge 517x88 at y=929, box at y=947, frame_w=1807
|
|
scale = 1200/1807 = 0.6641
|
|
ribbon: 343x58px, fold_offset: 12px, ribbon_below_fold: 46px
|
|
box padding-top: 52px
|
|
-->
|
|
<div class="block-c2b">
|
|
<div class="c2b-main">
|
|
{% if badge_title %}
|
|
<div class="c2b-ribbon">
|
|
<img src="{{ ribbon_image | default('/static/figma-assets/badge_policy.png') }}" class="c2b-ribbon-img" alt="">
|
|
<span class="c2b-ribbon-text">{{ badge_title }}</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="c2b-container">
|
|
<div class="c2b-col c2b-left">
|
|
<div class="c2b-title" style="color: {{ left_color | default('var(--color-teal, #227582)') }}">
|
|
{{ left_title }}
|
|
</div>
|
|
<div class="c2b-body" style="color: {{ left_color | default('var(--color-teal, #227582)') }}">
|
|
{{ left_body }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="c2b-divider"></div>
|
|
|
|
<div class="c2b-col c2b-right">
|
|
<div class="c2b-title" style="color: {{ right_color | default('var(--color-teal, #227582)') }}">
|
|
{{ right_title }}
|
|
</div>
|
|
<div class="c2b-body" style="color: {{ right_color | default('var(--color-teal, #227582)') }}">
|
|
{{ right_body }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if statement %}
|
|
<div class="c2b-statement">{{ statement }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<style>
|
|
.block-c2b { display: flex; flex-direction: column; width: 100%; }
|
|
|
|
/*
|
|
리본+박스 수학적 계산 (Figma 원본):
|
|
badge 517x88 at y=929, box at y=947
|
|
접힘선 = 18px = 이미지 높이의 20.5%
|
|
scale(1200/1807) → ribbon 343x58, fold top에서 12px, 아래 46px
|
|
*/
|
|
.c2b-main { position: relative; }
|
|
|
|
/* ── 3D 리본 배지 ── */
|
|
.c2b-ribbon {
|
|
position: absolute;
|
|
top: -12px; /* 접힘선이 박스 top border와 정확히 일치 */
|
|
left: 50%; transform: translateX(-50%);
|
|
z-index: 2; width: 343px; text-align: center;
|
|
}
|
|
.c2b-ribbon-img { width: 100%; height: auto; display: block; }
|
|
.c2b-ribbon-text {
|
|
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
|
font-size: 22px; font-weight: 700; color: #fff;
|
|
letter-spacing: 0.03em; white-space: nowrap;
|
|
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
/* ── 틸 테두리 흰 박스 ── */
|
|
.c2b-container {
|
|
display: grid; grid-template-columns: 1fr auto 1fr;
|
|
background: #fff;
|
|
border: 2px solid #5a9ea8;
|
|
border-radius: 20px;
|
|
padding: 52px 40px 36px; /* top: ribbon_below(46) + 6px 여유 */
|
|
}
|
|
.c2b-divider { width: 1px; background: var(--color-border, #e2e8f0); margin: 0 32px; align-self: stretch; }
|
|
.c2b-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
|
|
.c2b-title { font-size: 36px; font-weight: var(--weight-black, 900); line-height: 1.2; word-break: keep-all; }
|
|
.c2b-body { font-size: 22px; font-weight: var(--weight-bold, 700); line-height: 1.9; white-space: pre-line; word-break: keep-all; }
|
|
|
|
/* ── Statement ── */
|
|
.c2b-statement {
|
|
margin-top: 24px; text-align: center; font-size: 28px; font-weight: var(--weight-bold, 700);
|
|
color: var(--color-primary, #1e293b); line-height: 1.6; word-break: keep-all; padding: 0 20px;
|
|
}
|
|
.c2b-statement strong { font-weight: 900; font-size: 1.15em; }
|
|
.c2b-statement em { color: #dc2626; font-style: normal; font-weight: 900; font-size: 1.2em; }
|
|
|
|
/* ── Responsive: 좁은 컨테이너 ── */
|
|
@container (max-width: 500px) {
|
|
.c2b-container { grid-template-columns: 1fr; gap: 20px; }
|
|
.c2b-divider { width: 100%; height: 1px; margin: 0; }
|
|
.c2b-title { font-size: 24px; }
|
|
.c2b-body { font-size: 16px; }
|
|
.c2b-statement { font-size: 20px; }
|
|
}
|
|
</style>
|