부트스트랩(BOOTSTRAP)4를 활용한 반응형 웹페이지 만들기[2024년 개정판]
디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹페이지를 만들기 위해 부트스트랩을 활용하는 방법에 대한 강의[개정판] 입니다.
클래스 소개
난이도
보통
카테고리
웹 프로그래밍 - 프로그래밍
태그
부트스트랩, 자바스크립트, CSS, HTML, jQuery
수료증
발급 가능
소요 시간
19 시간
추천 학습대상
- HTML/CSS를 활용한 반응형 웹페이지/웹앱 개발에 관심있는 분
- 부트스트랩(Bootstrap) 활용법을 학습하고 싶은 분
- 킴쌤의 부트스트랩3 강의를 듣고 부트스트랩4 강의를 기다리신 분
- 최근 실무에서 가장 많이 쓰이는 부트스트랩 버전으로 반응형 웹이나 웹디자인, 웹앱을 제작하려는 분
- 프론트 엔드 분야로 취업을 하기위해 프론트 엔드 포트폴리오를 제작하려는 취업 준비생
- 부트스트랩(Bootstrap) 활용법을 학습하고 싶은 분
- 킴쌤의 부트스트랩3 강의를 듣고 부트스트랩4 강의를 기다리신 분
- 최근 실무에서 가장 많이 쓰이는 부트스트랩 버전으로 반응형 웹이나 웹디자인, 웹앱을 제작하려는 분
- 프론트 엔드 분야로 취업을 하기위해 프론트 엔드 포트폴리오를 제작하려는 취업 준비생
초급자를 위해 준비한[웹 퍼블리싱, Bootstrap] 강의입니다.
디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹페이지를 만들기 위해 부트스트랩을 활용하는 방법에 대한 강의
[2024년 개정판] 입니다.
📚 강의소개
디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹페이지나 웹앱, 웹디자인 개발을 위해 부트스트랩(Bootstrap)을 활용하는 방법에 대한 이론과 실습을 적절하게 분배하여 부트스트랩의 구성요소들을 이해하고 실습을 통하여 바로바로 확인해볼 수 있도록 구성하였습니다.
웹페이지, 웹앱, 반응형 웹을 제작하기 위한 HTML/CSS/ js에 대한 기본 지식이 있는 분들을 대상으로 하지만, 기본 지식이 부족하더라도 강의를 반복적으로 시청하며 따라할 수 있도록 제작하였으며 실무에서 사용하는 단축키를 이용하여 html 코드를 빠르게 만드는 방법인 emmet의 사용법도 학습할 수 있습니다.
각 챕터마다 selfEX 코딩문제를 직접 풀어보고 해설강의를 통하여 제작방법을 확인할 수 있도록 구성하여 기본기를 튼튼히 다지면서 제작스킬을 높일 수 있도록 구성하였습니다.
💡 이런 내용을 배워요
✨ 반응형 캐로셀과 폼양식 구현
🌠 헤라 반응형 웹 메인 페이지 일부 구현
📊 디바이스에 따라 바뀌는 이미지와 댓글 구현
🎈 반응형 네비게이션 바와 카드 컨텐츠 구현
🎓
수강 전
참고사항
수강 전
참고사항
수업에 사용되는 pdf 강의자료, 이미지나 완성된 파일을 다운받아 실습에 활용하실 수 있습니다.
📚
선수 지식,
필요할까요?
선수 지식,
필요할까요?
html, css, js 에 대한 기본 지식
교육 과정
모두 펼치기
- 01부트스트랩을 사용하지 않고 반응형 웹 코딩 맛보기
- 02부트스트랩 시작하기
- 03그리드 시스템과 레이아웃 관련 클래스의 사용
- 04다양한 컴포넌트
- 05그밖의 유틸리티들
step02-1 부트스트랩4 시작하기
step02-2 반응형웹 전체 레이아웃 짜기 핵심순서
step03 부트스트랩4에 추가된 레이아웃 클래스
step04-1 정렬관련 클래스
step04-2 순서와 이동 관련 클래스
step05-1 텍스트 이미지 관련 클래스
step05-2 테이블 관련 클래스
step06 다양한 컴포넌트1_경고창부터 버튼그룹까지(테스트)
step07-1 다양한 컴포넌트2_카드
step07-2 다양한 컴포넌트2_카드 메이슨리까지
step08-1 다양한 컴포넌트3_캐로셀
step08-2 다양한 컴포넌트3_콜랩스
step08-3 다양한 컴포넌트3_드랍다운
step08-4 다양한 컴포넌트3_폼 양식
step08-5 다양한 컴포넌트3 캐로셀과 form_selfEX문제
step09-1 다양한 컴포넌트4_점보트론부터 미디어 오브젝트까지
step09-2 다양한 컴포넌트4_모달
step09-3 다양한 컴포넌트4_selfEX문제풀이
step10-1 다양한 컴포넌트5_네브 바
step10-2 다양한 컴포넌트5_네브 바 selfEX풀이
step11 다양한 컴포넌트6_페이지네이션부터 프로그레스까지
step12-1 다양한 컴포넌트7_스크롤스파이부터 툴팁까지
step12-2 다양한 컴포넌트7_spinner부터 tooltip까지
step12-3 다양한 컴포넌트7_scrollspy_selfEX풀이
step13 그밖의 유틸리티들1_border속성부터 colors속성까지
step14 그밖의 유틸리티들2_보이고 숨기는 클래스 & selfEX풀이
step15-1 그밖의 유틸리티들3_embed부터 flex관련 클래스까지
step15-2 그밖의 유틸리티들3_flex관련 클래스 결과 확인하기
step16 그밖의 유틸리티들4_texthide부터 visibility속성까지
마지막 업데이트|2024년 03월 06일
선생님 소개
👩 영코디 킴쌤
[ 비전공자도 쉽고 재미있게 배우는 코딩! ] 을 목표로 15년 넘게 풀스택(백엔드, 프론트엔드) 및 영상, 코딩, 디자인을 강의하며 개발자 인력양성에 진심인 현직 직업훈련교사
[컴퓨터 1도 모르는 사람이 부업으로 월100만원 수입내보기 첫걸음] 의 저자
NCS 국가직무능력강의 고용노동부 평가 2018, 2019 2년연속 A등급 강사선정
수원그린컴퓨터아카데미 우수강사선정(2017, 2018, 2019 3년연속 최우수1등상 수상)
전) 삼성ODD 기획 개발 마케팅 담당
전) SF필름스쿨 강의
가톨릭대학교 컴퓨터공학부 특강
용인송담대학 멀티미디어학부 특강
클래스 후기
￦
39,600
평균평점
0.0
난이도
보통
학습기간
결제 후 52주 1일간
소요 시간
19 시간