Claude 마스터 가이드 12편에서는 초보자도 그대로 따라 할 수 있는 풀스택 웹사이트 구축 및 Cloudflare Edge 배포 실전 프로젝트를 단계별 소스 코드와 함께 제공합니다.
1. HTML5 & Vanilla CSS 웹사이트 풀 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>StudyFlow - AI 스마트 학습 플랫폼</title>
<style>
:root { --primary: #ff6b35; --bg: #0a0908; --text: #f0f0f0; }
body { background: var(--bg); color: var(--text); font-family: sans-serif; padding: 2rem; }
.hero { text-align: center; margin-top: 4rem; }
.hero h1 { color: var(--primary); font-size: 2.5rem; }
.btn { background: var(--primary); color: #fff; padding: 0.8rem 1.5rem; border-radius: 8px; text-decoration: none; display: inline-block; margin-top: 1rem; }
</style>
</head>
<body>
<div class="hero">
<h1>StudyFlow AI 학습 시스템</h1>
<p>질문창에서 작업장으로, AI와 함께하는 스마트 학습 아키텍처</p>
<a href="#" class="btn">지금 시작하기</a>
</div>
</body>
</html>
2. Cloudflare Edge 배포 3단계
# 1. 빌드 및 렌더링 검증
npm run dev
# 2. Cloudflare Edge 배포 구동
npx wrangler deploy