반응형웹 + 부트스트랩 [전문과정]

강좌구성
(35강) 전체 : 25시간 17분|평균 : 43분20초

수강기간
2개월

전문강사
알지오 R&D [IT]

반응형웹 + 부트스트랩 인강 평생교육원 교육 안내
반응형웹 [전문과정]은 알지오에서 배출된 웹퍼블리셔들의 요청에 의해 제작된 강의로, 전문가를 위한 강의입니다. 반응형웹은 많은 웹사이트를 제작해보고 분석해봐야 완벽해질 수 있기 때문에 실제 전문가들이 제작한 웹사이트를 대상으로 강의를 진행합니다.

01.41분 반응형 웹 제작 핵심기술
기본만 알아도 완벽한 구현이 가능합니다.

책갈피[00:35] 강의전 알아야 할 점/[03:07] 참고로 알아야 할 점/[05:00] 뷰 포트 속성 설명/[07:38] 브라우저나 기기에 따라 사이즈 다르게 하는 방법/[09:03] media all/[11:18] 디바이스 최대, 최소 높이 정의/[17:03] 실무에 사용되는 웹 페이지 다루기/[21:18] 컨테이너 입력/[24:10] div 선언/[29:37] 로고 설정/[34:27] 잘못된 경우/[38:52] 이미지 width 값 설정
반응형 웹 제작실무
02.48분 실제적용 사례 CSS실무코딩 1
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

책갈피[00:07] 웹사이트 보기/[01:06] 소스 확인/[06:57] 좌우 여백이 생겼다가 없어지는 이유/[10:50] 이미지 일부분만 보이게 변경하는 방법/[16:41] 우측 메뉴/[20:07] 삼단계 변경 설명/[24:47] 텍스트 부분 소스 보기/[27:45] pc 사이즈일 경우/[31:03] 10 픽셀로 수정 후 확인/[34:12] 배경 컬러가 흰색인 이유/[37:15] 기본 패딩값 확인
03.38분 실제적용 사례 CSS실무코딩 2
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

책갈피[00:07] 웹사이트 보기/[01:06] 소스 확인/[06:57] 좌우 여백이 생겼다가 없어지는 이유/[10:50] 이미지 일부분만 보이게 변경하는 방법/[16:41] 우측 메뉴/[20:07] 삼단계 변경 설명/[24:47] 텍스트 부분 소스 보기/[27:45] pc 사이즈일 경우/[31:03] 10 픽셀로 수정 후 확인/[34:12] 배경 컬러가 흰색인 이유/[37:15] 기본 패딩값 확인
04.53분 실제적용 사례 CSS실무코딩 3
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

책갈피[01:18] 웹 사이트 보기/[02:23] lt로 돼 있을 경우/[04:15] 네비게이션 태그 보기/[10:01] 토글 스트림 확인/[12:28] 소스에서 주목해야 할 점/[16:17] 상단 공백 부분/[21:33] stream/[23:52] 전체 설명/[28:03] content-head 값 확인/[35:42] bottom 값 보기/[39:27] 이미지가 커진 이유/[41:21] 따로 설정해야할 부분/[51:52] 카피라이트 부분
05.32분 실제적용 사례 CSS실무코딩 4
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

책갈피[00:04] 홈페이지 살펴보기/[01:23] link href/[03:14] 배경값/[06:59] div id=mobile-header/[09:35] 모바일 헤더 아래 로고 불러오기/[11:35] div class=wrapper/[13:56] absolute 제거 했을 경우/[17:03] 내부 여백 확인/[20:07] 배너 이미지/[25:00] 홈페이지 하단/[29:37] gutter-horiz-in/[31:15] span class=logo alt
06.1시간 18분 실제적용 사례 CSS실무코딩 5, 6
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

책갈피[00:58] 소스 보기//[05:30] id 값과 css값 보기/[08:13] 차이가 margin-bottom 일 경우/[11:31] 로고 애니메이션 효과 확인/[18:59] 오퍼시티 값/[22:15] 이미지 애니메이션 효과 확인/[28:30] 백그라운드 이미지/[31:00] 와이드 화면이 아닐 경우/[38:58] 모바일 화면일 경우/[43:51] 기본 스텐다드 확인/[48:44] content/[54:36] 폰트 사이즈/[62:37] 패딩 값 수정 후 확인/[72:00] 홀수일 경우에만 백그라운드 컬러 지정/[76:00] footer 사항
07.54분 실제적용 사례 CSS실무코딩 7
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

책갈피[00:15] 웹사이트 살펴보기/[05:00] 기본 선언/[09:46] 기본 pc일 경우 적용 사항/[15:39] 일반 텍스트에 적용되는 컬러값/[20:52] serious/[23:37] 그림자/[27:18] 모바일일 경우 에프터에 대한 선언/[33:45] section class=group/[39:07] div class=reasons/[42:37] 내부 텍스트 값/[45:52] actions li/[47:29] nav class=conditions/[52:09] 이미지
08.59분 실제적용 사례 CSS실무코딩 8
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

책갈피[01:59] 주의 할 부분/[05:00] 웹사이트 모바일로 함축/[07:15] 위치, width 값 확인/[09:05] a 링크-pc 사이즈일 경우/[11:43] 이미지 css 확인/[15:35] 평상시 li 값 알아보기/[27:02] 바 부분/[34:37] 기본 설정 파일 셋팅/[45:07] 태블릿일 경우 변경 사항/[48:07] div class=svtnit-1 svtnit-1-2/[57:52] 태블릿일 경우/[59:06] 요약
09.1시간 6분 실제적용 사례 CSS실무코딩 9
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

책갈피[01:02] media=screen, projection/[05:27] div class=page/[11:31] 로고 이미지/[13:52] 일반 pc일 경우/[17:44] 달라진 li 값 확인/[22:40] 기본 스텐다드 사항 확인/[28:45] p 태그 확인/[30:03] 로그인 창/[40:58] 텍스트 소스 확인/[43:52] 추가 적용된 사항/[56:27] img class=img_opa/[62:43] li 태그 확인/[64:25] 추가적인 팁
10.45분 실제적용 사례 CSS실무코딩 10
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

책갈피[01:15] div class=wrapper/[04:12] div id=header-main/[09:03] 변경된 패딩값 확인/[15:20] div id=menu class=hamburger/[18:07] 웹페이지 몸통 부분/[20:02] 특이한 점/[25:22] section id=advert/[28:59] 마진 값 수정/[30:00] 없어지는 사항/[34:15] 차이 알아보기/[40:49] ul 목록/[43:37] 백그라운드 이미지 부분 확인
11.38분 실제적용 사례 CSS실무코딩 11, 12
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

책갈피[00:07] 웹사이트 확인/[05:15] 화면이 줄어들었을 경우/[08:15] 태블릿 이하 적용 사항 확인/[10:33] 변경 사항 확인/[12:56] div id=illustration-parts/[14:18] 버튼/[17:52] 첫번째 섹션 확인/[23:51] div id=partners/[29:15] 2페이지 보기/[36:29] 내용이 두줄이 될 경우
12.45분 실제적용 사례 CSS실무코딩 13
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

책갈피[00:24] div id=testata/[06:41] 대 화면 로고 css 확인/[13:18] 메뉴가 두줄이 됐을 경우/[16:33] li에 a가 있을 경우/[20:07] div id=lingue/[21:59] div의 ul 목록/[23:56] css 정의 확인/[27:51] 와이드일 경우/[30:00] div class=left_home/[34:51] 이미지가 pc 버전에서 오버되는 이유/[36:22] div id=news_home/[40:30] 기본 셋팅 확인/[44:06] pc 버전 이하 내용
13.42분 실제적용 사례 CSS실무코딩 14
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

책갈피[00:01] 웹페이지 확인/[05:29] div class=externalWrap/[08:39] li 확인/[10:28] 아이콘 부분/[12:58] nth-of-type/[17:06] p class=header-single-link/[22:47] 기본적인 input에 대한 선언/[32:37] li 내부에 이미지가 있을 경우/[35:21] fieldset/[40:07] 백그라운드 이미지
14.1시간 16분 실제적용 사례 CSS실무코딩 15
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

책갈피[00:05] 웹페이지 확인/[06:39] li 값 기본 사항/[10:22] ul class=tbar-right/[17:59] 좌표/[25:56] input 확인/[37:22] li 태그의 열쇠/[45:37] 이미지가 변경됐을 때/[50:00] 텍스트 사이즈/[54:30] 간과하지 말아야 할 점/[59:44] 패딩값/[66:26] h1 적용사항 확인/[74:30] 카피라이트
15.1시간 6분 실제적용 사례 CSS실무코딩 16
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

책갈피[02:53] 마진값 제거 후 확인/[06:00] 모바일일 경우/[09:58] div class=nav-collapse collapse/[14:41] li 목록 확인/[24:41] button type=button/[32:07] tickets& shows/[43:21] 화면에 따른 폰트 사이즈 변경 확인/[50:57] section id=content/[59:14] aside id=side bar/[65:43] 우측 하단 내용
[전문가 skillup]
16.56분 실제적용 사례 CSS실무코딩 17
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

책갈피[00:08] 웹페이지 확인/[05:46] 평상시 백그라운드 포지션/[12:01] 외부 여백 확인/[14:43] 새 웹페이지 확인/[19:55] 해당 css에 h1이 있을경우/[22:52] ul id=nav/[30:45] 보더값/[38:20] 평상시 최소높이/[44:21] div class=inner/[52:07] 컬럼 카운트 확인
17.52분 실제적용 사례 CSS실무코딩 18
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

책갈피[00:05] 웹페이지 확인/[02:06] min-width 확인/[07:28] a id=back-home/[12:05] 이미지/[14:43] 아이콘 소스 보기/[17:14] 주목해야할 부분/[20:18] 변수 확인/[25:18] 외부 여백 확인/[31:41] h1에 대한 태그/[36:00] div id=secondary/[39:35] 사이즈 확인/[42:34] colophon.signup/[44:14] div class=item/[48:58] colophon.nav li/[49:37] 차이점/[50:22] div class=mission/[51:14] 차이점
18.1시간 32분 실제적용 사례 CSS실무코딩 19, 20, 21
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

책갈피[01:19] body id=Home class=no-js/[05:00] div id=ToolbarWrapper/[15:03] rss 정의 부분 확인/[23:18] ul에 대한 선언 알아보기[28:33] 변경된 li 사항/[34:37] div class=featureText/[39:37] div class=entry-meta-wrapper/[42:20] 텍스트 선언 확인/[53:07] 카피라이트 부분/[62:45] 제목글에 h4가 있을 때/[70:08] 새로운 웹페이지 보기/[75:00] 로고 뒤 이미지/[90:33] 넓이값
19.1시간 8분 실제적용 사례 CSS실무코딩 22
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

책갈피[00:46] 일반 body 설정사항 확인/[05:43] 네비게이션 태그/[07:00] 평상시 컬러값과 폰트 사이즈 확인/[11:11] 반영 안되는 사항/[17:37] hgroup/[27:41] 화면 줄었을 경우 기본 정의사항/[31:40] introduction img 일반적 사항/[42:04] li 별도 선언 값 확인/[54:15] 주석 처리 부분 제거/[59:37] 포지션 정의 부분/[61:37] 퍼센트 정의 부분/[67:46] 팁
20.1시간 20분 워드프레스와 반응형웹
반응형웹을 지원하는 워드프레스의 Twenty Twelve 테마, Twenty Fourteen 테마, Twenty Thirteen 테마, Twenty Eleven 테마를 활용해 코딩 실습을 진행합니다.

책갈피[00:06] 워드프레스의 반응형 웹/[03:07] 전체 내용 페이지 소스 확인/[09:13] 문제점/[12:37] 버튼 요소 확인/[17:52] 컬러 추가/[23:36] site-header/[32:22] 메뉴 단축 버튼/[36:15] secondary/[42:28] list-view.site-content.hentry/[46:05] 마우스 오버시 메뉴 차이점/[55:45] site-header.home-link/[58:30] clip/[66:30] 위젯 차이 확인/[71:00] 링크 값/[78:02] supplementary.two.widget-area
[Bootstrap]
21.30분 부트스트랩 시작
부트스트랩 셋팅, 그리드 시스템, container-fluid, h1~h6, small, mark, abbr, blockquote, blockquote-reverse, code, pre, kbd

책갈피[00:22] 다운로드/[01:40] 주석처리/[02:30] 서버 실행/[03:31] container 정의/[06:38] 그리드 시스템 설치/[08:15] menu 넓이 조정/[10:32] font-size/[15:57] 인용구(blockquote)/[17:42] 코드 태그/[19:19] .display (block)/[20:18] text-muted/[20:44] 배경
22.24분 테이블, 이미지
p태그, class=lead, tr 태그, col-md-2, page-header, class=close, data-dismiss=alert, fade in, class=btn

책갈피[00:13] p태그/[03:40] text-transform/[08:22] img-rounded/[12:33] 반응형웹/[15:49] alert alert-success/[18:35] fade in/[20:09] 버튼 스타일/[21:07] btn-link
23.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/[02:06] btn-default/[04:29] 그룹화/[07:51] a link/[09:21] 주석처리/[14:28] dropdown-toggle/[19:20] label/[20:14] default 처리
24.22분 progress bar, pagination, breadcrumb, list-group, panel
progress bar, pagination, breadcrumb, list-group, panel

책갈피[03:09] progress-bar-striped/[05:37] 미디어 쿼리 반영/[10:29] pager/[15:23] float값 (right)/[18:05] list-group-item-text/[21:56] panel-heading
25.23분 panel-group, dropdown, dropup, nav
panel-group, dropdown, dropup, nav

책갈피[00:25]panel-group/[01:17]드롭다운,토글만들기/[06:59]class="disabled"/[12:15] panel=group collapse/[18:54] class="nav"/[21:55] tab-pane fade in active
26.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/[07:33] right! important/[09:07] glyphicon glyphicon-log-in/[14:12] btn btn-default/[21:53] disabled/[24:56] form-control input-sm
27.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"/[03:22] data-target="#next"/[05:10] div class="carousel-inner"/[08:39] style 시트 삽입/[10:40] href="#next"/[15:29] input type 버튼 생성/[17:34] modal fade 정의/[23:46] 토글값 변수 정의
28.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"/[05:07] opacity/[08:07] 스크롤/[09:06] navbar-fixed-top/[13:13] 응용/[16:33] 기기별 화면 비율 확인/[18:36] col-sm-4, col-sm-8/[21:01] style='top: 10px;'/[24:28] offset
29.26분 affix, 버튼, 팝업, 롤링배너
affixed.bs.affix, 메뉴 고정, data-spy, 애니메이션 설정방법, 경고 메시지, data-dismiss, close.bs.alert, 버튼에 액션 부여, 버튼 reset 기능, 버튼 내용 변경하기, 버튼 색상 변경하기, 롤링 배너 속도 변경하기, carousel slide 정의, interval 설정, 롤링 반복작업 설정, 순환 사이클 설정, 팝업 띄우기

책갈피[00:04] affixed.bs.affix/[04:42] 애니메이션 설정방법/[06:06] 경고 메시지/[07:12] 변수명 정의/[10:46] 함수 실행/[17:47] 롤링 배너 속도 변경하기/[23:02] 순환 사이클 설정
30.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] 함수 만들기/[03:13] collapse('show')/[07:54] data-target/[11:38] 클릭시 스타일시트 적용/[15:16] show.bs.dropdown/[19:51] 보일 때 버튼내용 바꾸기/[24:39] 부모 요소, 자식 요소
31.23분 경고, 알림 메세지
show.bs.model, hidden.bs.model, popover, popover-title, popover-content, 나만의 스타일 시트 만들기, charset 설정, mainNav, navbar-fixed

책갈피[00:08] 실행시 알림 출력하기/[03:51] id 찾기/[05:35] delay/[08:58] selector/[10:25] trigger:"click"/[12:12] .popover 테두리 설정/[17:10] 실습예제 결과보기/[20:03] 부트스트랩의 강점/[21:04] nav 태그
32.30분 부트스트랩 페이지 수정 (상단 메뉴)
navbar, navbar-default, container-fluid, navbar-brand, navbar-right

책갈피[00:00] navbar/[03:00] @media/[07:21] border-color 변경/[11:15] 메뉴 스타일/[14:17] pc환경 스타일 확인/[17:52] 알파값 변경/[24:27] Menu 버튼 display/[26:27] Menu 버튼 클릭시 메뉴 나오기/[28:32] .nav>l
33.29분 부트스트랩 페이지 수정 (본문)
header-content, page-scroll, section, container

책갈피[00:30] 메뉴 추가/[03:18] -webkit-, -ms-/[06:15] header-content-inner 스타일/[11:01] @media 아닐때 header 스타일/[15:53] 책갈피 링크/[18:14] 애니메이션 속도 조절/[25:19] :after, :before/[29:14] h2
34.25분 부트스트랩 페이지 수정 (분문, 포트폴리오)
section-heading, services, container, col-md, 아이콘 변경, text-muted, container-fluid, popup-gallery, portfolio-box

책갈피[00:00] section-heading/[03:34] btn-xl/[07:13] section-heading/[10:49] service-box/[15:10] text-primary/[19:00] service-box/[21:49] 개별 갤러리/[24:26] porfolio-box:hover
35.30분 부트스트랩 페이지 수정 (포트폴리오,하단 메뉴)
carousel-inner, portfolio-box-caption, bg-dark

책갈피[00:09] img/[03:28] Project Name 색상변경/[07:15] text-faded/[12:01] h2/[16:23] mfp-zoom-out-cur/[21:33] mfp-zoom-out-cur/[26:25] mfp-arrow/[29:05] $('body, html').css('overflow','hidden')/[29:33] 닫기버튼