# 밍글 스튜디오 웹사이트

밍글 스튜디오의 공식 웹사이트입니다. 창의적인 디자인 솔루션을 제공하는 디자인 스튜디오의 포트폴리오와 서비스를 소개합니다.

## 🚀 특징

- **반응형 디자인**: 모든 디바이스에서 최적화된 경험
- **모던한 UI/UX**: 세련된 디자인과 부드러운 애니메이션
- **인터랙티브 요소**: 호버 효과, 스크롤 애니메이션, 폼 검증
- **빠른 로딩**: 최적화된 코드로 빠른 페이지 로딩
- **접근성**: 모든 사용자를 위한 접근성 고려

## 📁 프로젝트 구조

```
mingle-website/
├── index.html          # 메인 HTML 파일
├── styles.css          # CSS 스타일시트
├── script.js           # JavaScript 기능
└── README.md           # 프로젝트 설명서
```

## 🎨 주요 섹션

### 1. 히어로 섹션
- 강력한 첫인상을 주는 그라데이션 배경
- 명확한 브랜드 메시지
- 행동 유도 버튼

### 2. 소개 섹션
- 회사 철학과 강점 소개
- 통계 데이터 시각화
- 애니메이션 효과

### 3. 서비스 섹션
- 4가지 주요 서비스 카드
- 아이콘과 설명
- 호버 효과

### 4. 포트폴리오 섹션
- 프로젝트 갤러리
- 이미지 호버 오버레이
- 카테고리별 분류

### 5. 연락처 섹션
- 연락처 정보
- 문의 폼
- 유효성 검사

## 🛠️ 기술 스택

- **HTML5**: 시맨틱 마크업
- **CSS3**: Flexbox, Grid, 애니메이션
- **JavaScript**: ES6+, DOM 조작, 이벤트 처리
- **Font Awesome**: 아이콘
- **Google Fonts**: Noto Sans KR

## 🚀 시작하기

1. 프로젝트 클론 또는 다운로드
2. `index.html` 파일을 웹 브라우저에서 열기
3. 로컬 서버에서 실행 (권장)

### 로컬 서버 실행

Python을 사용한 경우:
```bash
python -m http.server 8000
```

Node.js를 사용한 경우:
```bash
npx serve .
```

## 📱 반응형 디자인

- **데스크톱**: 1200px 이상
- **태블릿**: 768px - 1199px
- **모바일**: 767px 이하

## 🎯 주요 기능

### 네비게이션
- 고정 헤더
- 스크롤 시 배경 변화
- 모바일 햄버거 메뉴

### 애니메이션
- 스크롤 시 요소 페이드인
- 숫자 카운팅 애니메이션
- 호버 효과

### 폼 처리
- 실시간 유효성 검사
- 성공/오류 알림
- 이메일 형식 검증

## 🔧 커스터마이징

### 색상 변경
`styles.css`에서 CSS 변수를 수정하여 색상을 변경할 수 있습니다:

```css
:root {
    --primary-color: #6366f1;
    --secondary-color: #8b5cf6;
    --accent-color: #10b981;
}
```

### 콘텐츠 수정
`index.html`에서 텍스트와 이미지를 수정하여 콘텐츠를 변경할 수 있습니다.

## 📞 연락처

프로젝트에 대한 문의사항이 있으시면 연락주세요:

- **비지니스 문의**: minglestudio@minglestudio.co.kr
- **예약 문의**: help@minglestudio.co.kr
- **전화**: 010-1234-5678
- **주소**: 서울특별시 강남구 테헤란로 123

## 📄 라이선스

이 프로젝트는 MIT 라이선스 하에 배포됩니다.

---

© 2024 밍글 스튜디오. All rights reserved.