부트스트랩 - 총 13시간 14분 / 강의당평균 : 39분42초

[누군지]

부트스트랩

전체 : 13시간 14분 / 강의당평균 : 39분42초

01 부트스트랩 소개 및 그리드시스템

부트스트랩 소개 및 시작하기/사용자정의 CSS 추가/그리드시스템의 기본 개념/그리드시스템 (미디어 축소 예제)/그리드시스템 (미디어 확대 예제)

51분

책갈피 : [00:01] Bootstrap / [01:05] CSS파일 적용 / [01:22] Bootstrap 구조확인 / [01:25] Css / [01:32] Js / [01:35] Fonts / [02:10] Min버전과 없는 버전의 차이점 / [02:49] Min버전 결과 확인 / [03:10] Min버전 없는 결과 확인 / [03:59] Hello, world! 코드 / [04:22] Bootstrap 버전으로 확인 / [04:40] Bootstrap 코드 확인 / [05:02] Bootstrap 링크 연결 / [05:44] Bootstrap 는 Jquery 파일 사용 / [06:19] CDN / [06:26] CDN파일 적용 화면 / [06:43] http; 부분 삭제 / [07:16] Bootstrap 파일에 새CSS 내용 적용 / [08:29] H1 태그 내용 수정 / [08:43] Color:red 추가 / [08:58] 실행결과확인 / [09:17] CSS수정을 권장하지 않는 이유 / [10:31] HTML5 문서 내에 직접 각태그 스타일 적용 / [10:48] 각 태그 스타일 적용 시 장점 / [11:10] 각 태그 스타일 적용 시 단점 / [12:36] 위 내용을 권장하지 않는 이유 / [12:55] Bootstrap에 추가된 Css 파일 링크 / [14:05] "h1.css" 내용 확인 / [14:13] Color: red; / [14:46] h1 내용에 결과값 설명 / [15:15] 그리드 / [16:02] 중간기기 데스크탑 / [16:25] 그리드시스템 적용 방법 / [17:29] 클래스 접두사 / [17:48] .col-xs- 줄임말 / [18:29] .col-sm- 줄임말 / [19:07] .col-md- 줄임말 / [19:24] .col-lg- 줄임말 / [19:42] 컬럼수 / [19:53] 사이 너비 / [20:37] 코드 확인 / [20:45] 미디어 디바이스에서 화면을 12개로 나눔 / [21:09] Grid.css 파일 확인 / [21:14] Class*="col-" / [21:51] Row class / [22:41] Div class="row" / [23:08] 실행결과확인 / [24:15] 화면사이즈가 줄어들었을때 결과 화면 / [26:33] col-md-2 / [27:43] 실행결과확인 / [29:29] 화면사이즈가 줄어들었을때 결과 화면 / [30:00] 화면이 원상태로 돌아왔을때 결과 화면 / [30:26] ,col-md-1.col-sm-6 / [32:08] 실행결과확인 / [32:18] 화면사이즈가 줄어들었을때 결과 화면 / [32:47] 화면이 sm이상 md사이즈일때 결과 화면 / [33:59] md-1, sm-1 화면 / [34:11] 코드확인 / [34:17] Class 지정 확인 / [34:51] 화면사이즈가 줄어들었을 때 결과 화면 / [35:15] 887Px 화면일때 결과 화면 / [36:11] 테블릿 기분화면일때 결과 화면 / [36:37] 그리드 측정기준 / [37:44] 코드 확인 / [38:07] Bootsrap.css 파일 직접열어서 확인 / [38:14] 미디어쿼리 기능 적용 / [38:42] Bootsrap 장점 / [39:11] .col-xs-6.col-sm-3 / [40:41] 매우작은기기(<768px)확인 / [41:40] 768px보다 작은화면일때 결과 화면 / [42:50] 화면을 늘리면서 결과 화면 살펴보기 / [43:53] 코드 확인 / [44:03] 각각의 사이즈를 다르게 설정 / [46:47] 각코드의 설정값 확인 / [47:39] 실행결과화면 / [47:45] 화면을 xs사이즈 결과화면 살펴보기 / [48:17] 코드와 결과하면 매치하며 설명 / [48:47] 화면을 sm사이즈 결과화면 살펴보기 / [49:39] 화면을 md사이즈이상일때 결과화면 살펴보기

02 부트스트랩의 그리드시스템(2)

오프셋/중첩/푸쉬 & 풀/오프셋과 푸쉬의 차이/숨기기/그리드 시스템 내부구조

45분

책갈피 : [00:02] Bootstrap의 호환성 / [00:51] 화면크기 변경 / [01:31] 교육화면의 구성 / [02:08] 오프셋에 대해서 알아보기 / [02:13] HTML5 / [02:53] Bootstrap의 그리드 시스템 / [03:21] 코드 살펴보기 / [03:35] 버튼 / [04:04] style태그 / [04:30] link / [04:54] 결과 확인 / [05:49] 그리드 시스템 / [06:30] 코드 보기 / [07:26] 결과 확인 / [09:04] offset / [10:04] affset클래스추가 / [10:36] 적용 결과 / [10:56] 응용하기 / [11:42] mediumsize device / [12:41] 중첩 기능 / [13:13] Level 1 / [14:30] Level 2 / [14:57] 중첩 결과 확인 / [16:40] 비율변화 / [17:35] 코드 보기 / [19:07] 크기 변화 확인 / [20:09] 사이즈 분할 / [20:19] 그리드요소의 배치조정 / [20:28] offset기법 / [21:12] 백그라운드 색상 넣기 / [22:23] push, pull / [24:17] push 코드 / [24:38] pull 코드 / [25:55] 자바 스크립트 / [26:16] 크기,위치에 대한 복습 / [27:18] 격자 모양 생성 / [27:54] 코드 보기 / [28:24] offset 활용 / [29:29] push된 요소 / [29:49] 실행 화면 / [31:07] offset과 push가 겹치는 상황 / [32:10] offset의 기준 / [33:08] offset다음에 push가 오는 경우 / [33:49] 숨기기 기능 알아보기 / [34:27] visible / [34:36] hidden / [35:00] visible-sm / [35:18] hidden코드 보기 / [35:38] xs / [36:42] 실행화면 / [38:09] visible코드보기 / [40:25] 홈페이지의 반응성 / [40:49] css / [41:39] width / [42:30] @media / [43:41] margin

03 부트스트랩 표현요소

기본설명 및 헤더/텍스트 배치/텍스트 표현요소/문서 표현요소/코드 표현

56분

책갈피 : [00:18] 기존태그의 새로운 정의 / [00:52] 특별한 태그 요소 알아보기 / [01:06] h 알아보기 / [01:27] heading / [01:58] 실행화면 / [02:19] small / [02:36] Secondary text / [03:35] h1 / [04:22] Bootstrap의 정렬 / [04:38] 내부정의된 정렬 코드 보기 / [05:00] text-align / [05:45] text-justify, text-nowrap / [06:57] container class / [08:02] container-fluid옵션 / [08:59] 화면 퍼센테이지 줄이기 / [09:41] pre태그 / [10:30] pre-scrollable / [11:12] scroll생성 확인 / [12:00] p태그 / [13:18] 적용결과 확인 / [13:58] lead class / [14:23] span / [15:24] mark / [16:06] 찾기기능 / [16:34] del / [17:15] s / [19:26] del과 s의 사용법 / [19:41] ins / [20:30] u태그 / [21:17] strong / [22:23] em태그 / [23:42] 약어를 표현하는 기능 알아보기 / [25:02] abbr / [25:50] initialism / [27:09] code 표현에 대해 알아보기 / [27:36] 꺽쇠 기호 / [28:00] 특수문자 기호 / [28:42] 키보드 / [29:04] 강조디자인 / [29:32] 방정식 / [30:34] var / [30:52] 샘플출력 / [31:46] samp / [32:05] 단락의 형태를 지정하는 방법 / [32:54] address태그 / [33:36] 인용구 / [34:13] blockquote / [34:37] small / [35:18] blockquote-reverse / [35:52] pull-right / [36:29] cite / [37:48] list / [38:19] ul태그 / [39:58] ol태그 / [40:08] ul과 ol의 중첩사용 / [40:55] ol안에 ul을 적용한 모습 / [41:48] unstyle / [42:29] list-unstyled / [43:02] list-inline / [44:14] dl / [45:00] dt, dd, dl / [46:00] dl-horizontal / [47:44] Capitalized / [49:27] lowercase, uppercase, capitalize / [49:54] 결과 화면

04 테이블과 폼

헬퍼클래스/테이블/폼-입력필드

50분

책갈피 : [00:02] 헬퍼 클래스의 정의 / [01:08] 텍스트를 꾸며주는 헬퍼클래스 알아보기 / [01:22] text-muted / [02:12] 음소거 / [02:39] text-primary / [03:04] text-success / [03:28] text-info / [03:56] text-warning / [04:35] text-danger / [05:30] 배경색을 넣는 클래스 / [06:01] bg-primary / [06:21] bg-success / [07:00] bg-info / [08:07] bg-warning / [08:47] bg-danger / [09:48] table 알아보기 / [10:49] 표 만들기 / [11:33] caption / [12:16] table태그의 구조 / [13:00] thead / [13:38] tr / [14:03] th / [14:19] tbody / [15:23] scope / [16:48] table-striped / [17:55] table-bordered / [18:45] table-hover / [20:11] table-condensed / [21:21] active / [22:50] Success / [23:34] Info / [23:41] Warning / [24:09] Danger / [25:24] 칸이 많은 테이블의 표현 / [25:59] table-responsive / [27:25] 폼기능에 대해 알아보기 / [28:11] 예시 / [28:20] 이메일주소, 이메일 입력칸 / [28:51] placeholder / [29:05] form / [29:37] label, input / [30:18] form-control / [30:59] 암호 / [31:50] 실행결과 확인 / [32:20] 파일 업로드 / [32:44] 버튼 / [33:02] 탐색기 / [33:16] help-block / [33:40] checkbox / [34:54] submit / [35:19] 폼의 요소 자세히 살펴보기 / [35:29] input / [36:10] password / [36:20] datetime / [37:10] date input / [37:48] month / [38:14] week / [38:43] url / [39:00] search / [39:15] color input / [39:36] 컴퍼넌트 / [39:58] textarea / [41:56] form-control-static / [42:07] disabled / [42:41] value / [43:30] fieldset / [44:06] readonly / [45:31] has / [45:44] help-block / [46:11] has-success / [46:34] has-warning / [46:55] has-error / [47:53] 추가적인 아이콘 / [48:20] has-feedback / [48:35] glyphicon / [48:58] input-lg, input-xs / [49:39] 결과 확인

05 폼 라벨과 정렬

콤보박스/체크박스와 라디오버튼/버튼/맥락정보가 들어간 버튼/버튼 옵션/이미지

41분

책갈피 : [00:01] 폼과 다양한 요소 알아보기 / [00:08] 기본예제 / [00:37] 코드 보기 / [00:47] label / [01:50] 스크린리더 / [02:14] sr-only / [02:55] aria-label / [03:09] role / [03:41] form-inline / [04:45] 원래의 화면 크기 출력 / [05:24] form-horizontal / [06:03] 확대해서 보기 / [06:19] checkbox / [06:52] disabled / [07:31] 결과 보기 / [08:06] checkbox-inline / [08:39] blank / [09:24] radio / [09:31] optionsRadios / [09:53] checked / [10:45] 결과 보기 / [11:16] radio-inline / [11:28] 버튼 알아보기 / [11:37] 링크가 들어간 버튼을 포현하는 방법 / [11:45] a태그 / [11:53] href / [12:19] btn / [12:30] btn-default / [13:27] role / [14:29] Link / [15:18] btn-default / [15:33] type / [16:26] input태그를 사용한 버튼 표현 / [17:36] input / [18:44] 결과 확인 / [19:39] 버튼 옵션 알아보기 / [20:00] btn btn-default / [20:21] orimary / [21:04] Success / [21:43] Info / [22:18] Warning / [22:45] Danger / [23:52] btn-link / [24:54] 버튼의 크기 알아보기 / [25:43] default버튼의 크기 / [25:53] Large 버튼 / [25:58] btn-lg / [26:15] small button / [26:25] btn-sm / [27:07] extra small button / [28:03] btn-xs / [28:12] block button / [28:29] btn-block / [29:26] Active button / [30:06] fade / [30:37] disabled button / [31:44] disabled / [31:52] 이미지에 대해 알아보기 / [32:33] img src / [33:03] alt / [34:43] img-rounded / [35:36] img-circle / [36:43] 썸네일 / [37:35] img-thumbnail / [37:57] img-responsive / [38:09] div / [40:00] px / [40:42] center-block

06 프린터 출력과 아이콘

헬퍼 클래스/프린터 출력 관련 클래스/아이콘

37분

책갈피 : [00:01] 헬퍼클래스에 대해 알아보기 / [00:22] button / [00:41] close / [00:54] aria-label / [01:14] × / [01:44] span / [01:55] aria-hidden / [02:36] 실행 결과 / [03:39] caret / [04:36] pull / [05:27] pull-left, pull-right / [06:08] 실행 결과 / [07:13] 정렬 / [07:38] center-block / [07:54] display / [07:58] margin / [08:10] 실행 결과 / [10:25] clearfix / [11:25] show, hidden / [11:52] 실행 결과 / [12:02] hidden의 특징 / [13:00] invisible / [13:46] hide / [14:31] none. block / [14:46] visibility / [15:58] important / [17:19] 헤딩 / [17:37] text-hide / [17:54] transparent / [18:17] 결과 확인 / [19:03] text-hide의 유용한 사용법 / [20:17] sr-only / [20:29] sr-only-focusable / [21:10] 링크 / [22:43] 실행 결과 / [24:37] print에 관련된 invisible 알아보기 / [25:06] 정렬에 관한 요소 / [25:39] visible-print / [26:01] hidden-print / [26:29] 실행 결과 / [26:52] 인쇄 미리보기 / [28:01] 아이콘 / [28:24] glyphicon / [28:49] aria-hidden / [29:19] envelope, refresh / [29:38] 사용가능한 아이콘 목록 / [30:02] 아이콘 사용방법 / [30:26] 사용예제 만들기 / [30:46] Left Align / [31:28] align-left / [31:49] align-justify / [32:13] btn-group / [32:58] 글쓰기 버튼 / [33:20] write / [33:33] glyphicon-pencil / [34:05] 실행 결과 / [34:58] alert-danger / [35:09] role / [35:25] exclamation-sign / [36:02] alert-info / [36:52] bg-primary

07 드롭다운

드롭다운 옵션들/버튼 그룹/분할된 버튼 드롭다운/입력 그룹

39분

책갈피 : [00:01] Dropdown / [00:20] Dropdown의 기본구성 / [00:38] 코드 보기 / [01:00] 버튼 생성 / [01:17] btn btn-default / [01:30] dropdown-toggle / [02:24] id / [03:04] caret / [03:52] 리스트 작성 / [04:30] aria-labelledby / [05:09] li / [05:19] a태그 / [05:35] presentation / [05:48] menuitem / [05:54] # / [06:48] DropUp / [07:36] 실행 결과 / [08:36] Dropdown메뉴의 정렬 / [10:00] 오버라이딩 / [10:43] Dropdown header / [11:16] dropdown-header / [12:48] divider / [12:59] 실행 결과 / [13:52] disabled속성 / [15:02] 버튼 그룹 컴퍼넌트 알아보기 / [15:33] div / [15:38] btn-group / [16:18] 실행 결과 / [16:39] btn-toolbar / [17:09] 버튼 그룹의 장점 / [18:08] 네개의 버튼 그룹 비교 / [19:27] 실행 결과 / [20:23] vertical / [21:06] dropdown-toggle / [21:48] a태그 / [21:57] btn-group-justfied / [22:18] 실행 결과 / [22:50] 분리된 dropdown버튼 만들기 / [23:35] 코드 보기 / [23:59] btn-info / [25:29] 입렵그룹 컴퍼넌트 살펴보기 / [26:24] input-group / [26:36] placeholder / [26:49] addon / [28:01] input-group-addon / [28:22] span / [29:58] 코드 보기 / [31:05] checkbox / [31:44] radio / [32:43] addon 버튼 만들기 / [33:05] 코드 보기 / [33:08] input-group-btn / [34:11] 버튼으로 동작하는 검색하기 / [35:31] ul / [35:58] divider / [36:46] input-group-btn / [37:19] 사이즈에 대해 알아보기 / [37:37] 코드 보기 / [37:58] input-group-sm / [38:07] input-group-lg / [38:29] 실행 결과

08 네비게이션

네비게이션 드롭다운/네비게이션 바

37분

책갈피 : [00:02] 네비게이션 알아보기 / [00:22] 코드 살펴보기 / [00:23] ul / [00:39] nav / [01:03] presrntation / [01:42] active / [02:10] 실행 결과 / [03:08] 실제 사이즈 보기 / [03:36] nav-tabs / [03:49] 알약형 / [04:32] nav-pills / [04:42] nav-stacked / [05:13] 실행 결과 / [06:15] nav-justified / [08:17] 균등분할 / [09:17] disabled기능 / [10:00] 실행 결과 / [10:46] dropdown메뉴의 사용 / [11:40] active / [12:12] caret / [12:56] divider / [13:29] 수행 결과물 확인 / [14:13] 화면크기가 작아질때의 경우 / [15:22] open / [16:02] 기본적인nav의 모양 / [16:47] 네비게이션 바 / [18:42] 화면크기를 늘릴 경우 / [19:02] collapse / [19:48] navbar / [19:59] navbar-header / [20:54] collapsed / [21:51] icon-bar / [22:10] navbar-brand / [23:27] navbar-nav / [24:01] 브랜드에 이미지를 넣어 표현하기 / [24:44] alt / [25:58] 네비게이션바에 입력폼 넣기 / [26:21] navbar-form / [26:26] form-group / [26:40] Search / [27:28] navbar-left / [28:23] navbar-header / [31:06] submit버튼 / [31:36] 실행 결과 / [31:53] navbar-btn / [32:55] navbar-text / [34:47] 텍스트에 링크를 걸어보기 / [35:44] navbar-link / [36:00] 실행 결과

09 네비게이션바, 페이지 이동, 라벨과 뱃지

네비게이션바 정리 및 반전/경로 이동/페이지 이동/라벨/뱃지

32분

책갈피 : [00:00] 네비게이션 바의 정렬 / [00:21] container-fluid / [01:02] navbar-fixed-top / [01:44] padding-top / [02:31] link / [02:41] 적용 결과 보기 / [03:06] navbar-fixed-bottom / [04:51] padding-bottom / [05:19] navbar-static-top / [05:37] 적용 결과 보기 / [06:36] static정렬과 padding / [06:45] 실행 결과 보기 / [07:37] navbar-inverse / [07:58] 색반전 네비게이션바 / [08:18] 경로를 표시하는 기능 / [09:10] breadcrumb / [10:12] active / [10:23] 경로형태의 리스트 / [11:01] pagination / [11:43] 적용 화면 보기 / [12:39] aria-label, aria-hidden / [13:20] 꺽쇠 기호 / [14:20] 링크를 무산시키는 기능 / [15:21] sr-only / [16:02] 실행 결과 / [16:27] disabled / [17:26] pagination-sm / [17:40] pagination-lg / [17:52] pager / [18:24] 실행 결과 / [18:49] previous, next / [19:37] larr, rarr / [21:00] label 클래스 / [21:08] 적용 화면 / [22:26] Default / [22:31] Primary / [22:55] Success / [23:16] Info / [23:36] Warning / [24:12] Danger / [24:48] 헤딩에 따른 라벨 크기의 자동변화 / [25:52] badge / [26:10] 실행 화면 / [28:14] mt셀렛터 / [29:19] 네비게이션 안에서의 badge클래스 / [29:54] 실행 화면 / [30:10] nav-tabs / [30:30] badge 추가예제

10 점보트론, 페이지 헤더, 썸네일, 경보, 진행바

점보트론, 페이지 헤더, 썸네일, 경보, 진행바에 대해서 알아보고 실습합니다.

35분

책갈피 : [00:01] 부트스트랩에서 제공하는 컴퍼넌트 알아보기 / [00:08] jumbotron / [00:51] 실행 화면 / [01:21] jumbotron 미적용시 실행 화면 / [02:33] container / [03:19] padding / [03:36] page header / [04:45] 실행 화면 / [04:53] thumbnail / [06:57] 적용 결과 / [07:32] 그리드 시스템 / [08:26] 썸네일 유무에 따른 차이 / [08:55] img-responsive / [09:43] active / [09:53] caption / [10:41] 적용 결과 / [10:59] div / [12:11] button / [13:02] heading / [13:20] alert / [13:52] alert-success / [14:44] role / [15:03] 실행 결과 / [16:00] alert-info / [16:49] alert-warning / [17:07] alert-danger / [19:00] alert-link / [19:25] 강조 / [20:12] aria, sr-only / [20:45] alert-dismissibles / [21:14] close / [21:46] 실행 결과 / [22:24] data-dismiss / [22:42] progress / [23:31] container / [23:49] progress-bar / [24:11] aria-value / [26:27] 적용 결과 / [27:53] style 값 / [29:43] progress-bar-success / [29:48] 적용 결과 / [30:03] progress-bar-info / [30:11] progress-bar-warning / [30:21] progress-bar-danger / [30:39] progress-bar-striped / [31:13] 실행 결과 / [33:24] active 클래스 추가 / [33:29] 결과 확인

11 목록그룹

목록 그룹 ul 태그, 목록 그룹 a 태그에 대해 알아보고 실습합니다.

38분

책갈피 : [00:01] 목록 그룹 / [00:48] container / [01:38] 목록 그룹 코드 보기 / [02:01] ul / [02:01] list-group / [02:06] list-group-item / [02:20] 적용 화면 / [03:52] badge / [04:59] active / [05:09] primary / [05:26] disabled / [05:53] 리스트 그룹 / [06:04] 헤딩, p태그, li / [07:19] heading / [07:46] text / [08:52] 실행 결과 / [11:59] 맥락정보를 반영한 시리즈 / [12:53] 맥락정보 사용법 / [13:07] success 적용 결과 / [13:31] info 적용 결과 / [13:50] warning 적용 결과 / [14:01] danger 적용 결과 / [15:59] 기본적인 리스트그룹의 예시 / [16:11] 텍스트에 a테그를 이용한 링크생성 / [16:44] badge / [17:12] inbox 링크 / [19:35] list group / [20:35] 액티브 호버 / [21:38] div / [22:41] list-group-item / [23:02] 오른쪽 정렬 / [23:58] disabled / [25:11] active 적용 / [25:59] h, p테그 활용한 적용 결과 / [27:39] badge를 추가한 적용 결과 / [28:22] span / [29:38] 맥락정보를 두개씩 만들기 / [29:55] list-group-item-success추가 / [31:15] li, active / [31:26] active가 없을때의 실행결과 / [32:05] a태그안에 적용될때의 실행결과 / [33:38] active를 적용한 실행결과 / [34:06] warning을 적용한 실행결과 / [35:04] danger를 적용한 실행결과 / [35:39] active를 추가한 실행결과 / [35:51] bootstrap버전별 차이 / [36:34] 문제해결 방안

12 패널과 미디어 객체

패널 헤딩/패널 푸터와 맥락정보/패널 테이블/패널 목록 리스트와 패널 그룹/웰/동영상-반응형 임베드

1시간 5분

책갈피 : [00:01] panel / [00:25] container / [00:51] panel-body / [01:31] 적용 결과 / [02:44] panel-default를 적용한 결과 / [03:22] panel의 특징과 디자인 살펴보기 / [04:06] 헤더 적용 / [04:56] 실행결과 / [05:28] title / [05:45] h / [06:02] panel-title / [06:41] 적용 결과 / [06:59] small태그 / [07:50] a태그를 적용한 실행 결과 / [09:15] dropdown / [10:01] panel-heading / [10:10] 실행 결과 / [10:52] panel-footer / [12:08] panel-primary / [13:13] primary를 적용한 실행 결과 / [14:34] info를 적용한 실행 결과 / [14:58] success를 적용한 실행 결과 / [15:23] warning을 적용한 실행 결과 / [15:48] danger를 적용한 실행 결과 / [16:15] table 클래스 / [17:54] 코드 보기 / [18:33] thead, tbody / [18:42] 실행 결과 / [19:29] panel-body를 지운 결과값 / [19:50] panel-body를 table아래에 배치한 결과값 / [20:20] table-bordered 추가 / [21:04] table-bordered 유무에 따른 차이 / [21:21] 반응성 / [22:42] responsive가 적용되지 않은 결과 / [23:14] 코드 보기 / [23:46] table-responsive / [24:24] responsive가 적용된 결과 / [25:00] table-bordered를 함께 적용한 결과 / [25:17] body의 위치를 옮긴 결과 / [26:01] panel list / [26:23] panel-collapse / [27:06] 적용 결과 / [27:44] list-group / [28:11] ul태그 / [28:28] list-group-item / [28:45] 실행 결과 / [29:03] active를 적용한 실행 결과 / [29:40] disabled 동작 / [30:54] panel 밖에서의 리스트 그룹 / [31:41] footer를 제거한 결과 / [32:53] ul태그 / [33:14] panel-collapse를 적용한 결과 / [33:47] 맥락정보 클래스를 다르게 적용한 결과 / [34:25] 패널 그룹을 만들어서 패널 감싸기 / [34:52] 가독성 높이기 / [35:20] 미디어 객체 / [36:16] 코드 보기 / [36:33] media-left / [36:37] 링크 이미지 / [36:54] media-body, media-heading / [37:20] 정렬 / [38:16] 정렬을 바꾼 결과 / [40:47] 세로상의 가운데 정렬 / [41:04] media-middle / [41:29] 적용 결과 / [42:13] media-bottom 실행 결과 / [43:08] 댓글 기능 / [43:51] 코드 보기 / [45:16] 계단 모양의 미디어 배치 결과 / [46:40] media-list로 감싼 결과 / [48:13] div와 ul, li 처리의 차이 / [48:37] Well 컴퍼넌트 / [49:53] 코드 보기 / [51:20] sm과 lg / [52:43] well-lg를 추가한 결과 / [54:03] well-sm을 추가한 결과 / [54:52] 인용구 태그 / [55:27] 적용 결과 / [56:47] 반응형 임베드 / [56:52] 임베드를 이용한 동영상 띄우기 / [58:02] 픽셀단위로 기입했을때의 단점 / [58:36] embed-responsive-item / [59:28] ifrmae, video, object / [01:00:15] div 클래스의 중요성 / [01:00:42] 4by3 / [01:01:55] embed를 video로 바꾸는 경우 / [01:02:30] iframe을 적용한 결과 / [01:03:01] 16by9 / [01:04:16] frameborder

13 부트스트랩 자바스크립트(1)

모달 이벤트/드롭다운/스크롤스파이

54분

책갈피 : [00:02] 모달 / [00:25] 얼럿, 대화상자 / [00:52] modal의 동작 / [01:23] 코드 살펴보기 / [01:37] button 생성 / [02:32] open modal / [02:56] modal fade / [03:07] dialog / [03:35] modal 내부 내용 / [03:48] 실행 화면 살펴보기 / [04:30] body와 footer 살펴보기 / [04:39] Close, Save changes / [05:40] fade의 기능 / [06:43] modal size 살펴보기 / [07:20] #myModal-sm, #myModal-lg / [08:51] 실행 결과 / [09:40] 모달의 크기 비교 / [10:21] 그리드 시스템 적용 / [10:36] container-fluid / [11:27] 모달의 옵션 알아보기 / [12:39] remote / [12:53] keyboard옵션 / [13:09] 모달에서의 true와false / [14:02] jQuery코드 활용 / [14:54] script / [15:09] 실행 결과 / [16:21] 체킹과 이벤트 / [17:32] 쪽지를 보내는 내용의 모달 생성구조 / [17:48] 모달작성 순서 / [19:03] data name / [20:45] script 살펴보기 / [22:30] input / [23:16] 실행 화면 / [24:19] 자바스크립트 코드로 dropdown호출하기 / [26:06] dropdown의 이벤트 알아보기 / [27:09] alert / [27:24] 실행 결과 / [28:12] 부모 호출 / [28:47] 아이디로 호출하는 결과 화면 / [29:30] 아이디를 버튼에 넣는 결과값 / [30:50] 두개의 아이디로 실행하는 결과값 / [32:40] scroll spy의 기능 / [34:06] 네비게이션바 코드 보기 / [34:28] data-spy / [34:38] data-target / [35:29] id링크 / [35:59] 헤더 / [37:13] offset / [37:53] offset이 0인경우의 결과 확인 / [39:21] offset에 숫자할당한 결과 확인 / [40:22] offset수치를 변경한 결과 확인 / [41:27] 바디전체에 scroll spy를 적용하는 코드 / [42:50] navbar-fixed-top / [43:42] 실행 결과 / [44:03] padding 수치 변경 / [45:12] position:relative / [46:55] target / [48:43] refresh 메소드 / [49:39] 실행 결과 / [50:55] refresh 메소드의 사용법 / [51:35] active 이벤트 / [52:13] alert로 active를 띄운 결과값

14 부트스트랩 자바스크립트(2)

작동하는 탭/탭 컨트롤/탭 이벤트/경보 닫기

34분

책갈피 : [00:02] 탭에 대해서 다뤄보기 / [00:14] 탭의 기본 구성 / [00:55] active / [01:32] 코드 보기 / [02:07] 탭과 컨텐츠의 상호작용 알아보기 / [02:20] 언오더드 리스트 태그 / [03:21] id부여 / [03:41] home / [04:12] data-togggle / [04:56] id가 연결되는 부분 / [05:37] tab-content, tab-pane / [06:22] active사용시 확인사항 / [07:53] data-toggle탭의 기능 / [09:27] script영역의 탭 컨트롤 / [09:51] id를 이용한 특정탭 활성화 / [10:17] 실행 결과 / [11:25] a:first / [12:04] 홈 탭 활성화 확인 / [12:40] a:last / [14:14] 알약형 디자인 / [14:26] nav-pills / [15:22] 실행 결과 / [15:40] tab-content / [16:15] fade를 적용한 화면 / [17:19] 모든 탭에 fade를 적용한 화면 / [17:51] active와 fade를 함께 쓰는 경우 / [18:22] fade in / [18:34] 이벤트 알아보기 / [18:56] e.target / [20:03] 실행 결과 / [20:44] shown / [21:51] hide, hidden의 차이 / [23:07] hide 실행결과 / [24:51] hidden 실행결과 / [25:58] 경보(alert) / [27:33] 코드 살펴보기 / [28:02] close / [29:01] fade in / [29:26] data-dismiss / [30:44] script를 통해서 alert를 컨트롤 하기 / [31:52] 실행 결과 / [32:04] 이벤트 / [33:29] closed

15 부트스트랩 자바스크립트(3)

툴팁/토글 버튼

33분

책갈피 : [00:01] 툴팁 / [00:56] 코드 보기 / [01:00] a태그 / [01:18] # / [01:34] data-toggle="tooltip" / [02:23] script에 지정하는 방법 / [03:36] text의 길이가 0일 경우 / [04:13] 툴팁을 컨트롤하는 요소 / [05:09] 툴팁의 방향 설정 / [05:31] 코드 보기 / [05:36] data-placement / [05:44] bottom / [06:12] right / [06:56] left, top 실행 결과 / [07:16] 버튼에 툴팁 적용하기 / [08:20] 실행 결과 / [08:37] 툴팁 사용시 주의사항 / [09:39] disabled 적용결과 / [10:13] div와 span / [10:44] 실행 결과 / [11:24] 다른 자바스크립트 요소와 툴팁의 다른점 / [12:04] 트리거 / [12:52] click / [13:16] 실행 결과 / [14:13] hover / [15:08] delay / [16:00] 실행 결과 / [16:45] delay값 변환 결과 / [17:39] 애니메이션 옵션 / [18:42] data-animation / [19:35] 메소드 살펴보기 / [19:57] show / [20:35] hide / [21:34] 토글 메소드 실습 / [22:48] primary를 적용한 토글버튼 생성 / [23:45] 실행 결과 / [24:56] destroy / [25:42] 실행 결과 / [26:40] 이벤트 알아보기 / [28:30] 스크립트 메소드를 통한 이벤트 실행 / [29:59] shown / [30:34] hide / [32:13] hidden

16 부트스트랩 자바스크립트(4)

툴팁/팝오버

33분

책갈피 : [00:03] html 옵션 / [00:21] 툴팁 코드 보기 / [00:32] html 코드 인식 / [01:29] 코드 작성시 주의점 / [01:38] 코드 안의 코드 / [02:07] 쌍따옴표와 호따옴표 / [02:58] 실행 결과 / [03:27] h2 적용 / [04:13] 팝오버 / [04:38] 팝오버와 툴팁의 차이점 / [05:25] 툴팁과 팝오버의 기본설정 / [05:41] 팝오버 코드보기 / [05:59] data-toggle / [06:20] 팝오버의 추가적인 데이터컨텐츠 / [06:39] 컨텐츠가 없을때의 실행결과 / [07:11] 툴팁의 성능상 문제 / [07:55] 링크 / [08:39] js 파일 / [09:52] 실행 결과 / [10:38] 팝오버의 방향옵션 / [11:08] 코드 보기 / [11:32] 버튼에 방향 할당 / [12:30] 다른 옵션 살펴보기 / [13:38] trigger / [13:59] focus와 hover를 적용한 결과 / [15:50] click과 hover focus 실행 결과 / [16:17] title과 data-content의 차이점 / [16:54] 팝오버 메소드 / [17:12] show_button / [17:16] 코드 보기 / [17:27] script / [18:24] 실행 결과 / [19:04] hide, destroy, toggle / [19:26] 버튼 만들기 / [19:43] 메소드 생성 / [19:56] 실행 결과 / [20:49] 상태 반전 / [21:45] 파괴 / [22:17] show, hidden 이벤트 코드보기 / [22:53] 실행 결과 / [24:38] destroy 사용시 주의사항 / [25:15] shown, hidden / [25:44] 실행 결과 / [26:21] destroy후의 결과 / [26:38] hide, hidden / [26:48] 실행 결과 / [27:34] hide의 동작 / [27:55] toggle의 동작 / [29:05] hidden 실행

17 부트스트랩 자바스크립트(5)

버튼/체크박스/싱글 토글/Collapse

33분

책갈피 : [00:01] 버튼 알아보기 / [00:32] 버튼 플러그인 / [01:25] 코드 보기 / [02:01] data-loading-text / [02:34] script 보기 / [02:59] loading / [03:19] delay / [03:46] reset / [04:14] 체크박스 버튼 / [04:50] active / [04:57] checked 속성 / [05:15] btn-group / [05:41] label / [06:34] 선점된 항목 / [06:46] 시각적 표현 / [07:16] data-toggle="buttons" / [08:34] autocomplete="off" / [09:32] script / [09:54] 라디오 버튼 / [10:13] 코드 수정 / [10:21] checked, active / [10:39] name값 / [10:55] id값 / [11:38] 실행 결과 / [12:05] radio와 checkbox의 차이점 / [12:46] 버튼 플러그인 요소 / [13:16] 단일 토글 / [13:30] data-toggle="button" / [13:46] aria-pressed="false" / [14:04] 실행 / [14:45] 포커스 해제 / [15:24] active상태의 토글 / [15:53] 실행화면 확인 / [16:15] 메소드와 스크립트로 토글 기능구현 / [17:26] toggle메소드 / [17:47] 실행 결과 / [18:44] data string 메소드 / [19:43] script 영역 살펴보기 / [20:34] 실행 결과 / [21:09] data의 text값 / [22:21] reset메소드 / [22:47] 실행 결과 / [23:09] collapse 알아보기 / [23:54] collapse의 요소 / [24:24] 링크 / [25:09] 코드 보기 / [25:15] panel-group / [25:43] accordion / [25:47] data-parent / [25:56] panel div / [26:56] heading / [27:17] data-toggle="collapse" / [29:27] panel-body / [30:06] panel-collapse / [30:31] collapse in / [30:41] 실행 화면

18 부트스트랩 자바스크립트(6)

버튼 생성 방법/아코디언/Carousel

32분

책갈피 : [00:04] 버튼을 만드는 방법 / [00:32] 버튼 태그를 사용한 버튼 / [01:03] 링크와 데이터 타겟 / [01:54] 코드 보기 / [01:58] a태그와 버튼 태그 / [02:40] data-target과 href / [03:09] 연결 방식의 차이 / [03:59] 아코디언 예제 / [04:19] href / [05:08] default값이 발동되는 경우 / [05:53] data-parent의 역할 / [06:27] data-parent의 기본값 / [07:03] 실행 결과 / [08:48] data toggle 옵션 / [08:55] 메소드를 이용한 collapse호출 / [09:53] toggle_button / [10:24] 실행 결과 / [11:12] 메소드 테스트 / [11:18] show_button, hide_button 추가 / [11:33] script / [11:44] 실행 화면 / [12:47] 이벤트의 종류 / [13:12] alert / [13:31] 실행 결과 / [14:22] 이벤트 발생 시점 / [15:40] show, shown, hide발동 / [16:05] carousel 알아보기 / [16:38] 코드 살펴보기 / [16:47] indicator / [17:09] data-slide-to / [17:20] data-target / [17:40] carousel-inner / [18:16] 유의사항 / [18:37] 컨트롤 부분 / [18:48] href / [19:04] prev, next / [19:40] 캡션 / [20:12] 실행 결과 / [20:52] 정렬 / [21:20] data-interval / [22:45] pause / [23:18] wrap / [24:18] carousel의 메소드 알아보기 / [24:49] cycle / [25:26] number / [26:12] prev, next / [26:38] 실행 결과 / [28:23] carousel의 이벤트 살펴보기 / [28:30] slide, slid / [29:11] 실행 결과 / [29:56] 메뉴에 관한 플러그인 / [30:24] 코드보기 / [30:25] data-spy="affix" / [30:34] data-offset-top, data-offset-bottom / [31:30] 주의 사항

19 부트스트랩 탬플릿(1)

부트스트랩 탬플릿에 대해 학습합니다.

29분

책갈피 : [00:03] bootstrap에서 제공하는 템플릿 / [00:18] starter template / [00:36] 헤더 / [00:53] 바디 / [00:59] 네비게이션 / [01:36] 본문 / [01:58] starter-template / [02:10] 추가된 css / [02:27] 구현 화면 / [03:10] starter.css / [04:15] css부분 삭제후 실행 / [04:55] 네비게이션바 코드 보기 / [05:05] navbar-inverse / [05:18] navbar-fixed-top / [05:30] 네비게이션바 내부 구조 / [06:12] collapse / [07:20] jumbotron / [08:52] 코드 보기 / [09:23] 네비게이션바 내부 구조 / [09:53] form-group / [10:01] submit / [10:42] 추가된 css파일 링크 / [10:48] jumbotron.css / [11:13] jumbotron클래스 펼쳐보기 / [11:49] 적용 화면 / [12:34] css파일 열어보기 / [13:17] style태그 / [15:02] 추가css클래스 적용, 제거 / [16:23] 부트스트랩 뷰 크기수정 예시 / [17:30] 기본html코드 살펴보기 / [17:41] container 내부 구조 / [17:58] 헤더 / [18:07] nav-pills / [18:54] jumbotron 내용 / [19:13] row marketing / [20:30] 축소한 화면 보기 / [21:18] css코드 열어보기 / [21:42] 바디 / [21:34] jumbotron-narrow.css 열기 / [23:02] 적용 결과 / [23:27] 헤더 / [23:56] h3의 크기 변경 / [25:20] 미디어 쿼리 / [26:09] 적용 결과 / [28:08] marketing클래스의 마진 조절

20 부트스트랩 탬플릿(2)

부트스트랩 탬플릿에 대해 학습합니다.

20분

책갈피 : [00:01] 템플릿을 이용한 블로그 만들기 / [00:51] 코드 보기 / [01:37] blog-header / [01:59] blog-main, blog-sidebar / [02:50] col-sm-8 / [03:20] extra small 사이즈일 경우 / [03:43] blog-sidebar / [04:23] 흥미로운 요소 / [04:41] blockquote / [04:55] code / [05:23] pager / [06:11] sidebar 부분 살펴보기 / [07:03] list-unstyled / [07:28] back to top / [08:03] carousel이 들어간 템플릿 / [08:30] 코드 보기 / [09:27] carousel.css 열기 / [09:49] navbar-wrapper / [10:47] 적용 결과 / [11:50] marketing / [12:23] font / [12:48] 디자인 클래스 / [12:50] 미디어 쿼리 / [14:34] dashboard / [15:55] 코드 보기 / [16:29] sidebar, main / [17:09] offset / [17:27] offset이 없는 실행 결과 / [17:53] nav-sidebar / [18:20] 컨텐츠 부분 코드 보기 / [18:52] row placeholders / [19:46] table-responsive

샘플확인 : 알지오 검색후 -> 강의검색란 -> 부트스트랩