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:
29
templates/blocks/BEPs/detail-button.html
Normal file
29
templates/blocks/BEPs/detail-button.html
Normal file
@@ -0,0 +1,29 @@
|
||||
<!-- 상세보기 버튼: 그라데이션 배경 + 둥근 모서리 -->
|
||||
<!--
|
||||
📋 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>
|
||||
73
templates/blocks/BEPs/engn-solution-dfma.html
Normal file
73
templates/blocks/BEPs/engn-solution-dfma.html
Normal file
@@ -0,0 +1,73 @@
|
||||
<!-- Engn. Solution / DfMA 설명 + 정책 달성 -->
|
||||
<!--
|
||||
📋 engn-solution-dfma
|
||||
─────────────────
|
||||
용도: Engn. Solution과 DfMA 개념 설명 + 정책 달성 연결
|
||||
슬롯:
|
||||
items[]: 항목 목록
|
||||
- title: 제목 (예: "Engn. Solution", "DfMA")
|
||||
- description: 설명 텍스트
|
||||
- color: 제목 색상 (예: "#217581")
|
||||
main_text: 하단 메인 텍스트
|
||||
policy_label: 정책 달성 라벨
|
||||
Figma 원본: Frame 1171276070
|
||||
-->
|
||||
<div class="block-engn">
|
||||
<div class="engn-items">
|
||||
{% for item in items %}
|
||||
<div class="engn-item">
|
||||
<div class="engn-title" style="color: {{ item.color | default('#217581') }}">{{ item.title }}</div>
|
||||
<div class="engn-desc">{{ item.description }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if main_text %}
|
||||
<div class="engn-main">{{ main_text }}</div>
|
||||
{% endif %}
|
||||
{% if policy_label %}
|
||||
<div class="engn-policy">{{ policy_label }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-engn {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
.engn-items {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.engn-item {
|
||||
flex: 1;
|
||||
}
|
||||
.engn-title {
|
||||
font-size: var(--font-subtitle, 16px);
|
||||
font-weight: 900;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.engn-desc {
|
||||
font-size: var(--font-caption, 12px);
|
||||
font-weight: 700;
|
||||
color: #217581;
|
||||
line-height: var(--line-height-ko, 1.7);
|
||||
}
|
||||
.engn-main {
|
||||
font-size: var(--font-body, 14px);
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
line-height: var(--line-height-ko, 1.7);
|
||||
text-align: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.engn-policy {
|
||||
background: #1a365d;
|
||||
color: #fff;
|
||||
font-size: var(--font-body, 14px);
|
||||
font-weight: 700;
|
||||
padding: 8px 20px;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
</style>
|
||||
25
templates/blocks/BEPs/image-placeholder.html
Normal file
25
templates/blocks/BEPs/image-placeholder.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<!-- 이미지 플레이스홀더: 이미지 슬롯만 있는 프레임 -->
|
||||
<!--
|
||||
📋 image-placeholder
|
||||
─────────────────
|
||||
용도: 이미지만 배치되는 프레임 (텍스트 없음)
|
||||
슬롯: src (이미지 경로), alt (대체 텍스트), width, height
|
||||
Figma 원본: Frame 1171276071 (949x275, 이미지만)
|
||||
-->
|
||||
<div class="block-img-ph">
|
||||
<img src="{{ src }}" alt="{{ alt | default('') }}" style="width:100%;height:100%;object-fit:contain;">
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-img-ph {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.block-img-ph img {
|
||||
border-radius: var(--radius, 6px);
|
||||
}
|
||||
</style>
|
||||
87
templates/blocks/BEPs/policy-direction.html
Normal file
87
templates/blocks/BEPs/policy-direction.html
Normal file
@@ -0,0 +1,87 @@
|
||||
<!-- 정책방향: 좌측 설명 + 우측 항목/이미지 -->
|
||||
<!--
|
||||
📋 policy-direction
|
||||
─────────────────
|
||||
용도: 인프라 건설산업의 정책방향 설명 (좌측 텍스트 + 우측 구조도)
|
||||
슬롯:
|
||||
title: 대제목 (예: "인프라 건설산업의 정책방향")
|
||||
description: 설명 텍스트
|
||||
sub_sections[]: 하위 섹션 목록
|
||||
- title: 섹션 제목
|
||||
- bullets[]: 불릿
|
||||
questions[]: 질문 목록 (좌하단)
|
||||
- text: 질문 텍스트
|
||||
Figma 원본: Frame 1171276067
|
||||
-->
|
||||
<div class="block-policy">
|
||||
<div class="pol-header">
|
||||
<div class="pol-title">{{ title }}</div>
|
||||
{% if description %}
|
||||
<div class="pol-desc">{{ description }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="pol-content">
|
||||
{% for section in sub_sections %}
|
||||
<div class="pol-section">
|
||||
<div class="pol-section-title">{{ section.title }}</div>
|
||||
{% for bullet in section.bullets %}
|
||||
<div class="pol-bullet">• {{ bullet }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if questions %}
|
||||
<div class="pol-questions">
|
||||
{% for q in questions %}
|
||||
<div class="pol-q">{{ q.text }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-policy {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
.pol-header {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.pol-title {
|
||||
font-size: var(--font-subtitle, 16px);
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.pol-desc {
|
||||
font-size: var(--font-caption, 12px);
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
line-height: var(--line-height-ko, 1.7);
|
||||
}
|
||||
.pol-section {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.pol-section-title {
|
||||
font-size: var(--font-body, 13px);
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.pol-bullet {
|
||||
font-size: var(--font-caption, 11px);
|
||||
color: #333;
|
||||
line-height: var(--line-height-ko, 1.7);
|
||||
padding-left: 8px;
|
||||
}
|
||||
.pol-questions {
|
||||
margin-top: 16px;
|
||||
border-top: 1px solid #ccc;
|
||||
padding-top: 12px;
|
||||
}
|
||||
.pol-q {
|
||||
font-size: var(--font-body, 13px);
|
||||
font-weight: 700;
|
||||
color: #c41e3a;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
</style>
|
||||
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>
|
||||
189
templates/blocks/BEPs/process-product-2col.svg
Normal file
189
templates/blocks/BEPs/process-product-2col.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.0 MiB |
198
templates/blocks/BEPs/process-product-2col_svg_test.html
Normal file
198
templates/blocks/BEPs/process-product-2col_svg_test.html
Normal file
File diff suppressed because one or more lines are too long
141
templates/blocks/BEPs/process-product-2col_test.html
Normal file
141
templates/blocks/BEPs/process-product-2col_test.html
Normal file
@@ -0,0 +1,141 @@
|
||||
<!DOCTYPE html><html><head><meta charset="UTF-8">
|
||||
<style>
|
||||
*{margin:0;padding:0;box-sizing:border-box;}
|
||||
body{background:#e5e5e5;padding:10px;font-family:'Pretendard Variable','Noto Sans KR',sans-serif;word-break:keep-all;}
|
||||
|
||||
.block-pp2 {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
width: 1280px;
|
||||
height: 495px;
|
||||
}
|
||||
.pp2-col {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.pp2-left {
|
||||
background: linear-gradient(180deg, #ffffff 46%, #39311e 100%);
|
||||
}
|
||||
.pp2-right {
|
||||
background: linear-gradient(0deg, #296b55 0%, #ffffff 56%);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.pp2-header-text {
|
||||
font-size: 23.3px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 1.2px;
|
||||
line-height: 33.7px;
|
||||
}
|
||||
.pp2-header-text--left {
|
||||
color: #3e3523;
|
||||
}
|
||||
.pp2-header-text--right {
|
||||
color: #225e4a;
|
||||
}
|
||||
.pp2-body {
|
||||
padding: 10px 27px;
|
||||
flex: 1;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.pp2-body-text {
|
||||
font-size: 13.3px;
|
||||
font-weight: 700;
|
||||
color: #000000;
|
||||
line-height: 23.3px;
|
||||
}
|
||||
.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;
|
||||
font-size: 24px;
|
||||
color: #5c3614;
|
||||
}
|
||||
</style></head><body>
|
||||
|
||||
<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">과정 (Process)의 혁신</span>
|
||||
</div>
|
||||
<div class="pp2-body">
|
||||
<div class="pp2-mid-title pp2-mid-title--left">Analogue 개념 기반 업무의 Digital Transformation</div>
|
||||
<div class="pp2-compare">
|
||||
<div class="pp2-compare-col">
|
||||
<div class="pp2-body-text">• 개념, 도서, 행정 절차 중심</div>
|
||||
<div class="pp2-body-text">• 2D 도면, 전문가, 규정</div>
|
||||
<div class="pp2-body-text">• 업무 구분(단절), 책임</div>
|
||||
</div>
|
||||
<div class="pp2-compare-arrow">➠</div>
|
||||
<div class="pp2-compare-col">
|
||||
<div class="pp2-body-text">• 시각화된 목적물, 소통, 투명성 중심</div>
|
||||
<div class="pp2-body-text">• 3D 모델, 참여자, 실체</div>
|
||||
<div class="pp2-body-text">• 협업(융·복합), 창의성</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pp2-mid-title pp2-mid-title--left">위치기반의 3D 모델을 사용하는 Process 혁신</div>
|
||||
<div class="pp2-body-text">• 위치기반(지리적, 지형, 지반상태 포함)의 GIS와 3D 모델(형상, 내용속성) 기반의 건설 정보를 포함하는 BIM의 연계를 통한 업무 프로세스의 혁신</div>
|
||||
<div class="pp2-mid-title pp2-mid-title--left">사용자 중심의 Solution(S/W) 제공</div>
|
||||
<div class="pp2-body-text">• 인프라 건설산업의 1차적인 Process 혁신은 등고선 중심의 지형도가 아닌 속성이 포함된 수치지형도와 본태 측량에서 획득한 3D 지반모델 구축 필수</div>
|
||||
<div class="pp2-body-text">• 설계와 시공에 관련된 기술을 정리하고 디지털화하여 S/W로 기술 축적</div>
|
||||
<div class="pp2-body-text">• 서로 다른 S/W로 작성되어 분절화된 Analogue 방식의 성과물과 정보물을 연계가 가능하도록 설계, 시공 Solution 제공</div>
|
||||
</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">결과 (Products)의 혁신</span>
|
||||
</div>
|
||||
<div class="pp2-body">
|
||||
<div class="pp2-mid-title pp2-mid-title--right">Copy & Paste로 인한 하향 평준화된 기존 성과품의 품질 향상</div>
|
||||
<div class="pp2-body-text">• 과거 수작업으로 시행하면서 발생하던 오류 등의 최소화</div>
|
||||
<div class="pp2-body-text">• 정확한 Data에 기반한 계획과 개선된 높은 품질의 성과물</div>
|
||||
<div class="pp2-mid-title pp2-mid-title--right">Analogue 기반 도서 외 Digital 기반 정보물 추가</div>
|
||||
<div class="pp2-body-text">• 규정에만 의존한 도면, 수량, 계산서, 시방서 등의 성과물에 3D 모델, 시뮬레이션 등의 Digital 기반 정보물(Information Data and Products)이 추가</div>
|
||||
<div class="pp2-mid-title pp2-mid-title--right">Solution을 이용한 업무효율화(사용자 편의, 협업 및 의사소통 강화 등)</div>
|
||||
<div class="pp2-body-text">• 디지털 기반 성과물인 Graphic 중심의 3D 모델, 시뮬레이션을 제대로 활용하기 위해서는 기존의 낮은 수준이 아니라 공학용 사이니지(H/W) 시스템이 필수로 갖춰야만 함</div>
|
||||
<div class="pp2-body-text">• Engn. Solution을 통해 프로젝트에 관한 이슈를 함께 검토하고 논의하고 다양한 건설단계별 정보를 디지털 데이터로 저장하여 건설의 전 과정을 통합관리</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
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>
|
||||
106
templates/blocks/cards/compare-2col-badge.html
Normal file
106
templates/blocks/cards/compare-2col-badge.html
Normal file
@@ -0,0 +1,106 @@
|
||||
<!-- 배지 헤더 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>
|
||||
113
templates/blocks/cards/compare-detail-gradient.html
Normal file
113
templates/blocks/cards/compare-detail-gradient.html
Normal file
@@ -0,0 +1,113 @@
|
||||
<!-- 그라디언트 상세 2열 비교: 비대칭 라운드 헤더 + 행 공유 + As-Is/To-Be -->
|
||||
<!--
|
||||
📋 compare-detail-gradient
|
||||
─────────────────
|
||||
용도: 두 카테고리의 상세 비교 (각각 N개 하위 섹션, 행 공유 정렬)
|
||||
슬롯: left_header, right_header, sections[] (각 row에 left + right)
|
||||
Figma 원본: Frame 4 (과정의 혁신 vs 결과의 혁신)
|
||||
디자인:
|
||||
- 좌측 헤더: 우측 라운드 + 텍스트 우정렬 (warm 그라디언트)
|
||||
- 우측 헤더: 좌측 라운드 + 텍스트 좌정렬 (teal 그라디언트)
|
||||
- CSS Grid 2열×N행: 좌/우 섹션 제목이 같은 Y선에 정렬
|
||||
- 첫 번째 섹션: As-Is → 화살표 → To-Be 수평 배치 가능
|
||||
수학적 계산:
|
||||
좌/우 섹션 Y좌표 — Row1: 1166/1166(정렬), Row2: 1529/1467(62px차→Grid해결), Row3: 1845/1845(정렬)
|
||||
-->
|
||||
<div class="block-cdg">
|
||||
<!-- Row 0: Headers -->
|
||||
<div class="cdg-header cdg-header-warm">
|
||||
<span class="cdg-header-text">{{ left_header }}</span>
|
||||
</div>
|
||||
<div class="cdg-header cdg-header-teal">
|
||||
<span class="cdg-header-text">{{ right_header }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Rows: sections (행 공유로 좌/우 Y선 자동 정렬) -->
|
||||
{% for row in sections %}
|
||||
<div class="cdg-cell cdg-cell-warm">
|
||||
<div class="cdg-sec-title cdg-title-warm">{{ row.left.title }}</div>
|
||||
{% if row.left.asis is defined %}
|
||||
<div class="cdg-asis-tobe">
|
||||
<div class="cdg-asis">
|
||||
{% for b in row.left.asis %}<div class="cdg-bullet">{{ b }}</div>{% endfor %}
|
||||
</div>
|
||||
<img src="{{ arrow_image | default('../../../static/figma-assets/arrow_asis_tobe.png') }}" class="cdg-arrow" alt="→">
|
||||
<div class="cdg-tobe">
|
||||
{% for b in row.left.tobe %}<div class="cdg-bullet">{{ b }}</div>{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% elif row.left.bullets is defined %}
|
||||
<div class="cdg-sec-body">
|
||||
{% for b in row.left.bullets %}<div class="cdg-bullet">{{ b }}</div>{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="cdg-sec-body">{{ row.left.body }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="cdg-cell cdg-cell-teal">
|
||||
<div class="cdg-sec-title cdg-title-teal">{{ row.right.title }}</div>
|
||||
{% if row.right.bullets is defined %}
|
||||
<div class="cdg-sec-body">
|
||||
{% for b in row.right.bullets %}<div class="cdg-bullet">{{ b }}</div>{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="cdg-sec-body">{{ row.right.body }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/*
|
||||
CSS Grid: 2열 × (1+N)행
|
||||
행 공유 → 좌/우 섹션 제목이 같은 Y선에 자동 정렬
|
||||
Figma Row2 차이: 좌 y=1529, 우 y=1467 (62px) → Grid가 해결
|
||||
*/
|
||||
.block-cdg {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Headers (비대칭 라운드) ── */
|
||||
.cdg-header { padding: 8px 20px; display: flex; min-height: 36px; align-items: center; }
|
||||
.cdg-header-text { font-size: 15px; font-weight: var(--weight-black, 900); color: #000; line-height: 1.3; }
|
||||
.cdg-header-warm {
|
||||
background: linear-gradient(90deg, rgba(165,161,150,0.15), rgba(57,50,30,0.85));
|
||||
border-radius: 0 28px 28px 0; justify-content: flex-end; text-align: right; margin-right: 4px;
|
||||
}
|
||||
.cdg-header-teal {
|
||||
background: linear-gradient(90deg, rgba(3,33,24,0.85), rgba(41,107,85,0.15));
|
||||
border-radius: 28px 0 0 28px; justify-content: flex-start; text-align: left; margin-left: 4px;
|
||||
}
|
||||
|
||||
/* ── Grid Cells (행 공유 → 좌우 Y선 정렬) ── */
|
||||
.cdg-cell {
|
||||
padding: 8px 14px;
|
||||
display: flex; flex-direction: column; gap: 4px;
|
||||
align-self: start;
|
||||
}
|
||||
.cdg-cell-warm { background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(57,50,30,0.08)); }
|
||||
.cdg-cell-teal { background: linear-gradient(180deg, rgba(41,107,85,0.06), rgba(255,255,255,0.4)); }
|
||||
|
||||
/* ── Section Title & Body ── */
|
||||
.cdg-sec-title { font-size: 12px; font-weight: var(--weight-black, 900); line-height: 1.4; word-break: keep-all; margin-bottom: 2px; }
|
||||
.cdg-title-warm { color: var(--color-warm-brown, #5C3714); }
|
||||
.cdg-title-teal { color: var(--color-dark-teal, #084C56); }
|
||||
.cdg-sec-body { padding-left: 8px; }
|
||||
|
||||
/* ── Bullets ── */
|
||||
.cdg-bullet {
|
||||
position: relative; padding-left: 14px;
|
||||
font-size: 11px; font-weight: var(--weight-bold, 700); color: #1a1a1a;
|
||||
line-height: 1.7; word-break: keep-all;
|
||||
}
|
||||
.cdg-bullet::before { content: '•'; position: absolute; left: 0; color: #666; }
|
||||
|
||||
/* ── As-Is → To-Be 수평 레이아웃 ── */
|
||||
.cdg-asis-tobe { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
|
||||
.cdg-asis, .cdg-tobe { flex: 1; padding-left: 8px; }
|
||||
.cdg-arrow { width: 60px; height: auto; flex-shrink: 0; opacity: 0.7; }
|
||||
</style>
|
||||
98
templates/blocks/cards/hero-icon-cards.html
Normal file
98
templates/blocks/cards/hero-icon-cards.html
Normal file
@@ -0,0 +1,98 @@
|
||||
<!-- 히어로 문구 + 아이콘 카드: 큰 선언문 + 3D 리본 배지 + N열 아이콘 카드 -->
|
||||
<!--
|
||||
📋 hero-icon-cards
|
||||
─────────────────
|
||||
용도: 핵심 목표/가치를 선언하고 N개 키워드 카드로 시각화
|
||||
슬롯: statement, badge_title, cards[] (icon, title, subtitle)
|
||||
Figma 원본: Frame 2 (Solution 제작 목표 — 다크 테마, 빨간 리본+테두리, 5열 카드)
|
||||
수학적 계산:
|
||||
badge 508x94 at y=1431, box at y=1449, frame_w=1808
|
||||
scale = 1200/1808 = 0.6637
|
||||
ribbon: 337x62px, fold_offset: 12px, ribbon_below_fold: 50px
|
||||
box padding-top: 56px
|
||||
-->
|
||||
<div class="block-hic">
|
||||
{% if statement %}
|
||||
<div class="hic-statement">{{ statement }}</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="hic-card-area">
|
||||
{% if badge_title %}
|
||||
<div class="hic-ribbon">
|
||||
<img src="{{ ribbon_image | default('/static/figma-assets/badge_solution.png') }}" class="hic-ribbon-img" alt="">
|
||||
<span class="hic-ribbon-text">{{ badge_title }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="hic-box">
|
||||
<div class="hic-cards">
|
||||
{% for card in cards %}
|
||||
<div class="hic-card">
|
||||
{% if card.icon %}<div class="hic-icon">{{ card.icon }}</div>{% endif %}
|
||||
<div class="hic-title">{{ card.title }}</div>
|
||||
{% if card.subtitle %}<div class="hic-sub">({{ card.subtitle }})</div>{% endif %}
|
||||
</div>
|
||||
{% if not loop.last %}<div class="hic-sep"></div>{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-hic {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
width: 100%; background: #0a0a0a; border-radius: 16px;
|
||||
padding: 36px 32px 28px; overflow: visible;
|
||||
}
|
||||
|
||||
/* ── Hero Statement ── */
|
||||
.hic-statement {
|
||||
text-align: center; font-size: 28px; font-weight: var(--weight-bold, 700);
|
||||
color: #fff; line-height: 1.6; word-break: keep-all;
|
||||
margin-bottom: 28px; padding: 0 24px;
|
||||
}
|
||||
.hic-statement strong { font-weight: 900; font-size: 1.1em; }
|
||||
.hic-statement em { color: #ef4444; font-style: normal; font-weight: 900; font-size: 1.15em; }
|
||||
|
||||
/*
|
||||
리본+박스 수학적 계산 (Figma 원본):
|
||||
badge 508x94 at y=1431, box at y=1449
|
||||
접힘선 = 18px = 이미지 높이의 19.1%
|
||||
scale(1200/1808) → ribbon 337x62, fold top에서 12px, 아래 50px
|
||||
*/
|
||||
.hic-card-area { position: relative; width: 100%; margin-top: 20px; }
|
||||
|
||||
.hic-ribbon {
|
||||
position: absolute;
|
||||
top: -12px; /* 접힘선이 박스 top border와 정확히 일치 */
|
||||
left: 50%; transform: translateX(-50%);
|
||||
z-index: 2; width: 337px; text-align: center;
|
||||
}
|
||||
.hic-ribbon-img { width: 100%; height: auto; display: block; }
|
||||
.hic-ribbon-text {
|
||||
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
||||
font-size: 20px; font-weight: 700; color: #fff;
|
||||
letter-spacing: 0.03em; white-space: nowrap;
|
||||
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* 빨간 테두리 흰 박스 */
|
||||
.hic-box {
|
||||
position: relative; background: #fff;
|
||||
border: 6px solid #9b1b1b; border-radius: 20px;
|
||||
padding: 56px 8px 8px; /* top: ribbon_below(50) + 6px 여유 */
|
||||
}
|
||||
|
||||
.hic-cards { display: flex; align-items: stretch; width: 100%; }
|
||||
.hic-card {
|
||||
flex: 1; display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center; text-align: center;
|
||||
padding: 16px 12px 20px; gap: 8px;
|
||||
}
|
||||
.hic-sep { width: 1px; background: #e0e0e0; align-self: stretch; margin: 8px 0; }
|
||||
.hic-icon { font-size: 48px; line-height: 1; margin-bottom: 8px; }
|
||||
.hic-icon img { width: 64px; height: 64px; object-fit: contain; }
|
||||
.hic-title { font-size: 20px; font-weight: var(--weight-black, 900); color: #1a1a1a; line-height: 1.3; }
|
||||
.hic-sub { font-size: 15px; font-weight: var(--weight-medium, 500); color: #666; }
|
||||
</style>
|
||||
111
templates/blocks/cards/hero-icon-cards_1.html
Normal file
111
templates/blocks/cards/hero-icon-cards_1.html
Normal file
@@ -0,0 +1,111 @@
|
||||
<!-- 히어로 카드 변형1: 3D 리본 배지 + N열 카드 (제목+중제목+불릿 계층) -->
|
||||
<!--
|
||||
📋 hero-icon-cards_1
|
||||
─────────────────
|
||||
용도: 핵심 요건/목표를 N열 카드로 시각화. 각 카드에 제목+중제목+불릿 계층.
|
||||
슬롯: statement(선택), badge_title, cards[] (title, sections[{title, bullets[]}])
|
||||
변형 원본: hero-icon-cards
|
||||
변경점: icon/title/subtitle → sections[{title, bullets[]}] 계층으로 변경
|
||||
수학적 계산: hero-icon-cards와 동일
|
||||
badge 508x94 at y=1431, box at y=1449, frame_w=1808
|
||||
scale = 1200/1808 = 0.6637
|
||||
ribbon: 337x62px, fold_offset: 12px, ribbon_below_fold: 50px
|
||||
box padding-top: 56px
|
||||
-->
|
||||
<div class="block-hic">
|
||||
{% if statement %}
|
||||
<div class="hic-statement">{{ statement }}</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="hic-card-area">
|
||||
{% if badge_title %}
|
||||
<div class="hic-ribbon">
|
||||
<img src="{{ ribbon_image | default('../../../static/figma-assets/badge_solution.png') }}" class="hic-ribbon-img" alt="">
|
||||
<span class="hic-ribbon-text">{{ badge_title }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="hic-box">
|
||||
<div class="hic-cards">
|
||||
{% for card in cards %}
|
||||
<div class="hic-card">
|
||||
<div class="hic-title">{{ card.title }}</div>
|
||||
{% for section in card.sections %}
|
||||
<div class="hic-sec-title">{{ section.title }}</div>
|
||||
{% for bullet in section.bullets %}
|
||||
<div class="hic-bullet">{{ bullet }}</div>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if not loop.last %}<div class="hic-sep"></div>{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-hic {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
width: 100%; overflow: visible;
|
||||
}
|
||||
|
||||
/* ── Hero Statement ── */
|
||||
.hic-statement {
|
||||
text-align: center; font-size: 16px; font-weight: var(--weight-bold, 700);
|
||||
color: #1e293b; line-height: 1.6; word-break: keep-all;
|
||||
margin-bottom: 8px; padding: 0 24px;
|
||||
}
|
||||
.hic-statement strong { font-weight: 900; font-size: 1.1em; }
|
||||
.hic-statement em { color: #ef4444; font-style: normal; font-weight: 900; font-size: 1.15em; }
|
||||
|
||||
/*
|
||||
리본+박스 수학적 계산 (Figma 원본):
|
||||
badge 508x94 at y=1431, box at y=1449
|
||||
접힘선 = 18px = 이미지 높이의 19.1%
|
||||
scale(1200/1808) → ribbon 337x62, fold top에서 12px, 아래 50px
|
||||
*/
|
||||
.hic-card-area { position: relative; width: 100%; }
|
||||
|
||||
.hic-ribbon {
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: 50%; transform: translateX(-50%);
|
||||
z-index: 2; width: 337px; text-align: center;
|
||||
}
|
||||
.hic-ribbon-img { width: 100%; height: auto; display: block; }
|
||||
.hic-ribbon-text {
|
||||
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
||||
font-size: 14px; font-weight: 700; color: #fff;
|
||||
letter-spacing: 0.03em; white-space: nowrap;
|
||||
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* 얇은 테두리 박스 */
|
||||
.hic-box {
|
||||
position: relative; background: #fff;
|
||||
border: 1px solid #e2e8f0; border-radius: 8px;
|
||||
padding: 36px 8px 8px;
|
||||
}
|
||||
|
||||
.hic-cards { display: flex; align-items: stretch; width: 100%; }
|
||||
.hic-card {
|
||||
flex: 1; display: flex; flex-direction: column;
|
||||
padding: 8px 10px 10px; gap: 0;
|
||||
}
|
||||
.hic-sep { width: 1px; background: #e0e0e0; align-self: stretch; margin: 4px 0; }
|
||||
|
||||
/* ── 카드 내부 (변형: icon → 소제목+불릿 계층) ── */
|
||||
/* 중제목 (카드 헤더: 기술/사람/자연): 중앙 정렬 */
|
||||
.hic-title { font-size: 14px; font-weight: var(--weight-black, 900); color: #0d7377; line-height: 1.3; text-align: center; margin-bottom: 6px; }
|
||||
/* 소제목 (D1): 12px/700, 들여쓰기 1단 */
|
||||
.hic-sec-title { font-size: 12px; font-weight: 700; color: #1a1a1a; line-height: 1.4; margin-top: 6px; margin-bottom: 2px; padding-left: 8px; }
|
||||
.hic-sec-title:first-of-type { margin-top: 0; }
|
||||
/* 불릿 (D2): 11px/500, 들여쓰기 2단 */
|
||||
.hic-bullet {
|
||||
position: relative; padding-left: 24px;
|
||||
font-size: 11px; font-weight: 500; color: #334155;
|
||||
line-height: 1.7; word-break: keep-all;
|
||||
}
|
||||
.hic-bullet::before { content: '•'; position: absolute; left: 14px; color: #666; }
|
||||
</style>
|
||||
169
templates/blocks/cards/test-compare-2col-badge.html
Normal file
169
templates/blocks/cards/test-compare-2col-badge.html
Normal file
@@ -0,0 +1,169 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>compare-2col-badge 테스트</title>
|
||||
<link rel="stylesheet" href="../../../static/tokens.css">
|
||||
<link rel="stylesheet" href="../../../static/base.css">
|
||||
<style>
|
||||
body { background: #f0f0f0; padding: 40px; }
|
||||
h2 { margin: 40px 0 16px; font-size: 18px; color: #333; }
|
||||
.slide {
|
||||
width: 1280px; height: 720px;
|
||||
background: #fff; padding: 40px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
|
||||
margin-bottom: 40px;
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
font-family: 'Pretendard Variable', 'Noto Sans KR', sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h2>Test 1: Figma Frame 3 원본 (Engn. Solution vs DfMA)</h2>
|
||||
<div class="slide" style="grid-template-rows: auto 1fr auto;">
|
||||
|
||||
<!-- compare-2col-badge 블록 시작 -->
|
||||
<div class="block-c2b">
|
||||
<div class="c2b-badge">
|
||||
<span class="c2b-badge-text">정책 달성</span>
|
||||
</div>
|
||||
<div class="c2b-container">
|
||||
<div class="c2b-col c2b-left">
|
||||
<div class="c2b-title" style="color: var(--color-teal, #227582)">Engn. Solution</div>
|
||||
<div class="c2b-body" style="color: var(--color-teal, #227582)">목적 시설물에 대한 설계, 시공, 유지관리 정보를 고객이 쉽고 편리하게 사용하고, 편익이 발생하도록 제공하는 다양한 형태의 정보물과 이를 구현할 수 있는 S/W 및 H/W와 그 기술을 포함하는 서비스</div>
|
||||
</div>
|
||||
<div class="c2b-divider"></div>
|
||||
<div class="c2b-col c2b-right">
|
||||
<div class="c2b-title" style="color: var(--color-teal, #227582)">DfMA</div>
|
||||
<div class="c2b-body" style="color: var(--color-teal, #227582)">Design for Manufacture and Assembly는 공장 생산, 현장조립이 가능한 설계를 의미하며, 현장 중심의 건설에서 공장 생산 방식으로 전환하는 OSC(Off Site Construction) 시스템을 위한 핵심기술</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c2b-statement">디지털전환은 <strong>사용자</strong>(발주자, 수급자, 엔지니어)가<br><strong>쉽고, 편하고, 편익</strong>이 있어야만 한다.</div>
|
||||
</div>
|
||||
<!-- 블록 끝 -->
|
||||
|
||||
</div>
|
||||
|
||||
<h2>Test 2: 다른 콘텐츠 (범용성 확인)</h2>
|
||||
<div class="slide" style="grid-template-rows: auto 1fr;">
|
||||
|
||||
<div class="block-c2b">
|
||||
<div class="c2b-badge">
|
||||
<span class="c2b-badge-text">디지털 전환 전략</span>
|
||||
</div>
|
||||
<div class="c2b-container">
|
||||
<div class="c2b-col c2b-left">
|
||||
<div class="c2b-title" style="color: var(--color-warm-brown, #5C3714)">As-Is (현재)</div>
|
||||
<div class="c2b-body" style="color: var(--color-warm-brown, #5C3714)">종이 도면 기반의 업무 프로세스
|
||||
수작업 검증과 품질 관리
|
||||
분절된 단계별 정보 전달
|
||||
개인 경험에 의존하는 의사결정</div>
|
||||
</div>
|
||||
<div class="c2b-divider"></div>
|
||||
<div class="c2b-col c2b-right">
|
||||
<div class="c2b-title" style="color: var(--color-dark-teal, #084C56)">To-Be (미래)</div>
|
||||
<div class="c2b-body" style="color: var(--color-dark-teal, #084C56)">3D 모델 기반의 통합 프로세스
|
||||
자동화된 검증과 품질 관리
|
||||
연속적인 디지털 정보 흐름
|
||||
데이터 기반의 의사결정 지원</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h2>Test 3: 짧은 콘텐츠 (최소 케이스)</h2>
|
||||
<div class="slide" style="grid-template-rows: auto 1fr;">
|
||||
|
||||
<div class="block-c2b">
|
||||
<div class="c2b-badge">
|
||||
<span class="c2b-badge-text">비교</span>
|
||||
</div>
|
||||
<div class="c2b-container">
|
||||
<div class="c2b-col c2b-left">
|
||||
<div class="c2b-title" style="color: var(--color-teal, #227582)">BIM</div>
|
||||
<div class="c2b-body" style="color: var(--color-teal, #227582)">건축정보모델링</div>
|
||||
</div>
|
||||
<div class="c2b-divider"></div>
|
||||
<div class="c2b-col c2b-right">
|
||||
<div class="c2b-title" style="color: var(--color-teal, #227582)">GIS</div>
|
||||
<div class="c2b-body" style="color: var(--color-teal, #227582)">지리정보시스템</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 블록 자체 스타일 -->
|
||||
<style>
|
||||
.block-c2b {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.c2b-badge {
|
||||
background: linear-gradient(135deg, var(--color-dark-teal, #084C56), var(--color-teal, #227582));
|
||||
border-radius: 12px 12px 0 0;
|
||||
padding: 10px 24px;
|
||||
text-align: center;
|
||||
}
|
||||
.c2b-badge-text {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.c2b-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-top: none;
|
||||
border-radius: 0 0 16px 16px;
|
||||
padding: 24px 28px;
|
||||
gap: 0;
|
||||
}
|
||||
.c2b-divider {
|
||||
width: 1px;
|
||||
background: #e2e8f0;
|
||||
margin: 0 24px;
|
||||
align-self: stretch;
|
||||
}
|
||||
.c2b-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
.c2b-title {
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
line-height: 1.3;
|
||||
word-break: keep-all;
|
||||
}
|
||||
.c2b-body {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 1.7;
|
||||
white-space: pre-line;
|
||||
word-break: keep-all;
|
||||
opacity: 0.85;
|
||||
}
|
||||
.c2b-statement {
|
||||
margin-top: 16px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
line-height: 1.6;
|
||||
word-break: keep-all;
|
||||
padding: 0 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
149
templates/blocks/cards/test-compare-detail-gradient_1.html
Normal file
149
templates/blocks/cards/test-compare-detail-gradient_1.html
Normal file
@@ -0,0 +1,149 @@
|
||||
<!DOCTYPE html><html><head><meta charset="UTF-8">
|
||||
<style>
|
||||
*{margin:0;padding:0;box-sizing:border-box;}
|
||||
body{background:#f0f0f0;padding:20px;font-family:'Pretendard Variable','Noto Sans KR',sans-serif;word-break:keep-all;}
|
||||
</style></head><body>
|
||||
<div style="width:1280px;background:#fff;padding:40px;">
|
||||
<!-- 그라디언트 상세 2열 비교: 비대칭 라운드 헤더 + 행 공유 + As-Is/To-Be -->
|
||||
<!--
|
||||
📋 compare-detail-gradient
|
||||
─────────────────
|
||||
용도: 두 카테고리의 상세 비교 (각각 N개 하위 섹션, 행 공유 정렬)
|
||||
슬롯: left_header, right_header, sections[] (각 row에 left + right)
|
||||
Figma 원본: Frame 4 (과정의 혁신 vs 결과의 혁신)
|
||||
디자인:
|
||||
- 좌측 헤더: 우측 라운드 + 텍스트 우정렬 (warm 그라디언트)
|
||||
- 우측 헤더: 좌측 라운드 + 텍스트 좌정렬 (teal 그라디언트)
|
||||
- CSS Grid 2열×N행: 좌/우 섹션 제목이 같은 Y선에 정렬
|
||||
- 첫 번째 섹션: As-Is → 화살표 → To-Be 수평 배치 가능
|
||||
수학적 계산:
|
||||
좌/우 섹션 Y좌표 — Row1: 1166/1166(정렬), Row2: 1529/1467(62px차→Grid해결), Row3: 1845/1845(정렬)
|
||||
-->
|
||||
<div class="block-cdg">
|
||||
<!-- Row 0: Headers -->
|
||||
<div class="cdg-header cdg-header-warm">
|
||||
<span class="cdg-header-text">과정 (Process)의 혁신</span>
|
||||
</div>
|
||||
<div class="cdg-header cdg-header-teal">
|
||||
<span class="cdg-header-text">결과 (Products)의 변화</span>
|
||||
</div>
|
||||
|
||||
<!-- Rows: sections (행 공유로 좌/우 Y선 자동 정렬) -->
|
||||
|
||||
<div class="cdg-cell cdg-cell-warm">
|
||||
<div class="cdg-sec-title cdg-title-warm">Analogue 기반 업무의 Digital Transformation</div>
|
||||
|
||||
<div class="cdg-asis-tobe">
|
||||
<div class="cdg-asis">
|
||||
<div class="cdg-bullet">개념·문서·행정 절차 중심</div><div class="cdg-bullet">2D 도면, 전문가, 규정</div><div class="cdg-bullet">업무 구분(단절), 책임</div>
|
||||
</div>
|
||||
<img src="/static/figma-assets/arrow_asis_tobe.png" class="cdg-arrow" alt="→">
|
||||
<div class="cdg-tobe">
|
||||
<div class="cdg-bullet">시각화된 목적물, 소통, 투명성 중심</div><div class="cdg-bullet">3D 모델, 참여자, 실체</div><div class="cdg-bullet">협업(융·복합), 창의성</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="cdg-cell cdg-cell-teal">
|
||||
<div class="cdg-sec-title cdg-title-teal">Copy & Paste로 인한 하향 평준화된 기존 성과물의 품질 향상</div>
|
||||
|
||||
<div class="cdg-sec-body">
|
||||
<div class="cdg-bullet">과거 수작업으로 시행하면서 발생하던 오류 등의 최소화</div><div class="cdg-bullet">정확한 Data에 기반한 계획으로 고품질 성과물 도출</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="cdg-cell cdg-cell-warm">
|
||||
<div class="cdg-sec-title cdg-title-warm">위치기반의 3D 모델을 사용하는 Process 혁신</div>
|
||||
|
||||
<div class="cdg-sec-body">
|
||||
<div class="cdg-bullet">지리·지형·지반 등 위치정보(GIS)와 3D모델(형상, 속성정보) 기반의 건설 정보를 포함하는 BIM의 연계를 통한 업무 프로세스의 혁신</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="cdg-cell cdg-cell-teal">
|
||||
<div class="cdg-sec-title cdg-title-teal">Analogue 기반 도서 외 Digital 기반 정보물 추가</div>
|
||||
|
||||
<div class="cdg-sec-body">
|
||||
<div class="cdg-bullet">기존 성과물(도면, 수량, 계산서, 시방서 등)에 3D 모델, Simulation 등의 Digital 기반 정보물 추가</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="cdg-cell cdg-cell-warm">
|
||||
<div class="cdg-sec-title cdg-title-warm">사용자 중심의 Solution(S/W) 제공</div>
|
||||
|
||||
<div class="cdg-sec-body">
|
||||
<div class="cdg-bullet">서로 다른 S/W로 작성되어 분절화된 Analogue 방식의 성과물과 정보물을 연계할 수 있는 설계·시공 Solution 제공</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="cdg-cell cdg-cell-teal">
|
||||
<div class="cdg-sec-title cdg-title-teal">Solution을 활용한 업무 효율화</div>
|
||||
|
||||
<div class="cdg-sec-body">
|
||||
<div class="cdg-bullet">Engn. Solution을 통해 성과물에 관한 이슈를 함께 검토·논의하는 협업 환경 조성</div><div class="cdg-bullet">건설 단계별 정보를 디지털 데이터로 축적하여, 건설 전 과정을 통합관리</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/*
|
||||
CSS Grid: 2열 × (1+N)행
|
||||
행 공유 → 좌/우 섹션 제목이 같은 Y선에 자동 정렬
|
||||
Figma Row2 차이: 좌 y=1529, 우 y=1467 (62px) → Grid가 해결
|
||||
*/
|
||||
.block-cdg {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Headers (비대칭 라운드) ── */
|
||||
.cdg-header { padding: 12px 28px; display: flex; min-height: 52px; align-items: center; }
|
||||
.cdg-header-text { font-size: 23.3px; font-weight: var(--weight-black, 900); color: #000; line-height: 1.3; }
|
||||
.cdg-header-warm {
|
||||
background: linear-gradient(90deg, rgba(165,161,150,0.15), rgba(57,50,30,0.85));
|
||||
border-radius: 0 28px 28px 0; justify-content: flex-end; text-align: right; margin-right: 4px;
|
||||
}
|
||||
.cdg-header-teal {
|
||||
background: linear-gradient(90deg, rgba(3,33,24,0.85), rgba(41,107,85,0.15));
|
||||
border-radius: 28px 0 0 28px; justify-content: flex-start; text-align: left; margin-left: 4px;
|
||||
}
|
||||
|
||||
/* ── Grid Cells (행 공유 → 좌우 Y선 정렬) ── */
|
||||
.cdg-cell {
|
||||
padding: 14px 20px;
|
||||
display: flex; flex-direction: column; gap: 6px;
|
||||
align-self: start;
|
||||
}
|
||||
.cdg-cell-warm { background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(57,50,30,0.08)); }
|
||||
.cdg-cell-teal { background: linear-gradient(180deg, rgba(41,107,85,0.06), rgba(255,255,255,0.4)); }
|
||||
|
||||
/* ── Section Title & Body ── */
|
||||
.cdg-sec-title { font-size: 16.6px; font-weight: var(--weight-black, 900); line-height: 1.4; word-break: keep-all; margin-bottom: 4px; }
|
||||
.cdg-title-warm { color: var(--color-warm-brown, #5C3714); }
|
||||
.cdg-title-teal { color: var(--color-dark-teal, #084C56); }
|
||||
.cdg-sec-body { padding-left: 8px; }
|
||||
|
||||
/* ── Bullets ── */
|
||||
.cdg-bullet {
|
||||
position: relative; padding-left: 14px;
|
||||
font-size: 13.3px; font-weight: var(--weight-bold, 700); color: #1a1a1a;
|
||||
line-height: 23.3px; word-break: keep-all;
|
||||
}
|
||||
.cdg-bullet::before { content: '•'; position: absolute; left: 0; color: #666; }
|
||||
|
||||
/* ── As-Is → To-Be 수평 레이아웃 ── */
|
||||
.cdg-asis-tobe { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
|
||||
.cdg-asis, .cdg-tobe { flex: 1; padding-left: 8px; }
|
||||
.cdg-arrow { width: 60px; height: auto; flex-shrink: 0; opacity: 0.7; }
|
||||
</style>
|
||||
</div>
|
||||
</body></html>
|
||||
162
templates/blocks/cards/test-hero-icon-cards_1.html
Normal file
162
templates/blocks/cards/test-hero-icon-cards_1.html
Normal file
@@ -0,0 +1,162 @@
|
||||
<!DOCTYPE html><html><head><meta charset="UTF-8">
|
||||
<style>
|
||||
*{margin:0;padding:0;box-sizing:border-box;}
|
||||
body{background:#f0f0f0;padding:20px;font-family:'Pretendard Variable','Noto Sans KR',sans-serif;word-break:keep-all;}
|
||||
</style></head><body>
|
||||
<div style="width:1280px;background:#fff;padding:40px;">
|
||||
<!-- 히어로 카드 변형1: 3D 리본 배지 + N열 카드 (제목+중제목+불릿 계층) -->
|
||||
<!--
|
||||
📋 hero-icon-cards_1
|
||||
─────────────────
|
||||
용도: 핵심 요건/목표를 N열 카드로 시각화. 각 카드에 제목+중제목+불릿 계층.
|
||||
슬롯: statement(선택), badge_title, cards[] (title, sections[{title, bullets[]}])
|
||||
변형 원본: hero-icon-cards
|
||||
변경점: icon/title/subtitle → sections[{title, bullets[]}] 계층으로 변경
|
||||
수학적 계산: hero-icon-cards와 동일
|
||||
badge 508x94 at y=1431, box at y=1449, frame_w=1808
|
||||
scale = 1200/1808 = 0.6637
|
||||
ribbon: 337x62px, fold_offset: 12px, ribbon_below_fold: 50px
|
||||
box padding-top: 56px
|
||||
-->
|
||||
<div class="block-hic">
|
||||
|
||||
|
||||
<div class="hic-card-area">
|
||||
|
||||
<div class="hic-ribbon">
|
||||
<img src="../../../static/figma-assets/badge_solution.png" class="hic-ribbon-img" alt="">
|
||||
<span class="hic-ribbon-text">DX 시행을 위한 필수 요건</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="hic-box">
|
||||
<div class="hic-cards">
|
||||
|
||||
<div class="hic-card">
|
||||
<div class="hic-title">기술(디지털)</div>
|
||||
|
||||
<div class="hic-sec-title">Digital 기술(S/W, H/W)과 업무 Process의 통합</div>
|
||||
|
||||
<div class="hic-bullet">기존 업무 프로세스에 다양한 디지털 기술을 접목하여 업무 수행</div>
|
||||
|
||||
<div class="hic-bullet">프로젝트 전반에 걸친 업무 프로세스의 연결 및 조율</div>
|
||||
|
||||
|
||||
<div class="hic-sec-title">분야별 전문 지식(설계, 시공, 유지관리 등) 보유</div>
|
||||
|
||||
<div class="hic-bullet">건설 전 단계에 대한 근본적인 이해와 지식 및 경험</div>
|
||||
|
||||
<div class="hic-bullet">최신 토목 기술 트랜드 및 표준 기준 등에 대한 높은 지식</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="hic-sep"></div>
|
||||
|
||||
<div class="hic-card">
|
||||
<div class="hic-title">사람(역량)</div>
|
||||
|
||||
<div class="hic-sec-title">혁신적 사고방식과 창의적 문제 해결 능력</div>
|
||||
|
||||
<div class="hic-bullet">기존 수행 방식과 관습적 사고 등에 의한 접근 방식 탈피</div>
|
||||
|
||||
<div class="hic-bullet">디지털 기술을 활용한 창의적, 혁신적인 솔루션 제시</div>
|
||||
|
||||
|
||||
<div class="hic-sec-title">사용자 중심 사고와 DX 수행 경험</div>
|
||||
|
||||
<div class="hic-bullet">사용자의 요구와 기대를 충족시키는 설계 및 구현</div>
|
||||
|
||||
<div class="hic-bullet">시행착오를 포함한 수행 경험과 사용자 경험(UX)을 반영한 해결 방안 제시</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="hic-sep"></div>
|
||||
|
||||
<div class="hic-card">
|
||||
<div class="hic-title">자연(여건)</div>
|
||||
|
||||
<div class="hic-sec-title">지속적인 투자 및 실행 의지</div>
|
||||
|
||||
<div class="hic-bullet">기술 도입 초기 단계에 필요한 인력·기간·비용 등의 대규모 투자</div>
|
||||
|
||||
<div class="hic-bullet">기술 고도화를 위한 지속적인 개선 및 투자 체계 구축</div>
|
||||
|
||||
<div class="hic-bullet">변화와 혁신을 통해 부가가치를 창출하려는 실행 의지와 추진력</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-hic {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
width: 100%; border-radius: 16px;
|
||||
padding: 36px 32px 28px; overflow: visible;
|
||||
}
|
||||
|
||||
/* ── Hero Statement ── */
|
||||
.hic-statement {
|
||||
text-align: center; font-size: 28px; font-weight: var(--weight-bold, 700);
|
||||
color: #fff; line-height: 1.6; word-break: keep-all;
|
||||
margin-bottom: 28px; padding: 0 24px;
|
||||
}
|
||||
.hic-statement strong { font-weight: 900; font-size: 1.1em; }
|
||||
.hic-statement em { color: #ef4444; font-style: normal; font-weight: 900; font-size: 1.15em; }
|
||||
|
||||
/*
|
||||
리본+박스 수학적 계산 (Figma 원본):
|
||||
badge 508x94 at y=1431, box at y=1449
|
||||
접힘선 = 18px = 이미지 높이의 19.1%
|
||||
scale(1200/1808) → ribbon 337x62, fold top에서 12px, 아래 50px
|
||||
*/
|
||||
.hic-card-area { position: relative; width: 100%; margin-top: 20px; }
|
||||
|
||||
.hic-ribbon {
|
||||
position: absolute;
|
||||
top: -12px; /* 접힘선이 박스 top border와 정확히 일치 */
|
||||
left: 50%; transform: translateX(-50%);
|
||||
z-index: 2; width: 337px; text-align: center;
|
||||
}
|
||||
.hic-ribbon-img { width: 100%; height: auto; display: block; }
|
||||
.hic-ribbon-text {
|
||||
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
||||
font-size: 20px; font-weight: 700; color: #fff;
|
||||
letter-spacing: 0.03em; white-space: nowrap;
|
||||
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* 빨간 테두리 흰 박스 */
|
||||
.hic-box {
|
||||
position: relative; background: #fff;
|
||||
border: 6px solid #9b1b1b; border-radius: 20px;
|
||||
padding: 56px 8px 8px; /* top: ribbon_below(50) + 6px 여유 */
|
||||
}
|
||||
|
||||
.hic-cards { display: flex; align-items: stretch; width: 100%; }
|
||||
.hic-card {
|
||||
flex: 1; display: flex; flex-direction: column;
|
||||
padding: 16px 12px 20px; gap: 0;
|
||||
}
|
||||
.hic-sep { width: 1px; background: #e0e0e0; align-self: stretch; margin: 8px 0; }
|
||||
|
||||
/* ── 카드 내부 (변형: icon → 소제목+불릿 계층) ── */
|
||||
/* 중제목 (카드 헤더: 기술/사람/자연): 중앙 정렬 */
|
||||
.hic-title { font-size: 20px; font-weight: var(--weight-black, 900); color: #1a1a1a; line-height: 1.3; text-align: center; margin-bottom: 12px; }
|
||||
/* 소제목 (D1): 16.6px/900, 들여쓰기 1단 = 16px */
|
||||
.hic-sec-title { font-size: 16.6px; font-weight: 900; color: #1a1a1a; line-height: 1.4; margin-top: 8px; margin-bottom: 3px; padding-left: 16px; }
|
||||
.hic-sec-title:first-of-type { margin-top: 0; }
|
||||
/* 불릿 (D2): 13.3px/700, 들여쓰기 2단 = 36px, lineH=23.3px */
|
||||
.hic-bullet {
|
||||
position: relative; padding-left: 36px;
|
||||
font-size: 13.3px; font-weight: 700; color: #334155;
|
||||
line-height: 23.3px; word-break: keep-all;
|
||||
}
|
||||
.hic-bullet::before { content: '•'; position: absolute; left: 24px; color: #666; }
|
||||
</style>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
templates/blocks/cards/test-hero-icon-cards_1.png
Normal file
BIN
templates/blocks/cards/test-hero-icon-cards_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
Reference in New Issue
Block a user