Bootstrap 부트스트랩 추천 강의

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

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

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

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

알지오에서는 PC와 스마트폰, 태블릿을 이용해서 언제, 어디서나 공부를 할 수 있습니다.

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

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

<Bootstrap 부트스트랩 강좌 리뷰>

웹개발자를 꿈구고 있습니다. 

알지오에서 웹 퍼블리셔 카테고리의 HTML, CSS, 자바스크립트 등 많은 학과를 

먼저 공부를 했습니다. 지금은 브트스트램 강의를 마지막으로 패키지 수강 기간이 끝났습니다.

IT 쪽을 배우시고 싶으신 분들이 계신다면 저는 두말할 필요 없이 

알지오강의를 추천하고 싶습니다. 저혼자 보기에 아까운 너무 좋은 강의였습니다,

강의에서 강사님의 스킬같은 것도 들을 수 있었고 

커리큘럼 내용에서 실습예제 덕분에 더 잘 배웠습니다.

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

• 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사용방법