d86b5851d0
- .agent/, .claude/, .vscode/ 설정 파일 - design/ 디자인 리소스 - reports/, research/ 분석 문서 - testcase/ 테스트 케이스 문서 - db_sync_chandj.bat, sam.code-workspace Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
95 lines
5.1 KiB
HTML
95 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
width: 720pt;
|
|
height: 405pt;
|
|
font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
|
|
background: #f5f5f0;
|
|
padding: 32pt 48pt;
|
|
}
|
|
p, h1, h2, h3 { margin: 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 헤더 -->
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24pt;">
|
|
<div style="display: flex; align-items: center; gap: 8pt;">
|
|
<div style="width: 18pt; height: 18pt; background: #95C11F; border-radius: 3pt; display: flex; align-items: center; justify-content: center;">
|
|
<p style="color: #fff; font-size: 10pt; font-weight: bold;">S</p>
|
|
</div>
|
|
<p style="font-size: 11pt; font-weight: 600; color: #1a1a1a;">SAM_ERP</p>
|
|
</div>
|
|
<h1 style="font-size: 24pt; font-weight: 600; color: #1a1a1a;">Responsive Web</h1>
|
|
</div>
|
|
|
|
<!-- 메인 컨텐츠 -->
|
|
<div style="display: flex; gap: 32pt;">
|
|
<!-- 브레이크포인트 설명 -->
|
|
<div style="width: 180pt;">
|
|
<h3 style="font-size: 12pt; font-weight: 600; color: #1a1a1a; margin-bottom: 12pt;">브레이크 포인트</h3>
|
|
<div style="padding-left: 8pt;">
|
|
<p style="font-size: 9pt; color: #666; margin-bottom: 6pt;">모바일: < 640px (기본)</p>
|
|
<p style="font-size: 9pt; color: #666; margin-bottom: 6pt;">태블릿: 768px ~ 1023px (md)</p>
|
|
<p style="font-size: 9pt; color: #666; margin-bottom: 6pt;">데스크탑: 1024px+ (lg)</p>
|
|
<p style="font-size: 9pt; color: #666;">대형 모니터: 1280px+ (xl)</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 목업 비교 -->
|
|
<div style="flex: 1; display: flex; align-items: center; justify-content: center; gap: 24pt;">
|
|
<!-- PC 목업 -->
|
|
<div style="display: flex; flex-direction: column; align-items: center;">
|
|
<p style="font-size: 11pt; font-weight: 600; color: #1a1a1a; margin-bottom: 10pt;">PC Web</p>
|
|
<div style="width: 200pt; height: 150pt; border: 2pt solid #1a1a1a; background: #ffffff; display: flex; flex-direction: column;">
|
|
<div style="height: 15pt; background: #1a1a1a;"></div>
|
|
<div style="flex: 1; display: flex; padding: 8pt; gap: 8pt;">
|
|
<div style="flex: 1; background: #d0e8f2; display: flex; align-items: center; justify-content: center;">
|
|
<p style="font-size: 14pt; color: #333;">1</p>
|
|
</div>
|
|
<div style="flex: 1; background: #d0e8f2; display: flex; align-items: center; justify-content: center;">
|
|
<p style="font-size: 14pt; color: #333;">2</p>
|
|
</div>
|
|
</div>
|
|
<div style="padding: 5pt; text-align: center;">
|
|
<p style="font-size: 8pt; color: #666;">Contents</p>
|
|
</div>
|
|
<div style="height: 15pt; background: #1a1a1a; display: flex; align-items: center; justify-content: center;">
|
|
<p style="font-size: 7pt; color: #ffffff;">Footer</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 화살표 -->
|
|
<p style="font-size: 24pt; color: #95C11F;">↔</p>
|
|
|
|
<!-- Mobile 목업 -->
|
|
<div style="display: flex; flex-direction: column; align-items: center;">
|
|
<p style="font-size: 11pt; font-weight: 600; color: #1a1a1a; margin-bottom: 10pt;">Mobile Web</p>
|
|
<div style="width: 80pt; height: 150pt; border: 2pt solid #1a1a1a; background: #ffffff; display: flex; flex-direction: column;">
|
|
<div style="height: 15pt; background: #1a1a1a;"></div>
|
|
<div style="flex: 1; display: flex; flex-direction: column; padding: 6pt; gap: 6pt;">
|
|
<div style="flex: 1; background: #d0e8f2; display: flex; align-items: center; justify-content: center;">
|
|
<p style="font-size: 12pt; color: #333;">1</p>
|
|
</div>
|
|
<div style="flex: 1; background: #d0e8f2; display: flex; align-items: center; justify-content: center;">
|
|
<p style="font-size: 12pt; color: #333;">2</p>
|
|
</div>
|
|
</div>
|
|
<div style="padding: 3pt; text-align: center;">
|
|
<p style="font-size: 6pt; color: #666;">Contents</p>
|
|
</div>
|
|
<div style="height: 15pt; background: #1a1a1a; display: flex; align-items: center; justify-content: center;">
|
|
<p style="font-size: 6pt; color: #ffffff;">Footer</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|