밍글 스튜디오 웹사이트

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

🚀 특징

• 반응형 디자인: 모든 디바이스에서 최적화된 경험
• 모던한 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을 사용한 경우:

python -m http.server 8000

Node.js를 사용한 경우:

npx serve .

📱 반응형 디자인

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

🎯 주요 기능

네비게이션

• 고정 헤더
• 스크롤 시 배경 변화
• 모바일 햄버거 메뉴

애니메이션

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

폼 처리

• 실시간 유효성 검사
• 성공/오류 알림
• 이메일 형식 검증

🔧 커스터마이징

색상 변경

styles.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.