프론트엔드

[웹 개발 풀스택 코스] 부트스트랩 기초

본 강의는 풀스택 웹 개발자 양성을 위한 [웹 개발 풀스택 코스] 강의 시리즈의 부트스트랩 기초에 대한 강의입니다. 부트스트랩에 대한 기초를 배우고 고품질의 반응형 웹을 빠르게 구축할 수 있는 방법을 알게 됩니다.

(5.0) 수강평 29개

수강생 1,574명

개발자의 품격

Bootstrap

초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

00:00

소개 영상
01:59
부트스트랩이란
19:51

이런 걸 배울 수 있어요

부트스트랩 디자인
반응형 웹
그리드 시스템

부트스트랩으로 멋진 웹을 뚝딱!
반응형 웹사이트 빠르게 빌드하기 ✨

✅ 이 강의는 [풀스택 웹 개발자 로드맵] 시리즈 강의입니다.

본 강의는 풀스택 웹 개발자 양성을 위한 [웹 개발 풀스택 코스] 강의 시리즈 중 부트스트랩 기초를 다루는 강의입니다.
웹 개발 풀스택 코스는 HTML&CSS → 바닐라 자바스크립트 → 부트스트랩 → Vue.js → 데이터베이스 → Node.js → 포트폴리오까지 풀스택 웹 개발을 위한 전 과정을 포함하고 있습니다.
웹 개발 풀스택 코스를 모두 수강하면 여러분은 웹 개발에 대한 기초 뿐만 아니라 실무에 바로 적용할 수 있는 기술을 익히게 됩니다.
본 강의를 수강하기 전 [웹 개발 풀스택 코스] HTML&CSS → [웹 개발 풀스택 코스] 바닐라 자바스크립트 강의를 차례로 수강하는 것을 추천합니다.

What is Bootstrap?

Bootstrap logo.svg - Wikimedia Commons

반응형 웹을 하나의 코드로 빠르게 만들 수 있게 도와주는 HTML/CSS/JS 프레임워크입니다.

부트스트랩은 반응형 웹을 빠르게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크입니다. 하나의 코드로 스마트폰, 태블릿, 데스크탑과 같은 다양한 크기의 기기에 최적화된 웹을 만들 수 있으며, 미리 만들어진 컴포넌트를 기반으로 쉽게 웹을 구현할 수 있도록 합니다.

부트스트랩, 왜 배워야 할까요?

빠른 개발, 일관성, 호환성... 효율적으로 웹 페이지를 만들고 싶다면!

빠른 개발

부트스트랩은 반응형 및 모바일 First 웹사이트를 빠르게 구축하는 데 도움이 되는 프론트엔드 프레임워크입니다. 기본 제공되는 CSS 스타일, 컴포넌트 및 자바스크립트 플러그인을 사용하여 웹사이트를 개발하기 위한 시간과 노력을 절약할 수 있습니다.

일관성과 호환성

부트스트랩은 반응형 그리드 시스템을 제공하여 다양한 화면 크기에 최적화된 웹사이트를 쉽게 만들 수 있습니다. 이를 통해 모바일, 태블릿 및 데스크탑에서 웹사이트가 사용자에게 올바르게 제공되는 것을 보장할 수 있습니다.

커뮤니티 지원

부트스트랩은 개발자 커뮤니티와 잘 정리된 문서를 갖추고 있어서 도움이 필요한 경우 쉽게 찾을 수 있습니다. 또한 다양한 플러그인, 테마 및 예제가 제공되어 웹사이트를 더욱 풍부하게 만들 수 있습니다.

유지 관리

부트스트랩은 일관된 스타일 가이드를 제공하기 때문에 코드를 효과적으로 유지 관리할 수 있습니다.

이 강의의 특징!

_{쉽고 자세하게}

_{실무 응용 중심}

_{예제 코드까지!}

부트스트랩의 기본 문법 및 사용법을 차근차근 알려드려요.
웹 개발 프로젝트에 필요한 부트스트랩을 적용해 봅니다.
모든 예제 코드는 깃허브를 통해 제공됩니다.

무엇을 배우나요?

_VSCode

_BootStrap

개발 IDE 툴로는 비주얼스튜디오코드(Visual Studio Code)를 사용합니다. 비주얼스튜디오코드를 이용한 개발 방법 및 유용한 확장 프로그램을 알게 됩니다.
부트스트랩 Layout, Contents, Forms, Components, Helpers, Utilities, Extend에 대해서 알게 됩니다.
부트스트랩을 CRUD 화면에 적용해 봅니다.
부트스트랩 테마 시장을 이해하고 테마를 사용해서 웹을 빠르게 만들 수 있는 방법을 알려드립니다.

_{부트스트랩으로 생성 화면 만들기}

_{부트스트랩으로 수정 화면 만들기}

선수 지식을 확인하세요!

HTML에 대한 기본 지식이 있어야 해요.
CSS를 알아야 해요.
자바스크립트를 알아야 해요
본 강의를 수강하기 전에 [웹 개발 풀스택 코스] HTML&CSS → [웹 개발 풀스택 코스] 바닐라 자바스크립트 강의를 수강하는 것을 추천합니다.

이 강의를 만든 사람은
누구일까요?

개발자의 품격

소프트웨어 기술을 통해 세상에 선한 영향력을 주고 싶은 24년차 소프트웨어 개발자.
지식을 나누는 것을 좋아하고, 항상 새로운 기술을 익히는 것을 즐겨요.

국내외 60개가 넘는 글로벌 기업 ERP 시스템을 구축하는 컨설턴트 및 개발자로 활동하였고, 직접 개발한 소프트웨어를 국내는 물론 해외 유수의 기업에 판매를 한 경험 또한 가지고 있어요. IT 스타트업 대표이사이기도 해요.

개발자뿐만 아니라 UX 컨설턴트로, 때로는 비즈니스 컨설턴트로 일하면서 애플리케이션과 서비스 개발 시 기획에서 개발까지 전 과정에 대한 수많은 경험을 쌓았습니다. 이제는 20년이 넘는 실무 경험을 바탕으로 후배들에게 정말 필요한 기술, 정말 제대로 된 지식을 전달하는 사명감을 갖고 지식을 나누는 일을 하고 있어요.

더 알아볼까요?

유튜브 ‘개발자의품격’ 채널을 통해 200여개의 유용한 강의 영상을 제공하고 있어요.
'바닐라 자바스크립트', 'Vue.js 프로젝트 투입 일주일 전', 'Node.js 프로젝트 투입 일주일 전', '개발자가 되기 위해 꼭 알아야 하는 IT 용어', ‘디자인 씽킹을 넘어 프로그래밍 씽킹으로’, 'The Essentials of Smart Contract Development for Solidity Developers', '저는 아직 아이들에게 코딩을 가르치지 않습니다' 책의 저자입니다.
오라일리의 '러닝 타입스크립트'을 번역한 역자입니다.

[웹 개발 풀스택 코스] 시리즈 모아보기

[웹 개발 풀스택 코스] HTML&CSS 기초

개발자의 품격

무료

입문 / HTML/CSS

4.9

(94)

5,000+

본 강의는 풀스택 웹 개발자 양성을 위한 [웹 개발 풀스택 코스] 강의 시리즈의 HTML&CSS에 대한 강의입니다. 이 강의를 통해 웹 개발의 뼈대인 HTML과 웹을 아름답게 만드는 CSS에 대해서 이해하게 됩니다.

입문

HTML/CSS

[웹 개발 풀스택 코스] 순수 자바스크립트 기초에서 실무까지

개발자의 품격

₩264,000

30%

₩184,800

초급 / JavaScript, vanilla-javascript

5.0

(4)

100+

본 강의는 풀스택 웹 개발자 양성을 위한 [웹 개발 풀스택 코스] 강의 시리즈 중 자바스크립트에 대한 강의입니다. 이 강의는 지식공유자의 저서 <바닐라 자바스크립트>의 내용을 바탕으로 만들어진 강의입니다.

초급

JavaScript, vanilla-javascript

[웹 개발 풀스택 코스] 부트스트랩 기초

개발자의 품격

무료

초급 / Bootstrap

5.0

(29)

1,500+

초급

Bootstrap

[웹 개발 풀스택 코스] Vue.js 프로젝트 투입 일주일 전 - 기초에서 실무까지

개발자의 품격

₩242,000

30%

₩169,400

초급 / Vue.js

5.0

(6)

200+

본 강의는 풀스택 웹 개발자 양성을 위한 [웹 개발 풀스택 코스] 강의 시리즈의 프론트엔드 부분에 대한 강의입니다. 이 강의는 강사의 저서 <Vue.js 프로젝트 투입 일주일 전>의 내용을 바탕으로 만들어진 강의입니다.

초급

Vue.js

[웹 개발 풀스택 코스] 넷플릭스와 당근마켓 분석을 통해서 배우는 데이터베이스 기초

개발자의 품격

무료

입문 / DBMS/RDBMS, MySQL, SQL

5.0

(13)

2,500+

본 강의는 풀스택 웹 개발자 양성을 위한 [웹 개발 풀스택 코스] 강의 시리즈의 데이터베이스 기초에 대한 강의입니다. 이 강의는 넷플릭스와 당근마켓을 분석하면서 데이터베이스에 대한 설계를 이해하는 과정입니다. 기본적인 데이터베이스 설계 원리와 SQL를 배울 수 있는 기초 강의입니다.

입문

DBMS/RDBMS, MySQL, SQL

[웹 개발 풀스택 코스] Node.js 프로젝트 투입 일주일 전 - 기초에서 실무까지

개발자의 품격

₩165,000

30%

₩115,500

초급 / Node.js, MySQL, Express, MongoDB, Socket.io, 웹 크롤링

5.0

(8)

100+

본 강의는 풀스택 웹 개발자 양성을 위한 [웹 개발 풀스택 코스] 강의 시리즈의 백엔드 부분에 대한 강의입니다. 이 강의는 강사의 저서 <Node.js 프로젝트 투입 일주일 전>의 내용을 바탕으로 만들어진 강의입니다.

초급

Node.js, MySQL, Express

[웹 개발 풀스택 코스] 포트폴리오 - 제품 판매 미니 웹 앱 개발

개발자의 품격

₩121,000

30%

₩84,700

초급 / 포트폴리오, 웹앱

본 강의는 풀스택 웹 개발자 양성을 위한 [웹 개발 풀스택 코스] 강의 시리즈의 최종편인 포트폴리오용 프로젝트 개발 대한 강의입니다. [웹 개발 풀스택 코스]에서 배운 모든 내용을 종합하여 실제 웹 애플리케이션을 개발하면서 배운 내용을 이해하고 기본이 되는 기능을 직접 적용해볼 수 있게 됩니다.

초급

포트폴리오, 웹앱

이런 분들께
추천드려요!

학습 대상은
누구일까요?

부트스트랩을 사용해서 반응형 웹을 만들고 싶은 사람
디자인 시스템을 경험해 보고 싶은 사람

선수 지식,
필요할까요?

HTML
CSS
자바스크립트

안녕하세요
개발자의 품격입니다.

10,602

명

수강생

227

개

수강평

152

개

답변

4.9

점

강의 평점

개

강의

소프트웨어 기술을 통해 세상에 선한 영향력을 주고 싶은 24년차 소프트웨어 개발자.
지식을 나누는 것을 좋아하고 항상 새로운 기술을 익히는 것을 즐겨요.

개발자 뿐만 아니라, UX 컨설턴트로, 때로는 비즈니스 컨설턴트로 일하면서 애플리케이션과 서비스 개발 시 기획에서 개발까지 전과정에 대한 수많은 경험을 쌓았고, 이제는 20년이 넘는 실무 경험을 바탕으로 후배들에게 정말 필요한 기술, 정말 제대로 된 지식을 전달하는 사명감을 갖고 지식 나눔에 일을 하고 있어요.

유튜브 ‘개발자의품격’ 채널을 통해 200여개의 유용한 강의 영상을 제공하고 있어요.
'바닐라 자바스크립트', 'Vue.js 프로젝트 투입 일주일 전', 'Node.js 프로젝트 투입 일주일 전', '개발자가 되기 위해 꼭 알아야 하는 IT 용어', ‘디자인 씽킹을 넘어 프로그래밍 씽킹으로’, 'The Essentials of Smart Contract Development for Solidity Developers', '저는 아직 아이들에게 코딩을 가르치지 않습니다' 책의 저자입니다.
오라일리의 '러닝 타입스크립트'을 번역한 역자입니다.

(현)주식회사 더그레잇 대표이사
(현)주식회사 썬슈어 CTO
(현)주식회사 리턴밸류 CTO
(현)팬임팩트코리아 유한회사 기술전문위원

이메일 - seungwon.go@gmail.com

커리큘럼

전체

13개 ∙ (4시간 52분)

섹션 1. 부트스트랩 기초 다지기

8개 ∙ (3시간 29분)

부트스트랩이란
19:51
Layout
54:52
Content
10:57
Forms
22:02
Components
01:07:47
Helpers
06:46
Utilities
23:58
Extend
03:06

섹션 2. 부트스트랩 사용하기

5개 ∙ (1시간 22분)

리스트 조회 화면
13:50
생성 화면
41:17
수정 화면
12:07
삭제 화면
04:55
멀티 생성 화면
10:39

강의 게시일: 2023. 04. 10.

마지막 업데이트일: 2023. 04. 11.

수강평

전체

29개

5.0

29개의 수강평

parrier
2023. 12. 22.
∙
수강평 2
∙
평균 평점 5.0
5
62% 수강 후 작성
잘 봤습니다. 가볍게 개념을 훑어보기에 좋습니다.
IC&IT
2023. 10. 26.
∙
수강평 3
∙
평균 평점 4.7
5
100% 수강 후 작성
무료강의임에도 불구하고 매우 알찹니다 부트스트랩 테마 보면서 뭘 어떻게 적용해야하나 막막했는데 뭘 해야할지 감이 잡히고 있습니다 감사합니다.
indie2k
2023. 12. 11.
∙
수강평 3
∙
평균 평점 5.0
5
100% 수강 후 작성
정말 도움이 많이 되었습니다. 감사합니다.
만족한 문어
2023. 09. 11.
∙
수강평 2
∙
평균 평점 5.0
5
100% 수강 후 작성
쉽게 설명해주셔서 한번에 이해하기 쉬웠습니다!
heopoint
2023. 08. 26.
∙
수강평 5
∙
평균 평점 5.0
5
62% 수강 후 작성
설명이 좋네요

개발자의 품격님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

[웹 개발 풀스택 코스] 순수 자바스크립트 기초에서 실무까지

개발자의 품격

₩264,000

30%

₩184,800

초급 / JavaScript, vanilla-javascript

5.0

(4)

100+

초급

JavaScript, vanilla-javascript

자바스크립트 제대로 배워볼래?

개발자의 품격

₩77,000

30%

₩53,900

초급 / JavaScript, ES6, HTML/CSS

4.9

(73)

700+

자바스크립트를 제대로 배우길 원하는 초급자를 위한 가장 탄탄한 기초 강의입니다. 여러분은 이 강의를 통해 자바스크립트라는 언어를 이해하는 시작점이 될 것이고, 프론트엔드(Vue, React, Angular) 개발자, 서버(Node.js) 개발자가 되기 위한 기초를 완벽하게 준비할 수 있습니다.

초급

JavaScript, ES6, HTML/CSS

[웹 개발 풀스택 코스] Node.js 프로젝트 투입 일주일 전 - 기초에서 실무까지

개발자의 품격

₩165,000

30%

₩115,500

초급 / Node.js, MySQL, Express, MongoDB, Socket.io, 웹 크롤링

5.0

(8)

100+

초급

Node.js, MySQL, Express

[웹 개발 풀스택 코스] 넷플릭스와 당근마켓 분석을 통해서 배우는 데이터베이스 기초

개발자의 품격

무료

입문 / DBMS/RDBMS, MySQL, SQL

5.0

(13)

2,500+

입문

DBMS/RDBMS, MySQL, SQL

[웹 개발 풀스택 코스] 포트폴리오 - 제품 판매 미니 웹 앱 개발

개발자의 품격

₩121,000

30%

₩84,700

초급 / 포트폴리오, 웹앱

초급

포트폴리오, 웹앱

[웹 개발 풀스택 코스] Vue.js 프로젝트 투입 일주일 전 - 기초에서 실무까지

개발자의 품격

₩242,000

30%

₩169,400

초급 / Vue.js

5.0

(6)

200+

초급

Vue.js

[웹 개발 풀스택 코스] HTML&CSS 기초

개발자의 품격

무료

입문 / HTML/CSS

4.9

(94)

5,000+

입문

HTML/CSS

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

윤재성의 Bootstrap 4 & 3 Framework Tutorial

소프트캠퍼스

₩11,000

30%

₩7,700

초급 / Bootstrap

4.8

(12)

200+

부트스트랩4 를 위해 HTML5 웹 프레임워크 라이브러리,CSS 클래스를 통한 웹 애플리케이션 Front End 개발 할수 있다.

초급

Bootstrap

[ 부트스트랩 5 ] 빠르고 스마트하게 웹 사이트 만들기 | Bootsrap 입문용

코드덤

₩88,000

30%

₩61,600

입문 / HTML/CSS, Bootstrap

4.9

(7)

부트스트랩5로 나만의 색을 입힌 포트폴리오 웹 사이트 제작부터 배포까지! 전세계적으로 가장 많이 사용되고 있는 웹 디자인 툴킷! Bootstrap 5

입문

HTML/CSS, Bootstrap

부트스트랩으로 개인 홈페이지 만들기

안경잡이개발자

무료

초급 / Bootstrap

4.5

(153)

7,100+

이 강좌를 들으시면 굉장히 짧은 시간 만에 자신의 개인 혹은 회사 홈페이지를 누구보다 빠르고 쉽게 개발할 수 있게 됩니다! 이 강좌에서는 부트스트랩이라는 템플릿을 이용해서 자신의 개인 포트폴리오 사이트를 만드는 방법을 차근차근 설명하며 하나의 과정도 빠짐없이 보여줍니다. 부트스트랩이란 하나의 웹 사이트 개발 프레임워크로서, 디자인을 잘 못하는 프로그래머나 HTML을 거의 알지 못하는 사람들도 쉽게 홈페이지를 개발할 수 있도록 해줍니다. 여러분은 이 강좌를 마칠 때 누구나 접속 가능한 자신만의 홈페이지가 탄생할 것입니다.

초급

Bootstrap

Do It! 장고+부트스트랩: 파이썬 웹개발의 정석

SungYong Lee

₩132,000

30%

₩92,400

초급 / Python, Django, Bootstrap, AWS, Docker, TDD, HTML/CSS, JavaScript

4.8

(40)

500+

만들면서 배우는 파이썬 웹개발 A to Z! 웹 기초부터 블로그 개발, 배포까지 한 번에 배워요.

초급

Python, Django, Bootstrap

Vue-Django-Bootstrap 뚝딱 블로그

김석훈

₩33,000

30%

₩23,100

초급 / Vue.js, Django, Bootstrap

4.8

(12)

200+

인기 3총사 (Vue + Django + Bootstrap) 를 활용하여, 쉬우면서도 멋진 나의 블로그를 만들 수 있습니다. 반응형은 기본, 스마트폰으로도 볼 수 있습니다.

초급

Vue.js, Django, Bootstrap

Google Sheets로 만드는 Simple Blog!

제주코딩베이스캠프

무료

초급 / Bootstrap, Google Apps Script, VSCode

4.8

(31)

900+

Google Spreadsheets + Google apps script + Google drive + Bootstrap를 사용해, 24시간 무료로 동작하는 Simple한 blog를 빠르게 만들어봅시다!

초급

Bootstrap, Google Apps Script, VSCode

부트스트랩을 활용한 반응형 웹제작 [실전편] 부트캠프

영코디 킴쌤

₩39,600

30%

₩27,720

초급 / Bootstrap, 반응형 웹, 웹 디자인, HTML/CSS

5.0

(3)

부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기[2024년 개정판] 수업의 실전 제작수업으로 디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹 실무 페이지를 부트스트랩4를 활용하여 직접 제작해 봅니다.

초급

Bootstrap, 반응형 웹, 웹 디자인

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

유용한IT학습

₩39,600

30%

₩27,720

초급 / Bootstrap, 반응형 웹

4.9

(83)

99,900+

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

초급

Bootstrap, 반응형 웹

실리콘밸리 엔지니어가 가르치는 파이썬 장고 웹프로그래밍

미쿡엔지니어

₩55,000

30%

₩38,500

초급 / Python, Django, REST API, Bootstrap, drf

4.5

(19)

400+

실리콘밸리 소프트웨어 엔지니어에게만 배울 수 있는 파이썬 장고 웹 개발 기초와 실무의 모든 것! 파이썬 기반 장고(Django) 프레임워크를 이용한 웹 프로그래밍을 배울 수 있는 기회 절대 놓치지 마세요!. 초보자도 부담없이 웹프로그래밍을 시작할 수 있도록, HTML 및 부트스트랩(Bootstrap)까지 함께 배울 수 있는 파격적인 기회 꼭 잡으세요!

초급

Python, Django, REST API