프리미엄 골프 파크를 위한 현대적이고 반응형 웹사이트

Impact Park Golf는 최고의 시설과 서비스를 제공하는 골프 파크의 공식 웹사이트입니다. 이 웹사이트는 방문객들에게 시설 정보, 코스 안내, 예약 시스템 및 연락처 정보를 제공합니다.

• 반응형 디자인: 데스크톱, 태블릿, 모바일 모든 기기에서 최적화된 화면 제공
• 원페이지 레이아웃: 스크롤 기반의 직관적인 네비게이션
• 인터랙티브 UI: 부드러운 애니메이션과 전환 효과
• 예약 시스템: 온라인 예약 폼 제공
• 모바일 메뉴: 햄버거 메뉴를 통한 모바일 네비게이션

웹사이트는 다음과 같은 섹션으로 구성되어 있습니다:

1. 홈 (Hero Section)

   • 임팩트 있는 메인 비주얼
   • 주요 액션 버튼 (예약하기, 더 알아보기)

2. 소개 (About)

   • 시설 특징 4가지
   • 아이콘과 설명으로 구성

3. 시설 안내 (Facilities)

   • 실내 연습장
   • 야외 드라이빙 레인지
   • 퍼팅 그린
   • 프로샵 & 라운지

4. 코스 안내 (Courses)

   • 베이직 코스 (입문자용)
   • 스탠다드 코스 (인기)
   • 프로페셔널 코스 (전문가용)

5. 예약 (Reservation)

   • 온라인 예약 폼
   • 전화 예약 정보
   • 운영 시간 및 요금 안내

6. 오시는 길 (Contact)

   • 주소 및 연락처
   • 대중교통 안내
   • 주차 정보

new_theme/
├── index.html      # 메인 HTML 파일
├── styles.css      # 스타일시트
├── script.js       # JavaScript 파일
└── README.md       # 프로젝트 문서

1. 저장소 클론

   git clone https://github.com/w-websoft/new_theme.git
   cd new_theme

2. 웹 서버 실행 (여러 방법 중 선택)

   Python 3 사용:

   python3 -m http.server 8080

   Python 2 사용:

   python -m SimpleHTTPServer 8080

   Node.js (http-server) 사용:

   npx http-server -p 8080

   VS Code Live Server 사용:

   • VS Code에서 프로젝트 열기
   • index.html 우클릭 후 "Open with Live Server" 선택

3. 브라우저에서 열기

   http://localhost:8080
   

• HTML5: 시맨틱 마크업
• CSS3:
  • Flexbox & Grid 레이아웃
  • CSS 변수
  • 애니메이션 & 트랜지션
  • 미디어 쿼리 (반응형)
• JavaScript (Vanilla):
  • DOM 조작
  • 이벤트 핸들링
  • Intersection Observer API
  • 스무스 스크롤

• 모바일: < 480px
• 태블릿: 481px - 768px
• 데스크톱: > 769px

• Primary Color: #2c5f2d (다크 그린)
• Secondary Color: #97c93d (라이트 그린)
• Dark Color: #1a1a1a
• Light Color: #f8f9fa
• Text Color: #333
• Gray Color: #6c757d

• Font Family: 'Noto Sans KR', sans-serif
• Google Fonts 사용

styles.css 파일의 :root 섹션에서 CSS 변수를 수정하세요:

:root {
    --primary-color: #2c5f2d;
    --secondary-color: #97c93d;
    /* 기타 변수들... */
}

index.html 파일에서 텍스트와 정보를 직접 수정할 수 있습니다.

현재는 그라디언트 플레이스홀더를 사용하고 있습니다. 실제 이미지를 추가하려면:

1. assets/images/ 폴더 생성
2. 이미지 파일 추가
3. HTML의 .facility-placeholder 섹션을 <img> 태그로 교체

• 실제 이미지 추가
• 백엔드 API 연동 (예약 시스템)
• Google Maps 통합
• 다국어 지원 (영어/한국어)
• SEO 최적화
• 소셜 미디어 통합
• 갤러리 섹션 추가
• 후기/리뷰 섹션 추가

• Chrome (최신 2 버전)
• Firefox (최신 2 버전)
• Safari (최신 2 버전)
• Edge (최신 2 버전)

© 2024 Impact Park Golf. All rights reserved.

기여는 언제나 환영합니다! 개선사항이나 버그 수정은 Pull Request를 통해 제출해 주세요.

• 웹사이트: http://localhost:8080
• 이메일: info@impactparkgolf.co.kr
• 전화: 02-1234-5678

Made with ❤️ for Impact Park Golf