Inflearn brand logo image
Inflearn brand logo image

N

Inflearn brand logo image
Programming

/

Front-end

[Web開発フルスタックコース]ブートストラップ基礎

この講義は、フルスタックWeb開発者を育成するための[Web開発フルスタックコース]講義シリーズのブートストラップの基礎についての講義です。ブートストラップの基礎を学び、高品質のレスポンシブウェブをすばやく構築する方法を学びます。

（5.0）受講レビュー 33件

受講生 1,634名

  • realprogrammers
부트스트랩
bootstrap
Bootstrap
Thumbnail

学習した受講者のレビュー

こんなことが学べます

  • ブートストラップデザイン

  • レスポンシブウェブ

  • グリッドシステム

ブートストラップで素敵なウェブをたっぷり！
レスポンシブウェブサイトをすばやく構築する✨

✅このレッスンは、[フルスタックWeb開発者ロードマップ]シリーズのレッスンです。

  • 本講義は、フルスタックウェブ開発者養成のための「ウェブ開発フルスタックコース」講義シリーズの中で、ブートストラップの基礎を扱う講義です。
  • Web開発フルスタックコースには、HTML＆CSS→バニラJavaScript→ブートストラップ→Vue.js→データベース→Node.js→ポートフォリオまで、フルスタックWeb開発のための全コースが含まれています。
  • Web開発フルスタックコースをすべて受講すると、Web開発の基礎だけでなく、実践にすぐに適用できるスキルを身につけることができます。
  • 本講義を受講する前 [ウェブ開発フルスタックコース] HTML&CSS → [ウェブ開発フルスタックコース] バニラJavaScript講義を順次受講することをおすすめします。

What is Bootstrap?

Bootstrap logo.svg - Wikimedia Commons

レスポンシブ Web を 1 つのコードにすばやく作成できるようにする HTML/CSS/JS フレームワークです。

ブートストラップは、レスポンシブWebをすばやく作成するのに役立つHTML、CSS、JSフレームワークです。 1つのコードで、スマートフォン、タブレット、デスクトップなど、さまざまなサイズのデバイスに最適化されたWebを作成し、事前作成されたコンポーネントに基づいてWebを簡単に実装できます。

ブートストラップ、なぜ学ぶべきですか？


迅速な開発、一貫性、互換性...効率的にWebページを作成したい場合！

迅速な開発

ブートストラップは、レスポンシブとモバイルFirstのウェブサイトをすばやく構築するのに役立つフロントエンドフレームワークです。組み込みのCSSスタイル、コンポーネント、およびJavaScriptプラグインを使用して、ウェブサイトを開発するための時間と労力を節約できます。

一貫性と互換性

ブートストラップはレスポンシブグリッドシステムを提供し、さまざまな画面サイズに最適化されたウェブサイトを簡単に作成できます。これにより、モバイル、タブレット、デスクトップでウェブサイトがユーザーに正しく配信されるようになります。

コミュニティサポート

ブートストラップには開発者コミュニティとよく整理されたドキュメントがあり、助けが必要な場合は簡単に見つけることができます。また、さまざまなプラグイン、テーマ、およびサンプルが提供され、ウェブサイトをより豊かにすることができます。

メンテナンス

ブートストラップは一貫したスタイルガイドを提供するため、コードを効果的に維持できます。

この講義の特徴！

簡単かつ詳細に
実務応用中心
サンプルコードまで！
  • ブートストラップの基本的な文法と使い方を次々とお知らせします。
  • Web開発プロジェクトに必要なブートストラップを適用してみます。
  • すべてのサンプルコードはFitHubを介して提供されています。

何を学びますか？

VSCode
BootStrap
  • 開発 IDE ツールとしては、Visual Studio Codeを使用します。ビジュアルスタジオコードを使った開発方法と有用な拡張プログラムを知ります。
  • ブートストラップ Layout、Contents、Forms、Components、Helpers、Utilities、Extendについて学びます。
  • ブートストラップをCRUD画面に適用してみます。
  • ブートストラップのテーマ市場を理解し、テーマを使用してWebをすばやく作成する方法を教えてください。

ブートストラップで作成画面を作成する

ブートストラップで編集画面を作成する

選手の知識を確認してください！

  • HTMLに関する基本的な知識が必要です。
  • CSSを知る必要があります。
  • JavaScriptを知る必要があります。
  • 本講義を受講する前に[ウェブ開発フルスタックコース] HTML&CSS→[ウェブ開発フルスタックコース]バニラJavaScript講義を受講することをおすすめします。

この講義をした人は
誰ですか？

開発者の品格

ソフトウェア技術を通じて世界に良い影響力を与えたい24年次ソフトウェア開発者。
知識を分かち合うのが好きで、常に新しいスキルを身につけることを楽しんでいます。

国内外60社を超えるグローバル企業ERPシステムを構築するコンサルタントおよび開発者として活動し、直接開発したソフトウェアを国内はもちろん海外有数の企業に販売した経験も持っています。 ITスタートアップ代表取締役でもあります。

開発者だけでなく、UXコンサルタントとして、時にはビジネスコンサルタントとして働きながら、アプリケーションやサービス開発時の企画から開発まで、全過程について数多くの経験を積んできました。今は20年以上の実務経験をもとに、後輩たちに本当に必要な技術、本当にきちんとした知識を伝える使命感を持って知識を分かち合うことをしています。

もっと学びましょうか？

【ウェブ開発フルスタックコース】シリーズ集めてみる

こんな方に
おすすめです

学習対象は
誰でしょう？

  • ブートストラップを使用してレスポンシブWebを作成したい人

  • デザインシステムを体験したい人

前提知識、
必要でしょうか？

  • HTML

  • CSS

  • JavaScript

こんにちは
です。

10,941

受講生

248

受講レビュー

152

回答

4.9

講座評価

8

講座

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

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

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

 

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

 

이메일 - seungwon.go@gmail.com

カリキュラム

全体

13件 ∙ (4時間 52分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

33件

5.0

33件の受講レビュー

  • parrier님의 프로필 이미지
    parrier

    受講レビュー 3

    ∙

    平均評価 5.0

    5

    62% 受講後に作成

    잘 봤습니다. 가볍게 개념을 훑어보기에 좋습니다.

    • indie2k님의 프로필 이미지
      indie2k

      受講レビュー 3

      ∙

      平均評価 5.0

      5

      100% 受講後に作成

      정말 도움이 많이 되었습니다. 감사합니다.

      • IC&IT님의 프로필 이미지
        IC&IT

        受講レビュー 3

        ∙

        平均評価 4.7

        5

        100% 受講後に作成

        무료강의임에도 불구하고 매우 알찹니다 부트스트랩 테마 보면서 뭘 어떻게 적용해야하나 막막했는데 뭘 해야할지 감이 잡히고 있습니다 감사합니다.

        • 만족한 문어님의 프로필 이미지
          만족한 문어

          受講レビュー 2

          ∙

          平均評価 5.0

          5

          100% 受講後に作成

          쉽게 설명해주셔서 한번에 이해하기 쉬웠습니다!

          • heopoint님의 프로필 이미지
            heopoint

            受講レビュー 5

            ∙

            平均評価 5.0

            5

            62% 受講後に作成

            설명이 좋네요

            無料

            realprogrammersの他の講座

            知識共有者の他の講座を見てみましょう！

            [웹 개발 풀스택 코스] 순수 자바스크립트 기초에서 실무까지講義サムネイル

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

            개발자의 품격

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

            初級

            初級

            JavaScript, vanilla-javascript

            [웹 개발 풀스택 코스] 순수 자바스크립트 기초에서 실무까지講義サムネイル

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

            개발자의 품격

            [웹 개발 풀스택 코스] HTML&CSS 기초講義サムネイル

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

            개발자의 품격

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

            入門

            入門

            HTML/CSS

            [웹 개발 풀스택 코스] HTML&CSS 기초講義サムネイル

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

            개발자의 품격

            [웹 개발 풀스택 코스] 포트폴리오 - 제품 판매 미니 웹 앱 개발講義サムネイル

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

            개발자의 품격

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

            初級

            初級

            포트폴리오, 웹앱

            [웹 개발 풀스택 코스] 포트폴리오 - 제품 판매 미니 웹 앱 개발講義サムネイル

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

            개발자의 품격

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

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

            개발자의 품격

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

            初級

            初級

            Node.js, MySQL, Express

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

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

            개발자의 품격

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

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

            개발자의 품격

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

            入門

            入門

            DBMS/RDBMS, MySQL, SQL

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

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

            개발자의 품격

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

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

            개발자의 품격

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

            初級

            初級

            Vue.js

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

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

            개발자의 품격

            자바스크립트 제대로 배워볼래?講義サムネイル

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

            개발자의 품격

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

            初級

            初級

            JavaScript, ES6, HTML/CSS

            자바스크립트 제대로 배워볼래?講義サムネイル

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

            개발자의 품격

            似ている講座

            同じ分野の他の講座を見てみましょう！

            [ 부트스트랩 5 ] 빠르고 스마트하게 웹 사이트 만들기 | Bootsrap 입문용講義サムネイル

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

            코드덤

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

            入門

            入門

            HTML/CSS, Bootstrap

            [ 부트스트랩 5 ] 빠르고 스마트하게 웹 사이트 만들기 | Bootsrap 입문용講義サムネイル

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

            코드덤

            부트스트랩으로 개인 홈페이지 만들기講義サムネイル

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

            안경잡이개발자

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

            初級

            初級

            Bootstrap

            부트스트랩으로 개인 홈페이지 만들기講義サムネイル

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

            안경잡이개발자

            Vue-Django-Bootstrap 뚝딱 블로그講義サムネイル

            Vue-Django-Bootstrap 뚝딱 블로그

            김석훈

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

            初級

            初級

            Vue.js, Django, Bootstrap

            Vue-Django-Bootstrap 뚝딱 블로그講義サムネイル

            Vue-Django-Bootstrap 뚝딱 블로그

            김석훈

            [하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기講義サムネイル

            [하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기

            판다코딩

            HTML / JS / CSS 만을 가지고 직접 심리 테스트 사이트를 만들고, 배포해보는 Project 사이트를 제작합니다.

            初級

            初級

            HTML/CSS, JavaScript, Bootstrap

            [하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기講義サムネイル

            [하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기

            판다코딩

            부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프講義サムネイル

            부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프

            영코디 킴쌤

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

            初級

            初級

            Bootstrap, 반응형 웹, 웹 디자인

            부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프講義サムネイル

            부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프

            영코디 킴쌤

            부트스트랩을 활용한 반응형 웹제작 [실전편] 부트캠프講義サムネイル

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

            영코디 킴쌤

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

            初級

            初級

            Bootstrap, 반응형 웹, 웹 디자인

            부트스트랩을 활용한 반응형 웹제작 [실전편] 부트캠프講義サムネイル

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

            영코디 킴쌤

            Google Sheets로 만드는 Simple Blog!講義サムネイル

            Google Sheets로 만드는 Simple Blog!

            제주코딩베이스캠프

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

            初級

            初級

            Bootstrap, Google Apps Script, VSCode

            Google Sheets로 만드는 Simple Blog!講義サムネイル

            Google Sheets로 만드는 Simple Blog!

            제주코딩베이스캠프

            부트스트랩(BOOTSTRAP)3을 활용한 반응형 웹페이지 만들기講義サムネイル

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

            유용한IT학습

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

            初級

            初級

            Bootstrap, 반응형 웹

            부트스트랩(BOOTSTRAP)3을 활용한 반응형 웹페이지 만들기講義サムネイル

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

            유용한IT학습

            코알못에서 웹서비스 런칭까지 : 2021 제주 코딩 베이스캠프(Django)講義サムネイル

            코알못에서 웹서비스 런칭까지 : 2021 제주 코딩 베이스캠프(Django)

            제주코딩베이스캠프

            제주에서 진행하는 부트캠프를 온라인으로! 빠르게 자신만의 서비스를 만들어보세요! :)

            入門

            入門

            JavaScript, Python, Django

            코알못에서 웹서비스 런칭까지 : 2021 제주 코딩 베이스캠프(Django)講義サムネイル

            코알못에서 웹서비스 런칭까지 : 2021 제주 코딩 베이스캠프(Django)

            제주코딩베이스캠프

            실리콘밸리 엔지니어가 가르치는 파이썬 장고 웹프로그래밍講義サムネイル

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

            미쿡엔지니어

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

            初級

            初級

            Python, Django, REST API

            실리콘밸리 엔지니어가 가르치는 파이썬 장고 웹프로그래밍講義サムネイル

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

            미쿡엔지니어

            리액트로 나만의 블로그 만들기(MERN Stack)講義サムネイル

            리액트로 나만의 블로그 만들기(MERN Stack)

            싸플

            풀스택으로 나만의 블로그를 만들어 보아요~~!

            中級以上

            中級以上

            Express, React, Redux

            리액트로 나만의 블로그 만들기(MERN Stack)講義サムネイル

            리액트로 나만의 블로그 만들기(MERN Stack)

            싸플