프레듀 원격평생교육원

과목정보

[HD]BOOT STRAP(부트스트랩)을 활용한 반응형 웹페이지 만들기

강사명 차시 학습시간 샘플
김세지 23 17 시간
모두보기
과정소개
학습대상
학습목표
학습내용

과정소개

본과정은 디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹페이지를 만들기 위해 부트스트랩을 활용하는 방법에 대한 강좌이다.

학습대상

· 반응형 웹페이지의 개념을 이해한다.
· 부트스트랩의 구성요소를 파악하고 부트스트랩의 다양한 구성요소를 공부한다.
· 부트스트랩의 스타일을 익히고 활용하는 방법에 대하여 학습한다.
· 동적으로 반응하는 요소를 만들기 위해 부트스트랩에서 제공하는 자바스트립트를 활용하여 동작하는 · 방법을 익힌다.

학습목표

웹페이지를 제작하기 위한 html5, css3, jQuery에 대한 기본 지식이 있는자를 기본으로 하며 기본지식이 없어도 강의를 반복적으로 시청하며 따라할 수 있도록 제작하였다.

학습목표

1. 부트스트랩의 개념
2. 서브라임텍스트 설치와 반응형 코딩(1)
3. 서브라임텍스트 설치와 반응형 코딩(2)
4. 부트스트랩 시작하기
5. 디바이스마다 달라지는 레이아웃
6. 부트스트랩의 다양한 스타일과 반응형 레이아웃 실습
7. 그리드의 다양한 옵션
8. 다양한 테이블 스타일과 폼태그 스타일
9. 다양한 버튼 스타일
10. 반응형 이미지 스타일
11. 도움을 주는 클래스들
12. 디바이스 사이즈마다 요소를 보이고 숨기는 클래스
13. 다양한 컴포넌트(글리피콘, 드랍다운, 네비게이션)의 활용
14. 네비게이션 바의 사용법
15. 네비게이션 바를 스크롤스파이하기
16. 경로, 페이지네이션, 라벨, 배지, 점보트론 컴포넌트의 활용
17. 썸네일, 진행바, 기본 미디어 컴포넌트의 활용
18. 패널,웰,반응성 임베드 컴포넌트의 활용
19. 자바스크립트로 동작하는 요소(모달창)의 활용
20. 툴팁,팝오버,토글버튼 자바스크립트로 동작하기
21. 컬랩스, 아코디언 자바스크립트로 동작하기 & 모달창 복습
22. 캐로셀의 구현과 다양한 옵션 및 메소드의 활용
23. Affix의 개념과 사용법