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