부트스트랩 교육 강의

알지오 평생교육원 부트스트랩 강좌입니다.

전문가들이 뽑은 꼭 배워야하는 실무활용 강의

그동안 찾던 부트스트랩 강좌의 완전판 !

여러분의 마지막 강의가 되어드리겠습니다.

알지오에서는 PC와 스마트폰, 태블릿을 이용해서 언제,

어디서나 공부를 할 수 있습니다.

열심히 공부해서 부트스트랩 강좌를 마스터해보세요.

<부트스트랩 강좌 샘플동영상>

<부트스트랩 강좌 리뷰>

부트스트랩을 처음 다뤄보는데 

알지오에서 강의를 들어보니 많은 도움이 됩니다.

강사님께서 강의를 진행 하실 때 수강생 입장에서 꼼꼼하게 설명해주세요.

어려운 내용임에도 불구하고 이해도 잘되고 부담 없이 들을 수 있습니다.

완전 초보자도 강의를 수강하면 따로 책 같은게 필요하지도 않고 

쉽게 공부할 수 있어요.

저는 부트스트랩 강의 듣고 진짜 처음이랑은 완전 달라진 

제 모습을 보곤 합니다.

알지오 부트스트랩 강의 추천합니다.

부트스트랩 강좌 정보입니다. 추천 인터넷 강의 : 알지오

• 01.30분 부트스트랩 시작

  부트스트랩 셋팅, 그리드 시스템, container-fluid, h1~h6, small, mark, abbr, blockquote, blockquote-reverse, code, pre, kbd

  책갈피 : [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.24분 테이블, 이미지

  p태그, class=lead, tr 태그, col-md-2, page-header, class=close, data-dismiss=alert, fade in, class=btn

  책갈피 : [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.21분 버튼 그룹, 버튼 드롭다운, 라벨과 뱃지

  disabled, active, div class=btn-group, a link, dropdown-menu, data-toggle, date-toggle=dropdown, span class=caret, badge, container, label

  책갈피 : [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.22분 progress bar, pagination, breadcrumb, list-group, panel

  progress bar, pagination, breadcrumb, list-group, panel

  책갈피 : [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.23분 panel-group, dropdown, dropup, nav

  panel-group, dropdown, dropup, nav

  책갈피 : [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.26분 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

  책갈피 : [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.25분 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

  책갈피 : [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.26분 poull, popover, scroll

  data-placement, data-content, popover, data-spy=scroll, container-fluid, data-offset-top, data-spy=affix

  책갈피 : [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.26분 affix, 버튼, 팝업, 롤링배너

  affixed.bs.affix, 메뉴 고정, data-spy, 애니메이션 설정방법, 경고 메시지, data-dismiss, close.bs.alert, 버튼에 액션 부여, 버튼 reset 기능, 버튼 내용 변경하기, 버튼 색상 변경하기, 롤링 배너 속도 변경하기, carousel slide 정의, interval 설정, 롤링 반복작업 설정, 순환 사이클 설정, 팝업 띄우기

  책갈피 : [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분 버튼, 드롭다운 메뉴

  btn-default, btn-danger, show.bs.collapse, shown.bs.collapse, hide.bs.collapse, hidden.bs.collapse, dropdown-toggle, show.bs.dropdown, shown.bs.dropdown, hide.bs.dropdown, hidden.bs.dropdown

  책갈피 : [00:34] 클릭시 보이고 숨기기/[01:17] 함수 만들기/[01:21] btn-default 클릭 함수/[01:38] collapse/[02:40] btn-danger 클릭 함수/[03:13] collapse('show')/[03:56] show.bs.collapse /[04:56] shown.bs.collapse/[05:37] shown.bs.collapse 결과확인/[06:01] hide.bs.collapse/[06:50] hidden.bs.collapse/[07:30] data-toggle="collapse"/[07:54] data-target/[08:11] glyphicon glyphicon-collapse-down/[08:38] glyphicon glyphicon-collapse-up/[08:49] #alz hide.bs.collapse/[09:10] $(".btn").html/[10:44] glyphicon glyphicon-collapse-up/[11:38] 클릭시 스타일시트 적용/[11:53] float:left/[11:59] font-family : "Glyphicons Halflings"/[12:10] content : "\e131"/[12:33] .btn:after/[13:37] content : "\e136"/[14:39] dropdown/[15:16] show.bs.dropdown/[16:04] shown.bs.dropdown/[16:52] hide.bs.dropdown/[17:00] hidden.bs.dropdown/[17:28] $(event.relatedTarget).text()/[19:12] 숨길 때 버튼내용 바꾸기/[19:51] 보일 때 버튼내용 바꾸기/[21:07] caret/[21:19] dropdown-menu/[22:55] menuoff/[23:34] $(this).next('ul').toggle()/[23:53] stopPropagation(), preventDefault()/[24:39] 부모 요소, 자식 요소/[25:00] preventDefault()/[26:33] position: relative/[26:50] top:0; left:50%;/[27:31] top:0; left:98%;

• 11.23분 경고, 알림 메세지

  show.bs.model, hidden.bs.model, popover, popover-title, popover-content, 나만의 스타일 시트 만들기, charset 설정, mainNav, navbar-fixed

  책갈피 : [00:08] 실행시 알림 출력하기/[01:13] show.bs.modal/[01:43] modal("show")/[02:14] shown.bs.modal/[02:40] hidden.bs.modal/[03:51] id 찾기/[04:15] popover/[04:36] animation:true/[05:07] animation:false/[05:35] delay/[06:06] delay: {show:10 , hide: 70}/[07:48] html: true/[07:57] placement: "bottom"/[08:28] placement: "auto"/[08:58] selector/[10:25] trigger:"click"/[10:47] trigger:"hover"/[11:00] trigger:"focus"/[12:12] .popover 테두리 설정/[13:09] .popover-title 스타일 설정/[14:43] .popover-content 스타일 설정/[16:07] .arrow 스타일 설정/[17:10] 실습예제 결과보기/[18:16] euc-kr, utf-8/[19:00] html lang="ko"/[19:07] viewport/[20:03] 부트스트랩의 강점/[20:46] body id="page-top"/[21:04] nav 태그/[23:12] navbar navbar-default navbar-fixed-top

• 12.30분 부트스트랩 페이지 수정 (상단 메뉴)

  navbar, navbar-default, container-fluid, navbar-brand, navbar-right

  책갈피 : [00:00] navbar/[00:41] display:none/[00:59] navbar 스타일/[01:47] Ctrl + H/[03:00] @media/[03:29] navbar-default background-color 변경/[03:59] navbar-default.affix background-color 변경/[04:17] border-color 변경/[04:59] min_width/[06:15] 태블릿과 스마트폰일 때 변경내용/[07:03] background-color 변경/[07:21] border-color 변경/[07:34] transition:all .35s/[08:24] navbar-fixed-top/[08:43] position, z-index/[09:13] container-fluid 스타일/[10:48] min_width:768px 이상일 때/[11:15] 메뉴 스타일/[12:09] navbar-brand 스타일/[12:55] navbar-brand:hover/[14:00] 메뉴 background-color 변경/[14:17] pc환경 스타일 확인/[15:09] 메뉴 내용 확인/[15:38] navbar-right/[17:52] 알파값 변경/[18:15] 메뉴 위아래 여백 변경/[20:15] padding/[20:57] line-height/[22:09] border-radius/[24:27] Menu 버튼 display/[26:06] data-target/[26:27] Menu 버튼 클릭시 메뉴 나오기/[27:38] .navbar-collapse.in{overflow-y:auto}/[27:49] .navbar-collapse/[28:32] .nav>li

• 13.29분 부트스트랩 페이지 수정 (본문)

  header-content, page-scroll, section, container

  책갈피 : [00:30] 메뉴 추가/[01:27] header/[01:36] min-height:100%/[02:20] header-content/[02:41] top:50%/[03:18] -webkit-, -ms-/[04:26] @media/[04:57] padding:100px 15px/[05:28] header-content-inner/[06:15] header-content-inner 스타일/[07:24] h1 스타일/[08:49] hr/[09:31] hr 스타일/[09:47] header-content-inner hr 스타일/[11:01] @media 아닐때 header 스타일/[12:19] btn-xl/[13:14] btn-primary/[14:30] 부트스트랩 전용 css/[14:50] btn 스타일/[15:53] 책갈피 링크/[16:12] page-scroll/[17:17] a.page-scroll/[18:14] 애니메이션 속도 조절/[18:56] bg-primary/[20:00] creative.min.css/[20:35] section/[21:51] container/[22:15] @media container/[22:52] @media container{whith:1170px}/[23:24] .container 여백지정/[24:24] before after/[24:51] before/[25:19] :after, :before/[26:32] .row/[26:52] col-lg-8/[27:24] text-center/[27:55] col-lg-offset-2/[28:34] section-heading/[29:14] h2

• 14.25분 부트스트랩 페이지 수정 (분문, 포트폴리오)

  section-heading, services, container, col-md, 아이콘 변경, text-muted, container-fluid, popup-gallery, portfolio-box

  책갈피 : [00:00] section-heading/[01:08] hr/[02:17] p /[02:26] text-faded/[03:13] page-scroll/[03:34] btn-xl/[04:07] sr-button/[05:11] duration/[05:23] delay/[06:05] services/[06:43] container/[06:59] col-lg-12/[07:13] section-heading/[07:57] hr/[08:23] col-md-6/[09:07] col-lg-3/[09:35] col-md-6/[10:27] col-md-6/[10:49] service-box/[12:21] pc버전 service-box/[12:50] i/[13:07] text-primary/[13:23] fa fa-4x/[14:18] fa-4x/[14:53] fa/[15:10] text-primary/[15:38] sr-icons/[16:06] fa-diamond/[16:13] fa-paper, fa-newspaper/[16:38] h3/[17:22] p/[18:28] text-muted/[19:00] service-box/[19:29] class="no-padding" id="portfolio"/[19:46] no-padding /[19:58] section/[20:14] container-fluid/[20:57] no-gutter/[21:10] popup-gallery/[21:49] 개별 갤러리/[22:10] no-gutter/[22:34] col-lg-4 col-sm-6 /[22:49] col-sm-6/[23:12] col-lg-4 col-sm-6 /[23:38] porfolio-box/[24:26] porfolio-box:hover

• 15.30분 부트스트랩 페이지 수정 (포트폴리오, 하단 메뉴)

  carousel-inner, portfolio-box-caption, bg-dark

  책갈피 : [00:09] img/[00:40] img-responsive/[00:55] max-width:100%/[01:20] img 스타일/[02:05] transition:all/[03:12] display:block/[03:28] Project Name 색상변경/[04:03] portfolio-box-caption-content/[04:22] position:absolute/[04:57] transform:translateY(-50%)/[05:40] opacity/[06:28] project-category/[07:15] text-faded/[08:12] category/[08:29] project-category/[08:48] project-name/[09:51] aside/[10:24] bg-dark/[10:44] aside/[11:34] container/[11:43] text-center/[12:01] h2/[12:17] call-to-action/[12:54] btn/[13:04] sr-button/[14:15] sr-contact/[15:01] body id="page-top"/[15:17] mfp-zoom-out-cur/[16:10] jquery/[16:23] mfp-zoom-out-cur/[17:02] mfp-bg/[18:23] mfp-wrap/[19:04] mfp-container/[19:58] .mfp-image-holder .mfp-content/[20:22] .mfp-auto-cursor .mfp-content/[20:27] mfp-content/[21:33] mfp-zoom-out-cur/[21:44] mfp-close/[22:26] button.mfp-close/[23:01] mfp-close/[24:02] img.mfp-img/[24:27] mfp-bottom-bar/[25:17] mfp-counter/[26:05] button.mfp-arrow /[26:19] mfp-arrow-left/[26:25] mfp-arrow/[26:58] mfp-arrow-left:before/[27:05] mfp-arrow:before/[27:20] mfp-arrow:before, mfp-arrow:after/[28:27] b.bgOverlay.attr("class","mfp-bg")/[29:05] $('body, html').css('overflow', 'hidden')/[29:24] mfp-close/[29:33] 닫기버튼

부트스트랩강의,부트스트랩강좌,부트스트랩교육,부트스트랩학원,부트스트랩인강,부트스트랩인터넷강의,부트스트랩인터넷강좌,부트스트랩동영상,부트스트랩동영상강의,부트스트랩동영상강좌,부트스트랩배우기,부트스트랩사용법,부트스트랩사용방법,Bootstrap강의,Bootstrap강좌,Bootstrap교육,Bootstrap학원,Bootstrap인강,Bootstrap인터넷강의,Bootstrap인터넷강좌,Bootstrap동영상,Bootstrap동영상강의,Bootstrap동영상강좌,Bootstrap배우기,Bootstrap사용법,Bootstrap사용방법