Figma-to-HTML 에이전트 초기 커밋
- 10단계 변환 프로세스 (PROCESS.md) - 수학 공식 레퍼런스 (MATH.md, gradient_math.py) - CSS 보정 규칙 R1~R16 (RULES.md) - 작업 규율 7개 규칙 (PROCESS-CONTROL.md) - 8개 Figma 프레임 1:1 HTML 변환물 (block-tests/) - 8개 Jinja2 템플릿 staging (templates_staging/) - 변환 완료 도서관 + 디자인 인사이트 (blocks_index.md) - 사용법 가이드 (README.md) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
265
block-tests/prerequisites-3col.html
Normal file
265
block-tests/prerequisites-3col.html
Normal file
@@ -0,0 +1,265 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1280">
|
||||
<title>필수조건 3열 비교 블록 (LEGACY)</title>
|
||||
<!--
|
||||
⚠️ ⚠️ ⚠️ LEGACY — 구 방법론 변환물. 레퍼런스로 사용 금지. ⚠️ ⚠️ ⚠️
|
||||
|
||||
이 파일은 R8/R9 도입 이전의 변환 방식을 사용합니다:
|
||||
- 모든 px 값을 수동으로 0.60290 곱셈 (R8 신규 권장 위반: transform: scale() 미사용)
|
||||
- 색상바를 div + linear-gradient 단일 사용, 본격적인 Pure CSS div 패턴 미적용 (R9 미적용)
|
||||
- frame_1171281190_flat.md 도 신규 변환의 STEP 5 형식과 다름
|
||||
|
||||
동일 패턴 (3-column-comparison) 이 다시 등장하면:
|
||||
1. 이 파일을 베끼지 말 것
|
||||
2. PROCESS.md 의 신규 10단계로 처음부터 변환
|
||||
3. blocks_index.md 의 "변환 완료 (현행 방법론)" 섹션에 등록
|
||||
4. 이 파일은 archive 또는 그대로 두되 절대 참조 금지
|
||||
|
||||
============================================================
|
||||
Figma → HTML 수학적 변환 (bottom-up) — LEGACY METHODOLOGY
|
||||
============================================================
|
||||
원본 Frame: 2123.13 × 724 px (node 45:15, Frame 1171281190)
|
||||
타겟 슬라이드: 1280 × 720 px (16:9)
|
||||
Scale factor S = 1280 / 2123.13 = 0.60290
|
||||
|
||||
모든 CSS 값 = Figma 원본 값 × 0.60290 (legacy 방식)
|
||||
플래튼 목록: frame_1171281190_flat.md 참조
|
||||
============================================================
|
||||
-->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* S = 0.60290 */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
}
|
||||
|
||||
/* 슬라이드 (16:9, 흰색 배경) */
|
||||
.slide {
|
||||
width: 1280px;
|
||||
height: 720px;
|
||||
background: #ffffff;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
/* 블록: 2123.13×724 → 1280×437 */
|
||||
.block {
|
||||
width: 1280px;
|
||||
height: 437px;
|
||||
background: #ffffff; /* 미리보기용 흰색. 원본: #000000 */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── 아이콘: abs(0,13) → (0,8), 50×61 → 30×37 ── */
|
||||
.icon {
|
||||
position: absolute;
|
||||
left: 0; top: 8px;
|
||||
width: 30px; height: 37px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.icon img { height: 30px; width: auto; object-fit: contain; }
|
||||
|
||||
/* ── 타이틀 "필수조건": abs(75,0), font 70→42.2px ── */
|
||||
.title {
|
||||
position: absolute;
|
||||
left: 45px; top: 0;
|
||||
font-weight: 700;
|
||||
font-size: 42.2px;
|
||||
line-height: 1.448;
|
||||
background: linear-gradient(180deg, #000 0%, #883700 100%);
|
||||
-webkit-background-clip: text; background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
filter: drop-shadow(0px 0px 2.4px rgba(50,44,30,1));
|
||||
}
|
||||
|
||||
/* ── 열 공통: top 129→78, H 595→359 ── */
|
||||
.col { position: absolute; top: 78px; height: 359px; }
|
||||
.col--tech { left: 0; width: 416px; }
|
||||
.col--people { left: 431px; width: 416px; }
|
||||
.col--nature { left: 862px; width: 418px; }
|
||||
|
||||
/* ── 색상바: (0,0) 152.5×595 → 92×359 ── */
|
||||
.bar { position: absolute; left: 0; top: 0; width: 92px; height: 359px; }
|
||||
.col--tech .bar { background: linear-gradient(180deg, #0D78D0 0%, #023056 100%); }
|
||||
.col--people .bar { background: linear-gradient(180deg, #FF9A23 0%, #CC5200 100%); }
|
||||
.col--nature .bar { background: linear-gradient(180deg, #39BE49 21%, #23742C 100%); }
|
||||
|
||||
/* ── 한자: 바 오른쪽 절반 중앙, font 50→30px ── */
|
||||
.kanji {
|
||||
position: absolute;
|
||||
left: 55px; width: 26px; height: 131px;
|
||||
font-weight: 700; font-size: 30px; line-height: 4.2;
|
||||
text-align: center; color: #FFF; z-index: 2;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.kanji--top { top: 22px; }
|
||||
.kanji--bottom { top: 205px; }
|
||||
|
||||
/* ── 제목 (그라데이션): left 171.89→104, font 45→27.1px ── */
|
||||
.heading {
|
||||
position: absolute; left: 104px;
|
||||
font-weight: 700; font-size: 27.1px; line-height: 1;
|
||||
padding-bottom: 7px;
|
||||
/* Figma lh=1em 유지. Noto Sans KR descender=288/1000 → half-leading=-6.07px
|
||||
→ padding-bottom:7px로 descender(g,y,p,쉼표) 잘림 방지 */
|
||||
-webkit-background-clip: text; background-clip: text;
|
||||
-webkit-text-fill-color: transparent; z-index: 2;
|
||||
}
|
||||
.heading--top { top: 18px; }
|
||||
.heading--bottom { top: 194px; }
|
||||
|
||||
.col--tech .heading--top { background: linear-gradient(180deg, #0D78D0 0%, #134D7F 100%); -webkit-background-clip: text; background-clip: text; }
|
||||
.col--tech .heading--bottom { background: linear-gradient(180deg, #0D78D0 0%, #023056 100%); -webkit-background-clip: text; background-clip: text; }
|
||||
.col--people .heading--top { background: linear-gradient(180deg, #FE900C 0%, #D18B37 100%); -webkit-background-clip: text; background-clip: text; }
|
||||
.col--people .heading--bottom{ background: linear-gradient(180deg, #F58806 0%, #CE7914 100%); -webkit-background-clip: text; background-clip: text; }
|
||||
.col--nature .heading--top { background: linear-gradient(180deg, #3CA649 21%, #23742C 100%); -webkit-background-clip: text; background-clip: text; }
|
||||
.col--nature .heading--bottom{ background: linear-gradient(180deg, #3CA649 0%, #23742C 100%); -webkit-background-clip: text; background-clip: text; }
|
||||
|
||||
/* ── 설명: font 35→21.1px, #3E3523 ── */
|
||||
.desc {
|
||||
position: absolute; left: 104px;
|
||||
font-weight: 500; font-size: 21.1px; line-height: 1.286;
|
||||
color: #3E3523; z-index: 2;
|
||||
}
|
||||
.desc--top { top: 95px; }
|
||||
.desc--bottom { top: 266px; }
|
||||
|
||||
/* ── 테두리선 ── */
|
||||
.line-top-h { position: absolute; left: 0; top: 0; right: 0; border-top: 1.2px solid #000; }
|
||||
.line-bot-h { position: absolute; left: 0; bottom: 0; right: 0; border-top: 1.2px solid #000; }
|
||||
.line-mid-h { position: absolute; left: 92px; right: 0; top: 180px; border-top: 1.2px dashed #000; }
|
||||
|
||||
.line-mid-short { position: absolute; left: 46px; width: 46px; top: 180px; }
|
||||
.col--tech .line-mid-short { border-top: 1.2px dashed #84D1F4; }
|
||||
.col--people .line-mid-short { border-top: 1.2px dashed #FFF; }
|
||||
.col--nature .line-mid-short { border-top: 1.2px dashed #FFF; }
|
||||
|
||||
.line-vert { position: absolute; left: 46px; top: 1px; height: 358px; }
|
||||
.col--tech .line-vert { border-left: 1.2px dashed #84D1F4; }
|
||||
.col--people .line-vert { border-left: 1.2px dashed #FFF; }
|
||||
.col--nature .line-vert { border-left: 1.2px dashed #FFF; }
|
||||
|
||||
/* ── 세로 라벨: 좁은 박스 + <br> 줄바꿈, 바 왼쪽 절반(0~46px) 중앙 ── */
|
||||
.vlabel {
|
||||
position: absolute;
|
||||
font-weight: 700; color: #FFF; z-index: 3;
|
||||
text-align: center; line-height: 1.2;
|
||||
}
|
||||
|
||||
/* 괄호: Figma bbox 60×19 (정상 ~18×50) → 90° 회전 확인됨.
|
||||
br1 = 여는 괄호 (name과 sub 사이), rotate(90deg)
|
||||
br2 = 닫는 괄호 (sub 아래), rotate(-90deg) */
|
||||
.vlabel--br1,
|
||||
.vlabel--br2 {
|
||||
font-size: 18px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.vlabel--br1 { transform: rotate(90deg); }
|
||||
.vlabel--br2 { transform: rotate(-90deg); }
|
||||
|
||||
/* 열1 기술(디지털) */
|
||||
.col--tech .vlabel--name { left: 0; width: 46px; top: 73px; font-size: 30px; }
|
||||
.col--tech .vlabel--sub { left: 0; width: 46px; top: 162px; font-size: 30px; }
|
||||
.col--tech .vlabel--br1 { left: 0; width: 46px; top: 151px; }
|
||||
.col--tech .vlabel--br2 { left: 0; width: 46px; top: 274px; }
|
||||
|
||||
/* 열2 사람(역량) */
|
||||
.col--people .vlabel--name { left: 0; width: 46px; top: 100px; font-size: 30px; }
|
||||
.col--people .vlabel--sub { left: 0; width: 46px; top: 189px; font-size: 30px; }
|
||||
.col--people .vlabel--br1 { left: 0; width: 46px; top: 177px; }
|
||||
.col--people .vlabel--br2 { left: 0; width: 46px; top: 265px; }
|
||||
|
||||
/* 열3 자연(여건) */
|
||||
.col--nature .vlabel--name { left: 0; width: 46px; top: 100px; font-size: 30px; }
|
||||
.col--nature .vlabel--sub { left: 0; width: 46px; top: 189px; font-size: 30px; }
|
||||
.col--nature .vlabel--br1 { left: 0; width: 46px; top: 177px; }
|
||||
.col--nature .vlabel--br2 { left: 0; width: 46px; top: 265px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="slide">
|
||||
<div class="block">
|
||||
|
||||
<!-- 타이틀 "필수조건" + 아이콘: 삭제 (블록 외부에서 처리) -->
|
||||
|
||||
<!-- 열1: 기술 (파랑) -->
|
||||
<div class="col col--tech">
|
||||
<div class="bar"></div>
|
||||
<div class="line-top-h"></div>
|
||||
<div class="line-bot-h"></div>
|
||||
<div class="line-mid-h"></div>
|
||||
<div class="line-mid-short"></div>
|
||||
<div class="line-vert"></div>
|
||||
<span class="kanji kanji--top">技</span>
|
||||
<span class="kanji kanji--bottom">術</span>
|
||||
<span class="vlabel vlabel--name">기<br>술</span>
|
||||
<span class="vlabel vlabel--sub">디<br>지<br>털</span>
|
||||
<span class="vlabel vlabel--br1">(</span>
|
||||
<span class="vlabel vlabel--br2">(</span>
|
||||
<div class="heading heading--top">깊은 기반<br>(건설산업, 토목) 지식</div>
|
||||
<div class="desc desc--top">건설단계별 근본적인 이해와<br>경험이 기반된 높은 전문지식 보유</div>
|
||||
<div class="heading heading--bottom">높은 S/W 기술<br>(Digital Technology)</div>
|
||||
<div class="desc desc--bottom">다양한 기술적도구(S/W,H/W)와<br>Process의 효과적인 통합</div>
|
||||
</div>
|
||||
|
||||
<!-- 열2: 사람 (주황) -->
|
||||
<div class="col col--people">
|
||||
<div class="bar"></div>
|
||||
<div class="line-top-h"></div>
|
||||
<div class="line-bot-h"></div>
|
||||
<div class="line-mid-h"></div>
|
||||
<div class="line-mid-short"></div>
|
||||
<div class="line-vert"></div>
|
||||
<span class="kanji kanji--top">人</span>
|
||||
<span class="kanji kanji--bottom">材</span>
|
||||
<span class="vlabel vlabel--name">사<br>람</span>
|
||||
<span class="vlabel vlabel--sub">역<br>량</span>
|
||||
<span class="vlabel vlabel--br1">(</span>
|
||||
<span class="vlabel vlabel--br2">(</span>
|
||||
<div class="heading heading--top">분야별 전문지식<br>역량을 갖춘 기술자</div>
|
||||
<div class="desc desc--top">엔지니어의 Know-how와<br>디지털지식이 융합된 지식의 축적</div>
|
||||
<div class="heading heading--bottom">디지털화 역량 및<br>개발경험 많은 개발자</div>
|
||||
<div class="desc desc--bottom">다양한 형태의 Solution S/W<br>개발 역량 Programmer</div>
|
||||
</div>
|
||||
|
||||
<!-- 열3: 자연 (초록) -->
|
||||
<div class="col col--nature">
|
||||
<div class="bar"></div>
|
||||
<div class="line-top-h"></div>
|
||||
<div class="line-bot-h"></div>
|
||||
<div class="line-mid-h"></div>
|
||||
<div class="line-mid-short"></div>
|
||||
<div class="line-vert"></div>
|
||||
<span class="kanji kanji--top">天</span>
|
||||
<span class="kanji kanji--bottom">地</span>
|
||||
<span class="vlabel vlabel--name">자<br>연</span>
|
||||
<span class="vlabel vlabel--sub">여<br>건</span>
|
||||
<span class="vlabel vlabel--br1">(</span>
|
||||
<span class="vlabel vlabel--br2">(</span>
|
||||
<div class="heading heading--top">받아들일 수 있는<br>사회·기업·제도 등의 여건</div>
|
||||
<div class="desc desc--top">목표설정형 지침에서 탈피하여<br>수행사례, 효과검증을 통해 시행</div>
|
||||
<div class="heading heading--bottom">지속적·장기적 투자를<br>수행할 능력과 의지</div>
|
||||
<div class="desc desc--bottom">기술 개발을 위한 대규모 투자 및<br>Process 혁신을 위한 지속적인 투자</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user