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>
149 lines
6.5 KiB
HTML
149 lines
6.5 KiB
HTML
<!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> |