패밀리 서비스
goormEDU
로그인회원가입
전체
루트공지사항Q&A

부트스트랩(BOOTSTRAP)4를 활용한 반응형 웹페이지 만들기

디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹페이지를 만들기 위해 부트스트랩을 활용하는 방법에 대한 강의[개정판] 입니다.

클래스 소개
난이도
보통
카테고리
웹 프로그래밍 - 프로그래밍
태그
부트스트랩, 자바스크립트, CSS, HTML, jQuery
수료증
발급 가능
소요 시간
19 시간
추천 학습대상
- HTML/CSS를 활용한 반응형 웹페이지/웹앱 개발에 관심있는 분
- 부트스트랩(Bootstrap) 활용법을 학습하고 싶은 분
- 킴쌤의 부트스트랩3 강의를 듣고 부트스트랩4 강의를 기다리신 분
- 최근 실무에서 가장 많이 쓰이는 부트스트랩 버전으로 반응형 웹이나 웹디자인, 웹앱을 제작하려는 분
- 프론트 엔드 분야로 취업을 하기위해 프론트 엔드 포트폴리오를 제작하려는 취업 준비생

초급자를 위해 준비한
[웹 퍼블리싱, Bootstrap] 강의입니다.

디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹페이지를 만들기 위해 부트스트랩을 활용하는 방법에 대한 강의

[2024년 개정판] 입니다.


📚 강의소개

디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹페이지나 웹앱, 웹디자인 개발을 위해 부트스트랩(Bootstrap)을 활용하는 방법에 대한 이론과 실습을 적절하게 분배하여 부트스트랩의 구성요소들을 이해하고 실습을 통하여 바로바로 확인해볼 수 있도록 구성하였습니다.
웹페이지, 웹앱, 반응형 웹을 제작하기 위한 HTML/CSS/ js에 대한 기본 지식이 있는 분들을 대상으로 하지만, 기본 지식이 부족하더라도 강의를 반복적으로 시청하며 따라할 수 있도록 제작하였으며 실무에서 사용하는 단축키를 이용하여 html 코드를 빠르게 만드는 방법인 emmet의 사용법도 학습할 수 있습니다.
각 챕터마다 selfEX 코딩문제를 직접 풀어보고 해설강의를 통하여 제작방법을 확인할 수 있도록 구성하여 기본기를 튼튼히 다지면서 제작스킬을 높일 수 있도록 구성하였습니다.

💡 이런 내용을 배워요

✨ 반응형 캐로셀과 폼양식 구현



🌠 헤라 반응형 웹 메인 페이지 일부 구현


📊 디바이스에 따라 바뀌는 이미지와 댓글 구현


🎈 반응형 네비게이션 바와 카드 컨텐츠 구현


🎓
수강 전
참고사항
수업에 사용되는 pdf 강의자료, 이미지나 완성된 파일을 다운받아 실습에 활용하실 수 있습니다.
📚
선수 지식,
필요할까요?
html, css, js 에 대한 기본 지식
체험하기
모두 펼치기
  • 01
    부트스트랩을 사용하지 않고 반응형 웹 코딩 맛보기
    2개 (01:26:55)
    • step01-1 부트스트랩의 개념
    체험하기
    43:39
    step01-2 부트스트랩 핵심요소 4가지와 BS3에서 BS4로 바뀐 포인트
    체험하기
    43:16
교육 과정
모두 펼치기
  • 01
    부트스트랩을 사용하지 않고 반응형 웹 코딩 맛보기
    2개 (01:26:55)
    • step01-1 부트스트랩의 개념
    체험하기
    43:39
    step01-2 부트스트랩 핵심요소 4가지와 BS3에서 BS4로 바뀐 포인트
    체험하기
    43:16
  • 02
    부트스트랩 시작하기
    2개 (01:32:15)
    • step02-1 부트스트랩4 시작하기
    50:15
    step02-2 반응형웹 전체 레이아웃 짜기 핵심순서
    42:00
  • 03
    그리드 시스템과 레이아웃 관련 클래스의 사용
    5개 (03:01:20)
    • step03 부트스트랩4에 추가된 레이아웃 클래스
    47:24
    step04-1 정렬관련 클래스
    37:10
    step04-2 순서와 이동 관련 클래스
    45:44
    step05-1 텍스트 이미지 관련 클래스
    27:29
    step05-2 테이블 관련 클래스
    23:33
  • 04
    다양한 컴포넌트
    17개 (09:58:15)
    • step06 다양한 컴포넌트1_경고창부터 버튼그룹까지(테스트)
    57:02
    step07-1 다양한 컴포넌트2_카드
    28:21
    step07-2 다양한 컴포넌트2_카드 메이슨리까지
    36:28
    step08-1 다양한 컴포넌트3_캐로셀
    42:33
    step08-2 다양한 컴포넌트3_콜랩스
    21:08
    step08-3 다양한 컴포넌트3_드랍다운
    28:57
    step08-4 다양한 컴포넌트3_폼 양식
    50:36
    step08-5 다양한 컴포넌트3 캐로셀과 form_selfEX문제
    22:20
    step09-1 다양한 컴포넌트4_점보트론부터 미디어 오브젝트까지
    33:49
    step09-2 다양한 컴포넌트4_모달
    59:00
    step09-3 다양한 컴포넌트4_selfEX문제풀이
    22:15
    step10-1 다양한 컴포넌트5_네브 바
    29:22
    step10-2 다양한 컴포넌트5_네브 바 selfEX풀이
    22:58
    step11 다양한 컴포넌트6_페이지네이션부터 프로그레스까지
    38:06
    step12-1 다양한 컴포넌트7_스크롤스파이부터 툴팁까지
    27:47
    step12-2 다양한 컴포넌트7_spinner부터 tooltip까지
    40:23
    step12-3 다양한 컴포넌트7_scrollspy_selfEX풀이
    37:10
  • 05
    그밖의 유틸리티들
    5개 (03:06:18)
    • step13 그밖의 유틸리티들1_border속성부터 colors속성까지
    15:02
    step14 그밖의 유틸리티들2_보이고 숨기는 클래스 & selfEX풀이
    52:40
    step15-1 그밖의 유틸리티들3_embed부터 flex관련 클래스까지
    25:43
    step15-2 그밖의 유틸리티들3_flex관련 클래스 결과 확인하기
    50:46
    step16 그밖의 유틸리티들4_texthide부터 visibility속성까지
    42:07
마지막 업데이트|2024년 03월 06일
강의자 소개
Seji Kim캡틴
👩 영코디 킴쌤 [ 비전공자도 쉽고 재미있게 배우는 코딩! ] 을 목표로 15년 넘게 풀스택(백엔드, 프론트엔드) 및 영상, 코딩, 디자인을 강의하며 개발자 인력양성에 진심인 현직 직업훈련교사 [컴퓨터 1도 모르는 사람이 부업으로 월100만원 수입내보기 첫걸음] 의 저자 NCS 국가직무능력강의 고용노동부 평가 2018, 2019 2년연속 A등급 강사선정 수원그린컴퓨터아카데미 우수강사선정(2017, 2018, 2019 3년연속 최우수1등상 수상) 전) 삼성ODD 기획 개발 마케팅 담당 전) SF필름스쿨 강의 가톨릭대학교 컴퓨터공학부 특강 용인송담대학 멀티미디어학부 특강
강좌 후기
￦
39,600
평균평점
0.0
난이도
보통
수강기간
결제 후 52주 1일간
소요 시간
19 시간