
① 강사소개
② 수강필요성
③ 수업내용안내
비주얼 스튜디오 코드 (VS CODE)
마이크로소프트의 개발 툴 중 최초로 크로스 플랫폼을 지원하는 에디터, 플러그인 확장기능(Extention)을 지원
확장기능 설치
Live Server (로컬 서버 실시간 확인)
Auto Rename Tag (대칭 태그 자동 수정)
툴팁 비활성화 (툴팁이 불편한 경우)
파일 > 환경 설정 > 설정
설정 창에서 "hover" 입력
"Editor > Hover : Enabled" 체크 해제
[ 수강필요성 (+동기부여) ]
기술 시대
기술 가진 사람이 ‘우대’받는 시대
1) 고용 안정성 (필요한 만큼 쉽게 내보내지 못함)
2) 유리한 처우 (구하기 어려운 사람이 되면 될 수록 유리함)
3) 직업 확장성 (프리랜서, 외주제작, 강사, 연사, 출판 등)
보편적인 기술
HTML, CSS, Javascript
1) 웹 페이지를 만드려면 반드시 사용해야하는 기술
2) IT 업계에서 널리 쓰임 (찾는 곳이 많음)
낮은 진입 장벽
HTML, CSS
1) 상대적으로 배우기 쉬운 편
2) 디자인 & 개발 직군에서 업무 확장을 위해 배우기 좋음
[ 수업목표 ]
프로그래밍 기초 이해
Javascript, jQuery를 이용한 UI 구현
마우스 클릭(터치), 키보드 입력, 스크롤 이벤트 활용
스와이퍼, 필터, 차트 등 플러그인 적용
[ 수업내용]
1. 들어가며
1.1. 수업 소개
2. 기초 익히기
2.1. 데이터 타입
2.2. 연산자
2.3. 변수
2.4. 배열
2.5. 함수
2.6. 조건문
2.7. 반복문
2.8. 변수, 배열, 조건문, 반복문 복합 예제 실습
3. jQuery 시작하기
3.1. 기본 사용법
3.2. 버전별 특징
3.3. 선택자
3.4. 클래스 추가/삭제
4. UI 효과 만들기
4.1. 이벤트
4.2. 함수와 메소드
4.3. 참고 & 분석하기
4.4. 숨기기 & 나타내기
4.5. 클래스를 이용한 숨기기 & 나타내기
4.6. 클래스를 이용한 스타일 변경
4.7. 별점 부여하기
4.8. 목차 만들기
4.9. 슬라이드 효과
4.10. animate
4.11. setInterval
4.12. click
4.13. keypress
4.14. scroll
4.15. scrollTop & offset top
4.16. 스크롤 인디케이터 (프로그레스 바)
4.17. 이벤트 이해하기 (1) - 카운터
4.18. 이벤트 이해하기 (2) - 메일 시그니처
4.19. 이벤트 이해하기 (3) - 채팅 UI
5. 플러그인 활용하기
5.1. var, let, const 차이점
5.2. Swiper JS
5.3. Slider Filter
5.4. Google Chart
5.5. Masonry
5.6. Isotope
5.7. sortable
5.8. datepicker