- 대상: 기본적인 프로그래밍 지식을 가진 1학년 대학생
- 목표: HTML, CSS, JavaScript를 사용하여 정적 및 동적 웹 페이지 제작
- 기간: 15주 과정
- 인터랙티브 메인 페이지: D3.js, Three.js, GSAP을 활용한 화려한 애니메이션
- 파티클 애니메이션: 150개의 움직이는 파티클과 연결선 효과
- 실시간 차트: 학습 진도율과 기술 스택 분포 시각화
- 카운터 애니메이션: 수강생, 프로젝트, 수업시간 통계
- 반응형 디자인: 모든 디바이스에서 최적화된 경험
- HTML 구조와 문법
- 기본 태그들 학습
- 폼과 테이블
- 시맨틱 HTML
- 선택자와 속성
- 박스 모델
- Flexbox와 Grid
- 반응형 디자인
- 애니메이션과 트랜지션
- 고급 선택자
- 변수와 함수
- DOM 조작
- 이벤트 처리
- 폼 검증
- 프로젝트 제안서 작성
- HTML/CSS 프로토타입 제출
- 비동기 프로그래밍
- API 사용
- ES6+ 문법
- 모던 JavaScript
- Fetch API
- 로컬 스토리지
- 프로젝트 준비
- 기술 적용
- 개별 프로젝트 구현
- 멘토링
- 프로젝트 발표
- 피드백과 정리
- HTML5: 시맨틱 마크업
- CSS3: 플렉스박스, 그리드, 애니메이션
- JavaScript ES6+: 최신 문법과 기능
- D3.js: 데이터 시각화
- Three.js: 3D 그래픽스
- GSAP: 고급 애니메이션
- 출석 (20%): 주간 참여도 및 실습
- 중간고사 (20%): 프로젝트 제안서 + 프로토타입
- 기말고사 (60%): 완성된 웹 프로젝트 제출 및 발표
- VS Code + GitHub Copilot
- GitHub: 버전 관리 및 프로젝트 배포
- 최신 웹 브라우저: Chrome, Firefox, Safari
강의에 대한 문의사항은 이슈를 통해 남겨주세요.
이 강의 자료는 오픈소스 정신을 바탕으로 Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International 라이선스 하에 제공됩니다.
- 포트폴리오 프로젝트 - 취업/진학용 활용 가능
- 개인 학습 - 무제한 학습 및 연구
- 수정 및 개선 - 코드 수정하여 더 나은 버전 제작
- 재배포 - 동일 라이선스로 공유 (교육 목적)
- Pull Request 환영 - 개선사항 기여
- Issue 제보 - 버그나 개선점 제안
- Fork 허용 - 개인 버전 제작 가능
- 학습 공동체 - 함께 성장하는 교육 환경
- 상업적 판매 금지 - 강의 자료 유료 판매 불가
- ShareAlike 의무 - 파생 저작물도 동일 라이선스 적용
✅ 학생 A: 강의 코드를 기반으로 포트폴리오 웹사이트 제작
✅ 학생 B: 더 나은 UI/UX로 개선하여 GitHub에 공유
✅ 교수 C: 다른 대학에서 동일 라이선스로 활용
✅ 개발자 D: 오픈소스 기여를 통한 실력 향상
❌ 기업 E: 강의 자료를 유료 강좌로 판매
❌ 개인 F: 라이선스 변경하여 독점적 사용
이 프로젝트는 다음을 지향합니다:
- 지식의 민주화: 누구나 접근 가능한 고품질 교육 자료
- 집단 지성: 커뮤니티 기여를 통한 지속적 개선
- 실무 경험: 실제 오픈소스 프로젝트 참여 경험
- 윤리적 기술: 상업적 이익보다 교육적 가치 우선
강의에 대한 문의사항은 이슈를 통해 남겨주세요.
이슈 제보, 개선 제안, Pull Request 모두 환영합니다! 함께 더 나은 교육 자료를 만들어가요.
- Fork 이 저장소를 포크하세요
- 개선 코드를 수정하거나 새로운 기능을 추가하세요
- 테스트 변경사항이 제대로 작동하는지 확인하세요
- Pull Request 변경사항을 제출하세요
- 새로운 주차 콘텐츠 추가
- UI/UX 개선
- 접근성 향상
- 다국어 지원
- 모바일 최적화
제작: GitHub Copilot과 함께 개발된 교육용 웹사이트
라이선스: CC BY-NC-SA 4.0 - 교육과 오픈소스 정신의 조화 🚀