반응형웹 + 부트스트랩 [전문과정] 강의 기초 부터 실무인강 알지오 IT전문교육

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

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

이용기간/강사
2개월 / 알지오 R&D [IT]

수강료
370,000원
185,000원

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

단기 습득!

2년 연속 IT교육 인강부분 1위 알지오 (근거자료)

2003년부터 운영해온 수많은 데이터베이스를 기반으로

단기 습득할 강의

로 제공합니다!
늦지 않았습니다. 알지오에서 지금부터 시작하세요!

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

강의전 알아야 할 점/참고로 알아야 할 점/뷰 포트 속성 설명/브라우저나 기기에 따라 사이즈 다르게 하는 방법/media all/디바이스 최대, 최소 높이 정의/실무에 사용되는 웹 페이지 다루기/컨테이너 입력/div 선언/로고 설정/잘못된 경우/이미지 width 값 설정
반응형 웹 제작실무
02.48분 실제적용 사례 CSS실무코딩 1
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

웹사이트 보기/소스 확인/좌우 여백이 생겼다가 없어지는 이유/이미지 일부분만 보이게 변경하는 방법/우측 메뉴/삼단계 변경 설명/텍스트 부분 소스 보기/pc 사이즈일 경우/10 픽셀로 수정 후 확인/배경 컬러가 흰색인 이유/기본 패딩값 확인
03.38분 실제적용 사례 CSS실무코딩 2
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

웹사이트 보기/소스 확인/좌우 여백이 생겼다가 없어지는 이유/이미지 일부분만 보이게 변경하는 방법/우측 메뉴/삼단계 변경 설명/텍스트 부분 소스 보기/pc 사이즈일 경우/10 픽셀로 수정 후 확인/배경 컬러가 흰색인 이유/기본 패딩값 확인
04.53분 실제적용 사례 CSS실무코딩 3
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

웹 사이트 보기/lt로 돼 있을 경우/네비게이션 태그 보기/토글 스트림 확인/소스에서 주목해야 할 점/상단 공백 부분/stream/전체 설명/content-head 값 확인/bottom 값 보기/이미지가 커진 이유/따로 설정해야할 부분/카피라이트 부분
05.32분 실제적용 사례 CSS실무코딩 4
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

홈페이지 살펴보기/link href/배경값/div id=mobile-header/모바일 헤더 아래 로고 불러오기/div class=wrapper/absolute 제거 했을 경우/내부 여백 확인/배너 이미지/홈페이지 하단/gutter-horiz-in/span class=logo alt
06.1시간 18분 실제적용 사례 CSS실무코딩 5, 6
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

소스 보기//id 값과 css값 보기/차이가 margin-bottom 일 경우/로고 애니메이션 효과 확인/오퍼시티 값/이미지 애니메이션 효과 확인/백그라운드 이미지/와이드 화면이 아닐 경우/모바일 화면일 경우/기본 스텐다드 확인/content/폰트 사이즈/패딩 값 수정 후 확인/홀수일 경우에만 백그라운드 컬러 지정/footer 사항
07.54분 실제적용 사례 CSS실무코딩 7
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

웹사이트 살펴보기/기본 선언/기본 pc일 경우 적용 사항/일반 텍스트에 적용되는 컬러값/serious/그림자/모바일일 경우 에프터에 대한 선언/section class=group/div class=reasons/내부 텍스트 값/actions li/nav class=conditions/이미지
08.59분 실제적용 사례 CSS실무코딩 8
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

주의 할 부분/웹사이트 모바일로 함축/위치, width 값 확인/a 링크-pc 사이즈일 경우/이미지 css 확인/평상시 li 값 알아보기/바 부분/기본 설정 파일 셋팅/태블릿일 경우 변경 사항/div class=svtnit-1 svtnit-1-2/태블릿일 경우/요약
09.1시간 6분 실제적용 사례 CSS실무코딩 9
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

media=screen, projection/div class=page/로고 이미지/일반 pc일 경우/달라진 li 값 확인/기본 스텐다드 사항 확인/p 태그 확인/로그인 창/텍스트 소스 확인/추가 적용된 사항/img class=img_opa/li 태그 확인/추가적인 팁
10.45분 실제적용 사례 CSS실무코딩 10
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

div class=wrapper/div id=header-main/변경된 패딩값 확인/div id=menu class=hamburger/웹페이지 몸통 부분/특이한 점/section id=advert/마진 값 수정/없어지는 사항/차이 알아보기/ul 목록/백그라운드 이미지 부분 확인
11.38분 실제적용 사례 CSS실무코딩 11, 12
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

웹사이트 확인/화면이 줄어들었을 경우/태블릿 이하 적용 사항 확인/변경 사항 확인/div id=illustration-parts/버튼/첫번째 섹션 확인/div id=partners/2페이지 보기/내용이 두줄이 될 경우
12.45분 실제적용 사례 CSS실무코딩 13
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

div id=testata/대 화면 로고 css 확인/메뉴가 두줄이 됐을 경우/li에 a가 있을 경우/div id=lingue/div의 ul 목록/css 정의 확인/와이드일 경우/div class=left_home/이미지가 pc 버전에서 오버되는 이유/div id=news_home/기본 셋팅 확인/pc 버전 이하 내용
13.42분 실제적용 사례 CSS실무코딩 14
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

웹페이지 확인/div class=externalWrap/li 확인/아이콘 부분/nth-of-type/p class=header-single-link/기본적인 input에 대한 선언/li 내부에 이미지가 있을 경우/fieldset/백그라운드 이미지
14.1시간 16분 실제적용 사례 CSS실무코딩 15
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

웹페이지 확인/li 값 기본 사항/ul class=tbar-right/좌표/input 확인/li 태그의 열쇠/이미지가 변경됐을 때/텍스트 사이즈/간과하지 말아야 할 점/패딩값/h1 적용사항 확인/카피라이트
15.1시간 6분 실제적용 사례 CSS실무코딩 16
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

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

웹페이지 확인/평상시 백그라운드 포지션/외부 여백 확인/새 웹페이지 확인/해당 css에 h1이 있을경우/ul id=nav/보더값/평상시 최소높이/div class=inner/컬럼 카운트 확인
17.52분 실제적용 사례 CSS실무코딩 18
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

웹페이지 확인/min-width 확인/a id=back-home/이미지/아이콘 소스 보기/주목해야할 부분/변수 확인/외부 여백 확인/h1에 대한 태그/div id=secondary/사이즈 확인/colophon.signup/div class=item/colophon.nav li/차이점/div class=mission/차이점
18.1시간 32분 실제적용 사례 CSS실무코딩 19, 20, 21
반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

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

일반 body 설정사항 확인/네비게이션 태그/평상시 컬러값과 폰트 사이즈 확인/반영 안되는 사항/hgroup/화면 줄었을 경우 기본 정의사항/introduction img 일반적 사항/li 별도 선언 값 확인/주석 처리 부분 제거/포지션 정의 부분/퍼센트 정의 부분/팁
20.1시간 20분 워드프레스와 반응형웹
반응형웹을 지원하는 워드프레스의 Twenty Twelve 테마, Twenty Fourteen 테마, Twenty Thirteen 테마, Twenty Eleven 테마를 활용해 코딩 실습을 진행합니다.

워드프레스의 반응형 웹/전체 내용 페이지 소스 확인/문제점/버튼 요소 확인/컬러 추가/site-header/메뉴 단축 버튼/secondary/list-view.site-content.hentry/마우스 오버시 메뉴 차이점/site-header.home-link/clip/위젯 차이 확인/링크 값/supplementary.two.widget-area
[Bootstrap]
21.30분 부트스트랩 시작
부트스트랩 셋팅, 그리드 시스템, container-fluid, h1~h6, small, mark, abbr, blockquote, blockquote-reverse, code, pre, kbd

다운로드/주석처리/서버 실행/container 정의/그리드 시스템 설치/menu 넓이 조정/font-size/인용구(blockquote)/코드 태그/.display (block)/text-muted/배경
22.24분 테이블, 이미지
p태그, class=lead, tr 태그, col-md-2, page-header, class=close, data-dismiss=alert, fade in, class=btn

p태그/text-transform/img-rounded/반응형웹/alert alert-success/fade in/버튼 스타일/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

btn-xs/btn-default/그룹화/a link/주석처리/dropdown-toggle/label/default 처리
24.22분 progress bar, pagination, breadcrumb, list-group, panel
progress bar, pagination, breadcrumb, list-group, panel

progress-bar-striped/미디어 쿼리 반영/pager/float값 (right)/list-group-item-text/panel-heading
25.23분 panel-group, dropdown, dropup, nav
panel-group, dropdown, dropup, nav

panel-group/드롭다운,토글만들기/class="disabled"/panel=group collapse/class="nav"/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

navbar/container-fluid/right! important/glyphicon glyphicon-log-in/btn btn-default/disabled/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

div class="container"/data-target="#next"/div class="carousel-inner"/style 시트 삽입/href="#next"/input type 버튼 생성/modal fade 정의/토글값 변수 정의
28.26분 poull, popover, scroll
data-placement, data-content, popover, data-spy=scroll, container-fluid, data-offset-top, data-spy=affix

data-placement="right"/opacity/스크롤/navbar-fixed-top/응용/기기별 화면 비율 확인/col-sm-4, col-sm-8/style='top: 10px;'/offset
29.26분 affix, 버튼, 팝업, 롤링배너
affixed.bs.affix, 메뉴 고정, data-spy, 애니메이션 설정방법, 경고 메시지, data-dismiss, close.bs.alert, 버튼에 액션 부여, 버튼 reset 기능, 버튼 내용 변경하기, 버튼 색상 변경하기, 롤링 배너 속도 변경하기, carousel slide 정의, interval 설정, 롤링 반복작업 설정, 순환 사이클 설정, 팝업 띄우기

affixed.bs.affix/애니메이션 설정방법/경고 메시지/변수명 정의/함수 실행/롤링 배너 속도 변경하기/순환 사이클 설정
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

클릭시 보이고 숨기기/함수 만들기/collapse('show')/data-target/클릭시 스타일시트 적용/show.bs.dropdown/보일 때 버튼내용 바꾸기/부모 요소, 자식 요소
31.23분 경고, 알림 메세지
show.bs.model, hidden.bs.model, popover, popover-title, popover-content, 나만의 스타일 시트 만들기, charset 설정, mainNav, navbar-fixed

실행시 알림 출력하기/id 찾기/delay/selector/trigger:"click"/.popover 테두리 설정/실습예제 결과보기/부트스트랩의 강점/nav 태그
32.30분 부트스트랩 페이지 수정 (상단 메뉴)
navbar, navbar-default, container-fluid, navbar-brand, navbar-right

navbar/@media/border-color 변경/메뉴 스타일/pc환경 스타일 확인/알파값 변경/Menu 버튼 display/Menu 버튼 클릭시 메뉴 나오기/.nav>l
33.29분 부트스트랩 페이지 수정 (본문)
header-content, page-scroll, section, container

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

section-heading/btn-xl/section-heading/service-box/text-primary/service-box/개별 갤러리/porfolio-box:hover
35.30분 부트스트랩 페이지 수정 (포트폴리오,하단 메뉴)
carousel-inner, portfolio-box-caption, bg-dark

img/Project Name 색상변경/text-faded/h2/mfp-zoom-out-cur/mfp-zoom-out-cur/mfp-arrow/$('body, html').css('overflow','hidden')/닫기버튼

강의목록 다운로드

Since 2003 IT전문교육!

강좌설명

강의목록

수강생 리얼후기!

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

강좌설명

강의목록

수강생 리얼후기!

연관학과 (반응형웹 + 부트스트랩 [전문과정])