프로젝트 스타일 가이드

📁 폴더 구조

project/

├── css/

│ └── style.css

├── pages/

│ ├── page1.html (팀원1)

│ ├── page2.html (팀원2)

│ └── ...

└── startpage.html (메인)

🎨 색상 사용법

• 별 파랑: class="color-star-blue" 또는 var(--star-blue)
• 클로버 초록: class="color-clover-green" 또는 var(--clover-green)
• 반짝이 핑크: class="color-sparkle-pink" 또는 var(--sparkle-pink)
• 경고 색상: class="color-warning" 또는 var(--warning)
• 파랑 글씨: class="color-blue-text" 또는 var(--blue-text)

📝 폰트 크기

• SuperLarge (130px): class="text-super-large"
• VeryLarge (50px): class="text-very-large"
• Large (45px): class="text-large"
• Medium (35px): class="text-medium"
• Small (25px): class="text-small"
• VerySmall (20px): class="text-very-small"
• Tiny (15px): class="text-tiny"
• SuperTiny (12px): class="text-super-tiny"

🔧 컴포넌트 사용법

입력창

<input type="text" class="input-basic" placeholder="입력하세요">

버튼 (소다소다 그라데이션 호버)

<button class="btn-gradient soda">버튼</button>

버튼 (몽글몽글 그라데이션 호버)

<button class="btn-gradient cloud">버튼</button>

텍스트 그림자

<p class="text-shadow">그림자가 있는 텍스트</p>

🎯 배경 효과

모든 페이지에 다음 코드를 body 바로 아래 추가:

<div class="background-decorations">
    <div class="bg-star"></div>
    <div class="bg-clover"></div>
    <div class="bg-sparkle"></div>
</div>

📐 화면 크기

• 기본 크기: 1280 X 832