밍글 스튜디오 웹사이트
밍글 스튜디오의 공식 웹사이트입니다. 창의적인 디자인 솔루션을 제공하는 디자인 스튜디오의 포트폴리오와 서비스를 소개합니다.
🚀 특징
- 반응형 디자인: 모든 디바이스에서 최적화된 경험
- 모던한 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
🚀 시작하기
- 프로젝트 클론 또는 다운로드
index.html파일을 웹 브라우저에서 열기- 로컬 서버에서 실행 (권장)
로컬 서버 실행
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에서 텍스트와 이미지를 수정하여 콘텐츠를 변경할 수 있습니다.
📞 연락처
프로젝트에 대한 문의사항이 있으시면 연락주세요:
- 이메일: hello@minglestudio.com
- 전화: 010-1234-5678
- 주소: 서울특별시 강남구 테헤란로 123
📄 라이선스
이 프로젝트는 MIT 라이선스 하에 배포됩니다.
© 2024 밍글 스튜디오. All rights reserved.