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:
187
templates/blocks/BEPs/process-product-2col.html
Normal file
187
templates/blocks/BEPs/process-product-2col.html
Normal file
@@ -0,0 +1,187 @@
|
||||
<!-- Process/Product 2단 비교: 좌측 과정의 혁신 + 우측 결과의 혁신 -->
|
||||
<!--
|
||||
📋 process-product-2col
|
||||
─────────────────
|
||||
용도: Process 혁신과 Product 변화를 좌우 2단으로 비교
|
||||
슬롯:
|
||||
left_title, right_title: 좌/우 제목
|
||||
left_sections[], right_sections[]: 섹션 목록 (title + bullets[])
|
||||
left_compare: As-is → To-be 비교 (선택, title + left_items[] + right_items[])
|
||||
Figma 원본: Frame 1171276073 (3848x1487 → 1280x495)
|
||||
색상 (Figma에서 추출):
|
||||
좌 배경: linear-gradient(180deg, #ffffff 46%, #39311e 100%)
|
||||
우 배경: linear-gradient(0deg, #296b55 0%, #ffffff 56%)
|
||||
좌 제목바: linear-gradient(270deg, #a4a096, #39311e)
|
||||
우 제목바: linear-gradient(0deg, #296b55, #022017)
|
||||
좌 제목텍스트: gradient(#296b55→#123328) + solid #3e3523
|
||||
우 제목텍스트: gradient(#296b55→#123328) + solid #225e4a
|
||||
좌 중제목: #5c3614, 16.6px/900
|
||||
우 중제목: #084c56, 16.6px/900
|
||||
본문: #000000, 13.3px/700, lineH=23.3px
|
||||
-->
|
||||
<div class="block-pp2">
|
||||
<div class="pp2-col pp2-left">
|
||||
<div class="pp2-header-bar pp2-header-bar--left">
|
||||
<span class="pp2-header-text pp2-header-text--left">{{ left_title }}</span>
|
||||
</div>
|
||||
<div class="pp2-body">
|
||||
{% if left_compare %}
|
||||
<div class="pp2-mid-title pp2-mid-title--left">{{ left_compare.title }}</div>
|
||||
<div class="pp2-compare">
|
||||
<div class="pp2-compare-col">
|
||||
{% for item in left_compare.left_items %}
|
||||
<div class="pp2-body-text">• {{ item }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="pp2-compare-arrow">
|
||||
<img src="{{ arrow_image | default('') }}" alt="→" class="pp2-arrow-img">
|
||||
</div>
|
||||
<div class="pp2-compare-col">
|
||||
{% for item in left_compare.right_items %}
|
||||
<div class="pp2-body-text">• {{ item }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% for section in left_sections %}
|
||||
<div class="pp2-mid-title pp2-mid-title--left">{{ section.title }}</div>
|
||||
{% for bullet in section.bullets %}
|
||||
<div class="pp2-body-text">• {{ bullet }}</div>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="pp2-col pp2-right">
|
||||
<div class="pp2-header-bar pp2-header-bar--right">
|
||||
<span class="pp2-header-text pp2-header-text--right">{{ right_title }}</span>
|
||||
</div>
|
||||
<div class="pp2-body">
|
||||
{% for section in right_sections %}
|
||||
<div class="pp2-mid-title pp2-mid-title--right">{{ section.title }}</div>
|
||||
{% for bullet in section.bullets %}
|
||||
<div class="pp2-body-text">• {{ bullet }}</div>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-pp2 {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pp2-col {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 495px;
|
||||
}
|
||||
|
||||
/* 좌측 배경: Figma gradient 180deg #fff 46% → #39311e 100% */
|
||||
.pp2-left {
|
||||
background: linear-gradient(180deg, #ffffff 46%, #39311e 100%);
|
||||
}
|
||||
|
||||
/* 우측 배경: Figma gradient 0deg #296b55 0% → #fff 56% */
|
||||
.pp2-right {
|
||||
background: linear-gradient(0deg, #296b55 0%, #ffffff 56%);
|
||||
}
|
||||
|
||||
/* 제목 바: height=47.2px, top=20.6px → padding-top으로 처리 */
|
||||
.pp2-header-bar {
|
||||
height: 47px;
|
||||
margin-top: 21px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 좌 제목바: 우측 둥글게, 그라데이션 우→좌 */
|
||||
.pp2-header-bar--left {
|
||||
background: linear-gradient(270deg, #a4a096 0%, #39311e 100%);
|
||||
border-radius: 0 24px 24px 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 우 제목바: 좌측 둥글게, 그라데이션 좌→우 */
|
||||
.pp2-header-bar--right {
|
||||
background: linear-gradient(90deg, #296b55 0%, #022017 100%);
|
||||
border-radius: 24px 0 0 24px;
|
||||
padding-left: 71px;
|
||||
}
|
||||
|
||||
/* 제목 텍스트: 23.3px/900, letterSpacing=1.2px */
|
||||
.pp2-header-text {
|
||||
font-size: 23.3px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 1.2px;
|
||||
line-height: 33.7px;
|
||||
}
|
||||
|
||||
/* 좌 제목: Figma solid fill #3e3523 */
|
||||
.pp2-header-text--left {
|
||||
color: #3e3523;
|
||||
}
|
||||
|
||||
/* 우 제목: Figma solid fill #225e4a */
|
||||
.pp2-header-text--right {
|
||||
color: #225e4a;
|
||||
}
|
||||
|
||||
/* 본문 영역 */
|
||||
.pp2-body {
|
||||
padding: 10px 27px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 중제목: 16.6px/900, lineH=31.6px */
|
||||
.pp2-mid-title {
|
||||
font-size: 16.6px;
|
||||
font-weight: 900;
|
||||
line-height: 31.6px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.pp2-mid-title:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.pp2-mid-title--left {
|
||||
color: #5c3614;
|
||||
}
|
||||
.pp2-mid-title--right {
|
||||
color: #084c56;
|
||||
}
|
||||
|
||||
/* 본문: 13.3px/700, lineH=23.3px */
|
||||
.pp2-body-text {
|
||||
font-size: 13.3px;
|
||||
font-weight: 700;
|
||||
color: #000000;
|
||||
line-height: 23.3px;
|
||||
}
|
||||
|
||||
/* As-is → To-be 비교 */
|
||||
.pp2-compare {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.pp2-compare-col {
|
||||
flex: 1;
|
||||
}
|
||||
.pp2-compare-arrow {
|
||||
flex-shrink: 0;
|
||||
width: 84px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.pp2-arrow-img {
|
||||
width: 84px;
|
||||
height: 30px;
|
||||
object-fit: contain;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user