Bootstrap
전체 : 5시간 4분|회차당 평균 : 25분19초
01 부트스트랩 시작
부트스트랩 셋팅/그리드
시스템/container-fluid/h1~h6/small/mark/abbr/blockquote/blockquote-reverse/code/pre/kbd
30분
책갈피 : [00:22]
다운로드/[01:27]
문서보기/[01:40]
주석처리/[01:51] javascript, css
경로/[02:02] 내컴퓨터
경로/[02:12] 링크/[02:30] 서버 실행/[02:43] 소스 보기/[03:31] container 정의/[04:44] h1, p태그/[05:44] CDN/[06:03] jquery library/[06:13] javascript 파일 연동/[06:38] 그리드 시스템 설치/[06:44] 반응형웹 적용/[07:01] viewport/[07:48] container-fluid/[08:15] menu 넓이 조정/[09:08] 넓이 조정 (1~12)/[10:08] 주석처리/[10:32] font-size/[11:44] 균등/[11:58]
F11/[12:04] small
태그/[13:29] mark/[13:41] title/[15:57] 인용구(blockquote)/[16:43] blockquote-reverse/[17:21] 스타일시트 반영/[17:42] 코드 태그/[18:17] kbd 태그/[18:30] 일반 브라우저 테스트/[19:10] pre 태그/[19:19] .display (block)/[19:43] span/[19:47] text-primary/[20:18] text-muted/[20:24] text-danger/[20:44] 배경/[20:53]
bg-danger
02 테이블, 이미지
p태그/class=lead/tr
태그/col-md-2/page-header/class=close/data-dismiss=alert/fade in/class=btn
24분
책갈피 : [00:13]
p태그/[00:26] class
적용/[00:37]
margin/[00:56]
font-size/[02:04]
class="lead"/[02:31]
text-center/[03:01]
initialism/[03:40]
text-transform/[04:32]
list-unstyled/[05:25]
pre-scrollable/[06:38]
table-striped/[06:54]
table-bordered/[07:09]
table-hover/[07:24]
table-condensed/[07:42] tr
태그/[08:22]
img-rounded/[08:25]
img-circle/[09:12]
img-responsive/[10:04]
thumbnail/[10:52]
col-md-2/[12:01]
container/[12:33]
반응형웹/[13:21]
page-header/[13:38]
well/[14:56] well
well-lg/[15:12] well
well-sm/[15:24]
container/[15:49] alert
alert-success/[16:21] alert
alert-warning/[17:05]
class="close"/[17:16]
data-dismiss="alert"/[18:35] fade
in/[20:09] 버튼
스타일/[20:18]
class="btn"/[20:34]
btn-warning/[21:07]
btn-link
03 버튼 그룹, 버튼 드롭다운, 라벨과
뱃지
disabled/active/div class=btn-group/a
link/dropdown-menu/data-toggle/date-toggle=dropdown/span
class=caret/badge/container/label
21분
책갈피 : [00:54]
btn-xs/[01:24]
btn-block/[02:06]
btn-default/[02:39]
disabled/[03:33]
active/[04:29]
그룹화/[04:38] div
class="btn-group"/[05:56]
btn-group-vertical/[06:39]
btn-group-justified/[07:51] a
link/[09:21]
주석처리/[10:57] tree
menu/[11:39]
dropdown-menu/[12:52]
data-toggle/[14:28]
dropdown-toggle/[14:44]
date-toggle="dropdown"/[15:07] span
class="caret"/[16:16] glyphicon
glyphicon-search/[17:32]
btn-lg/[18:12]
badge/[18:52]
container/[19:20]
label/[20:03] label
label-warning/[20:14] default
처리
04 progress bar, pagination,
breadcrumb, list-group, panel
progress bar, pagination, breadcrumb, list-group, panel
22분
책갈피 : [00:03] progress
bar/[00:52] min, max
값/[02:36]
progress-bar-danger/[03:09]
progress-bar-striped/[03:14]
active/[04:37]
progress-bar-warning/[04:59]
pagination/[05:37] 미디어 쿼리
반영/[06:35]
class="active"/[06:51]
class="disabled"/[07:30]
pagination-sm/[08:33]
pagination-lg/[09:08]
breadcrumb/[10:29]
pager/[11:27] previous,
next/[12:00]
list-group/[12:33]
list-group-item/[13:54]
container/[14:30] span
class="badge"/[15:23] float값
(right)/[16:43] list-group-item
disabled/[17:27]
list-group-item-success/[18:05]
list-group-item-text/[18:54]
last-child/[19:30] list-group-item
active/[19:47]
패널기능/[20:09]
class="panel"/[20:36]
panel-danger/[20:57]
class="panel-body"/[21:23]
list-group-item-heading/[21:56]
panel-heading/[22:08]
panel-footer
05 panel-group, dropdown, dropup,
nav
panel-group, dropdown, dropup, nav
23분
책갈피 : [00:25]
panel-group/[01:14]
주석처리/[01:17] 드롭다운, 토글
만들기/[02:14]
dropdown/[02:32]
data-toggle="dropdown"/[02:53]
class="btn"/[03:02]
btn-primary/[03:21]
dropdown-toggle/[03:40]
class="dropdown-menu"/[04:40]
class="divider"/[05:34]
dropdown-header/[06:59]
class="disabled"/[07:22]
class="dropup"/[08:15]
type="button"/[08:25] class="btn
btn-danger"/[08:47]
data-toggle="collapse"/[10:15]
data-target/[10:48] class="collapse
in"/[12:15] panel=group
collapse/[13:13]
class="list-inline"/[13:33]
class="nav"/[14:05] class="nav
nav-tabs"/[14:51]
드롭다운/[15:21]
class="dropdown"/[15:46]
class="dropdown-toggle"/[16:06]
class="caret"/[16:23]
dropdown-menu/[17:15] nav-pills
nav-stacked/[18:54]
class="nav"/[19:14]
nav-tabs/[19:33]
href="#index"/[19:42]
data-toggle="tab"/[21:13]
class="tab-content"/[21:24]
class="tab-pane"/[21:55] tab-pane fade
in active
06 navbar, form,
input
navbar-nav, navbar-inverse, navbar-fixed, navbar-brand,
form-group, form-inline, form-horizontal, form-control, sr-only,
checkbox-inline, input-sm, input-lg
26분
책갈피 : [00:38]
navbar/[01:10]
container-fluid/[01:48] div
class=""ALZIO.CO.KR/[02:03]
navbar-brand/[02:31] ul
class="nav"/[02:50]
navbar-nav/[03:18]
navbar-inverse/[04:25]
navbar-fixed-top/[04:50]
navbar-fixed-bottom/[06:13] ul
class="nav navbar-nav"/[06:49]
navbar-right/[07:33] right!
important/[08:28] glyphicon
glyphicon-search/[09:01] glyphicon
glyphicon-user/[09:07] glyphicon
glyphicon-log-in/[11:12]
placeholder/[12:26] div
class="form-group"/[13:14]
class="form-control"/[13:41]
class="checkbox"/[14:12] btn
btn-default/[15:09] form
class="form-inline"/[16:27] label
class="sr-only"/[16:54] form
class="form-horizontal"/[18:54] div
class="col-sm-9"/[20:24] div
class="form-group"/[20:31]
col-sm-offset-3 col-sm-9/[21:53]
disabled/[22:11]
checkbox-inline/[23:17]
select/[23:27] select
multiple/[23:55] select multiple
class="form-control"/[24:56]
form-control input-sm/[25:23]
input-lg
07 carousel, button
carousel slide, carousel-indicators, carousel-inner, #next,
carousel-control, carousel-caption, modal, modal fade, modal-dialog,
modal-header, modal-footer, modal-content, modal-sm, poull
25분
책갈피 : [00:31] div
class="container"/[01:18] div
id="next"/[01:29] class="carousel
slide"/[01:55]
data-ride="carousel"/[02:55] ul
class="carousel-indicators"/[03:22]
data-target="#next"/[05:10] div
class="carousel-inner"/[05:50] div
class="item active"/[07:34]
absolute/[07:50]
carousel/[08:33] css
적용/[08:39] style 시트
삽입/[09:11] width:
60%/[10:40]
href="#next"/[11:21] class="left",
class="right"/[11:40]
carousel-control/[12:35] glyphicon
/[12:42] 내용 확인/[13:55] 설명문구 삽입/[14:30] carousel-caption/[14:47] 팝업창/[15:29] input type 버튼 생성/[15:57] 내용 확인/[16:05] 버튼 기능 삽입/[16:21] modal/[16:25] data-toggle/[16:40] data-target/[16:51] 페이지 생성, 숨기기/[17:34] modal fade 정의/[17:52] 결과 확인/[18:30] modal-dialog/[19:13] header,footer 삽입/[19:49] modal content 생성/[20:36] modal-header/[20:59] data-dismiss/[22:02] modal 제거 후 결과 확인/[22:28] 버튼 선언/[22:47] 창 크기 설정/[23:46] 토글값 변수 정의/[24:03] tooltip/[24:38] 결과 확인
08 poull, popover,
scroll
data-placement, data-content, popover, data-spy=scroll,
container-fluid, data-offset-top, data-spy=affix
26분
책갈피 : [00:24]
data-placement="right"/[01:06] 자동출력된
부분/[02:40]
tooltip/[03:13]
data-placement="left"/[03:47]
data-content="IT전문교육"/[04:15]
popover()/[05:05]
component-animations.less/[05:07]
opacity/[06:24]
data-placement="bottom"/[07:36]
data-trigger="hover"/[08:07]
스크롤/[08:21]
data-spy="scroll"/[08:43]
navbar-inverse/[08:52]
navbar-default/[09:06]
navbar-fixed-top/[09:29]
X-UA-Compatible/[09:50]
collapse/[10:45]
navbar-nav/[11:44] 스타일 시트
삽입/[12:21]
almenu1,almenu2,almenu3/[13:13]
응용/[13:57]
container-fluid/[14:39]
container-fluid row/[15:39]
col-md-6/[16:33] 기기별 화면 비율
확인/[18:36] col-sm-4,
col-sm-8/[19:08]
data-offset-top="300"/[19:48]
data-spy="affix"/[21:01] style='top:
10px;'/[22:18]
주석처리(affix.js)/[22:33]
position:fixed;/[23:56]
$(document).ready(function()/[24:28]
offset/[24:41]
affix.bs.affix/[25:00]
alert('300px!')
09 affix, 버튼, 팝업, 롤링배너
affixed.bs.affix, 메뉴 고정, data-spy, 애니메이션 설정방법, 경고 메시지,
data-dismiss, close.bs.alert, 버튼에 액션 부여, 버튼 reset 기능, 버튼 내용 변경하기, 버튼 색상 변경하기, 롤링
배너 속도 변경하기, carousel slide 정의, interval 설정, 롤링 반복작업 설정, 순환 사이클 설정, 팝업 띄우기
26분
책갈피 : [00:04]
affixed.bs.affix/[00:20] 결과
확인/[00:38]
affix-top/[01:52] bottom
적용/[02:24] 결과 확인/[02:57] 메뉴 고정/[03:15] container-fluid/[03:47] data-spy/[04:22] 넓이 조정/[04:42] 애니메이션 설정방법/[05:24] 기준값 확인/[05:32] 테스트/[06:06] 경고 메시지/[06:32] data-dismiss/[06:52] 닫는 방식 비교/[07:12] 변수명 정의/[08:14] 결과 확인/[08:30] close.bs.alert/[09:21] closed.bs.alert/[10:24] 버튼에 액션 부여/[10:46] 함수 실행/[10:56] click 메서드/[11:08] loading/[11:53] 버튼 reset 기능/[12:50] 버튼 내용 변경하기/[13:39] autocomplete="off"/[13:53] css 스타일시트 정의/[14:04] border-radius 값 조정/[15:45] 버튼 색상 변경하기/[16:48] default로 변경/[17:47] 롤링 배너 속도 변경하기/[18:17] carousel slide 정의/[19:02] interval 설정/[20:17] 롤링 반복작업 설정/[22:04] btnstart,btnstop/[23:02] 순환 사이클 설정/[23:35] 팝업 띄우기/[24:15] 결과 확인/[25:27] 주석처리
10
28분
11
23분
12
30분
샘플확인 : 알지오 검색후 -> 강의검색란 -> Bootstrap
※ 다음 강의는 순차적으로 업데이트 진행중입니다.
'학과 샘플강의' 카테고리의 다른 글
| OpenCV 전체 : 2시간 4분|회차당 평균 : 41분20초 (0) | 2016.11.14 |
|---|---|
| 스케치북 프로 전체 : 7시간 46분|회차당 평균 : 33분17초 (0) | 2016.11.14 |
| 안드로이드 스튜디오 전체 : 6시간 4분|회차당 평균 : 30분19초 (0) | 2016.11.14 |
| 엑세스2016 전체 : 5시간 45분|회차당 평균 : 28분45초 (0) | 2016.11.14 |
| Gradle 전체 : 3시간 51분|회차당 평균 : 38분30초 (0) | 2016.11.14 |