194 lines
5.8 KiB
HTML
194 lines
5.8 KiB
HTML
<!-- 필수요건 3열 비교: 3개 카테고리 세로 색상바 + 한자 + 제목/설명 2단 -->
|
||
<!--
|
||
📋 prerequisites-3col
|
||
─────────────────
|
||
용도: 3개 필수요건/카테고리를 나란히 비교. 각 카테고리에 색상 바 + 한자 + 세로 라벨 + 2개 하위 항목(제목+설명).
|
||
슬롯:
|
||
columns[3]:
|
||
name — 세로 라벨 (예: "기술")
|
||
sub — 세로 부제 (예: "디지털")
|
||
kanji_top, kanji_bottom — 한자 2글자 (예: 技, 術)
|
||
bar_gradient — 색상 바 CSS gradient
|
||
heading_gradient_top, heading_gradient_bottom — 제목 gradient text
|
||
items[2]: (heading, desc)
|
||
Figma 원본: Frame 1171281190 (node 45:15, 2123×724)
|
||
수학적 계산:
|
||
scale = 1280 / 2123.13 = 0.60290
|
||
col width: 690→416px, bar width: 152.5→92px
|
||
title font: 45px × S = 27px, desc font: 35px × S = 21px
|
||
kanji font: 50px × S = 30px
|
||
CSS 요소: gradient bar, gradient text, border/dashed lines (전부 CSS)
|
||
이미지 의존: 없음 (순수 CSS)
|
||
-->
|
||
<div class="block-p3c">
|
||
{% for col in columns %}
|
||
<div class="p3c-col">
|
||
<!-- gradient 색상 바 -->
|
||
<div class="p3c-bar"></div>
|
||
|
||
<!-- 세로 라벨 영역 -->
|
||
<div class="p3c-vlabel-area">
|
||
<div class="p3c-vlabel">{{ col.name }}</div>
|
||
<div class="p3c-vlabel-sub">{{ col.sub }}</div>
|
||
</div>
|
||
|
||
<!-- 한자 -->
|
||
{% if col.kanji_top %}
|
||
<div class="p3c-kanji p3c-kanji--top">{{ col.kanji_top }}</div>
|
||
{% endif %}
|
||
{% if col.kanji_bottom %}
|
||
<div class="p3c-kanji p3c-kanji--bottom">{{ col.kanji_bottom }}</div>
|
||
{% endif %}
|
||
|
||
<!-- 상단 항목 -->
|
||
<div class="p3c-section p3c-section--top">
|
||
<div class="p3c-heading">
|
||
{{ col.entries[0].heading|safe }}
|
||
</div>
|
||
<div class="p3c-desc">
|
||
{% if col.entries[0].bullets is defined and col.entries[0].bullets %}
|
||
{% for b in col.entries[0].bullets %}<div class="bul">• {{ b }}</div>{% endfor %}
|
||
{% else %}
|
||
{{ col.entries[0].desc|safe }}
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 중간 구분선 -->
|
||
<div class="p3c-mid-line"></div>
|
||
|
||
<!-- 하단 항목 -->
|
||
<div class="p3c-section p3c-section--bottom">
|
||
<div class="p3c-heading">
|
||
{{ col.entries[1].heading|safe }}
|
||
</div>
|
||
<div class="p3c-desc">
|
||
{% if col.entries[1].bullets is defined and col.entries[1].bullets %}
|
||
{% for b in col.entries[1].bullets %}<div class="bul">• {{ b }}</div>{% endfor %}
|
||
{% else %}
|
||
{{ col.entries[1].desc|safe }}
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 테두리 -->
|
||
<div class="p3c-border-top"></div>
|
||
<div class="p3c-border-bottom"></div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<style>
|
||
.block-p3c {
|
||
display: flex;
|
||
gap: 12px;
|
||
width: 100%;
|
||
height: 100%;
|
||
word-break: keep-all;
|
||
}
|
||
|
||
.p3c-col {
|
||
flex: 1;
|
||
position: relative;
|
||
min-height: 0;
|
||
height: 100%;
|
||
border-top: 1.2px solid #000;
|
||
border-bottom: 1.2px solid #000;
|
||
}
|
||
|
||
/*
|
||
gradient 색상 바: Figma 152.5×595
|
||
→ 비율 7.2% of col width → flex none 72px (or %)
|
||
3가지 색상: 파랑(#0D78D0→#023056), 주황(#FF9A23→#CC5200), 초록(#39BE49→#23742C)
|
||
*/
|
||
.p3c-bar {
|
||
position: absolute;
|
||
left: 0; top: 0;
|
||
width: 56px; height: 100%; /* 슬라이드 적용: 72→56px */
|
||
}
|
||
/* Figma 원본 열별 색상 */
|
||
.p3c-col:nth-child(1) .p3c-bar { background: linear-gradient(180deg, #0D78D0 0%, #023056 100%); }
|
||
.p3c-col:nth-child(2) .p3c-bar { background: linear-gradient(180deg, #FF9A23 0%, #CC5200 100%); }
|
||
.p3c-col:nth-child(3) .p3c-bar { background: linear-gradient(180deg, #39BE49 0%, #23742C 100%); }
|
||
|
||
/* 세로 라벨: 바 좌측 절반에 세로 글자 */
|
||
.p3c-vlabel-area {
|
||
position: absolute;
|
||
left: 0; top: 0;
|
||
width: 56px; height: 100%; /* 슬라이드 적용: 36→56px (bar와 동일) */
|
||
display: flex; flex-direction: column;
|
||
align-items: center; justify-content: center;
|
||
gap: 8px;
|
||
z-index: 3;
|
||
}
|
||
.p3c-vlabel, .p3c-vlabel-sub {
|
||
writing-mode: vertical-rl;
|
||
text-orientation: upright;
|
||
font-weight: 700; font-size: 14px; /* 슬라이드 적용 */
|
||
color: #fff;
|
||
letter-spacing: 0.1em;
|
||
}
|
||
.p3c-vlabel-sub { font-size: 12px; }
|
||
|
||
/* 한자: 바 우측 절반 */
|
||
.p3c-kanji {
|
||
position: absolute;
|
||
left: 36px; width: 36px;
|
||
font-weight: 700; font-size: 24px;
|
||
color: #fff;
|
||
text-align: center;
|
||
display: flex; align-items: center; justify-content: center;
|
||
z-index: 2;
|
||
}
|
||
.p3c-kanji--top { top: 15%; height: 30%; }
|
||
.p3c-kanji--bottom { top: 55%; height: 30%; }
|
||
|
||
/* 제목+설명 영역: 슬라이드 적용 */
|
||
.p3c-section {
|
||
position: absolute;
|
||
left: 60px; right: 6px; /* 슬라이드 적용: 80→60px */
|
||
}
|
||
.p3c-section--top { top: 3%; height: 47%; }
|
||
.p3c-section--bottom { top: 53%; height: 47%; }
|
||
|
||
/*
|
||
제목: gradient text
|
||
Figma 45px × S = 27px → block 18px
|
||
*/
|
||
.p3c-heading {
|
||
font-weight: 700; font-size: 12px; /* 슬라이드 적용: 18→12px */
|
||
line-height: 1.5;
|
||
-webkit-background-clip: text; background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
margin-bottom: 6px;
|
||
}
|
||
/* Figma 원본 열별 heading 색상 */
|
||
.p3c-col:nth-child(1) .p3c-heading { background-image: linear-gradient(180deg, #0D78D0 0%, #134D7F 100%); }
|
||
.p3c-col:nth-child(2) .p3c-heading { background-image: linear-gradient(180deg, #FF9A23 0%, #CC5200 100%); }
|
||
.p3c-col:nth-child(3) .p3c-heading { background-image: linear-gradient(180deg, #39BE49 0%, #23742C 100%); }
|
||
|
||
/*
|
||
설명: Figma 35px × S = 21px → block 14px
|
||
#3E3523
|
||
*/
|
||
.p3c-desc {
|
||
font-weight: 500; font-size: 11px; /* 슬라이드 적용: 14→11px */
|
||
line-height: 1.6;
|
||
color: #3E3523;
|
||
}
|
||
.p3c-desc .bul {
|
||
padding-left: 12px;
|
||
text-indent: -12px;
|
||
}
|
||
|
||
/* 중간 구분선: dashed */
|
||
.p3c-mid-line {
|
||
position: absolute;
|
||
left: 56px; right: 0; /* bar width와 동일 */
|
||
top: 50%;
|
||
border-top: 1.2px dashed #000;
|
||
}
|
||
|
||
/* 테두리 (상하 실선은 col border로 처리) */
|
||
</style>
|