[HD]BOOT STRAP(부트스트랩)을 활용한 반응형 웹페이지 만들기
과정 소개 |
본 과정은 디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹페이지를 만들기 위해 부트스트랩을 활용하는 방법에 대한 강좌이다. |
학습 대상 |
웹페이지를 제작하기 위한 html5, css3, jQuery에 대한 기본 지식이 있는자를 기본으로 하며 기본지식이 없어도 강의를 반복적으로 시청하며 따라할 수 있도록 제작하였다. |
학습 목표 |
반응형 웹페이지의 개념을 이해한다. 부트스트랩의 구성요소를 파악하고 부트스트랩의 다양한 구성요소를 공부한다. 부트스트랩의 스타일을 익히고 활용하는 방법에 대하여 학습한다. 동적으로 반응하는 요소를 만들기 위해 부트스트랩에서 제공하는 자바스트립트를 활용하여 동작하는 방법을 익힌다. |
교수 소개 |
김세지 |
교재 정보 |
|
학습내용
차시 |
내용 |
1차시 |
[1] 1. 부트스트랩의 개념 |
2차시 |
[2] 2. 서브라임텍스트 설치와 반응형 코딩(1) |
3차시 |
[3] 3. 서브라임텍스트 설치와 반응형 코딩(2) |
4차시 |
[4] 4. 부트스트랩 시작하기 |
5차시 |
[5] 5. 디바이스마다 달라지는 레이아웃 |
6차시 |
[6] 6. 부트스트랩의 다양한 스타일과 반응형 레이아웃 실습 |
7차시 |
[7] 7. 그리드의 다양한 옵션 |
8차시 |
[8] 8. 다양한 테이블 스타일과 폼태그 스타일 |
9차시 |
[9] 9. 다양한 버튼 스타일 |
10차시 |
[10] 10. 반응형 이미지 스타일 |
11차시 |
[11] 11. 도움을 주는 클래스들 |
12차시 |
[12] 12. 디바이스 사이즈마다 요소를 보이고 숨기는 클래스 |
13차시 |
[13] 13. 다양한 컴포넌트(글리피콘, 드랍다운, 네비게이션)의 활용 |
14차시 |
[14] 14. 네비게이션 바의 사용법 |
15차시 |
[15] 15. 네비게이션 바를 스크롤스파이하기 |
16차시 |
[16] 16. 경로, 페이지네이션, 라벨, 배지, 점보트론 컴포넌트의 활용 |
17차시 |
[17] 17. 썸네일, 진행바, 기본 미디어 컴포넌트의 활용 |
18차시 |
[18] 18. 패널,웰,반응성 임베드 컴포넌트의 활용 |
19차시 |
[19] 19. 자바스크립트로 동작하는 요소(모달창)의 활용 |
20차시 |
[20] 20. 툴팁,팝오버,토글버튼 자바스크립트로 동작하기 |
21차시 |
[21] 21. 컬랩스, 아코디언 자바스크립트로 동작하기 & 모달창 복습 |
22차시 |
[22] 22. 캐로셀의 구현과 다양한 옵션 및 메소드의 활용 |
23차시 |
[23] 23. Affix의 개념과 사용법 |
|
평가기준
평가항목 |
진도율 |
시험 |
과제 |
진행단계평가 |
수료기준 |
평가비율 |
- |
0% |
0% |
0% |
- |
수료조건 |
100% 이상 |
0점 이상 |
0점 이상 |
0점 이상 |
0점 이상 |
|