데브허브 | DEVHUB | Google Calendar Clone Tutorial – PHP, MySQL, JavaScript, HTML, and CSSGoogle Calendar Clone Tutorial – PHP, MySQL, JavaScript, HTML, and CSS
- PHP, MySQL, JavaScript, HTML, CSS만을 사용하여 프레임워크 없이 구글 캘린더 클론을 처음부터 구축하는 튜토리얼입니다. 🛠️
- 외부 라이브러리 없이 깨끗하고 이해하기 쉬운 코드로 다중일 이벤트 추가, 편집, 삭제 기능을 구현합니다. 💡
- 직관적이고 모바일 친화적인 인터페이스, 동적 이벤트 처리, 반응형 레이아웃, 데이터베이스 통합이 핵심 기능입니다. 📅
- 백엔드는 PHP, 데이터 저장은 MySQL, 클라이언트 로직은 JavaScript, UI 구조는 HTML5, 스타일링은 CSS3를 활용합니다. 💻
- 라이브 시계, 월/년도 탐색, 현재 날짜 하이라이트, 'Inter' Google 폰트 적용 등 사용자 경험을 고려한 디자인 요소를 포함합니다. ⏰
- 이벤트 제목, 강사, 시작/종료 날짜 및 시간 등 상세 정보 입력 및 수정이 가능하며, 여러 이벤트 중 선택하여 편집할 수 있습니다. 📝
- 모든 이벤트 정보는 MySQL 데이터베이스에 영구적으로 저장 및 관리됩니다. 💾
- 이벤트 유무에 따라 '추가' 또는 '추가/편집' 버튼이 표시되는 등 상황에 따른 UI 변화를 구현합니다. ➕➖
- 프로젝트 실행을 위해 XAMPP 서버(Apache, MySQL) 설치 및 설정,
htdocs 폴더 내 프로젝트 생성, Visual Studio Code를 활용한 개발 환경 구축 방법을 안내합니다. ⚙️
- HTML5 문서 타입 선언, 반응형 뷰포트 설정, CSS 파일 연결, 헤더, 라이브 시계, 캘린더 섹션 및 월 탐색 버튼 등 초기 HTML 구조를 상세히 설명합니다. 🏗️