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>
162 lines
6.4 KiB
HTML
162 lines
6.4 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;">
|
|
<!-- 히어로 카드 변형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> |