Thumbnail
개발 · 프로그래밍 프론트엔드
부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기
56명이 수강하고 있어요.

22,000원

지식공유자 : Self-coding
총 83개 수업˙총 14시간 25분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
폴더에 추가 46 공유
초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

부트스트랩5 (Bootstrap5)의 클래스, 컴포넌트 등 개념을 이해하고 이를 바탕으로 응용, 변형하고 실습으로 3개의 프로젝트를 제작해봅니다.

✍️
이런 걸
배워요!
최신 부트스트랩5의 기초적인 클래스 개념을 익힙니다.
이해된 부트스트랩의 개념을 바탕으로 변형하고 응용할 수 있습니다.
실제적인 프로젝트를 통해 부트스트랩5의 전반적인 기능과 구조를 이해할 수 있습니다.
결국 부트스트랩의 디자인과 기능 등을 바탕으로 나만의 특색있는 웹사이트를 Front-end에서 구현할 수 있습니다.
나중에는 프런트엔드 개발 뿐만 아니라 백엔드 개발에도 부트스트랩을 활용할 수 있습니다.

웹 사이트, 누구나 만들 수 있다!
부트스트랩5로 만드는 웹 프로젝트

강의를
시작하기 전에

부트스트랩?

부트스트랩(Bootstrap)은 프론트엔드(Front-End)에서 웹사이트의 구성 코드인 html과 CSS 그리고 Javascript를 하나로 통합하여 정형화된 인터페이스를 제공해주고 있는 일종의 프레임워크 라이브러리입니다.
부트스트랩을 사용하면 누구나 웹사이트를 쉽고 빠르게 만들 수 있습니다. 부트스트랩이 없이 웹사이트를 제작하려면 html, CSS, Javascript를 웹 개발자가 따로따로 만들어서 서로 통합해야 합니다. 하지만 부트스트랩 프레임워크는 이를 일정한 형태로 만들어져 배포되었기 때문에 우리는 이 코드(클래스와 컴포넌트 등)들을 이용해서 더욱 쉽게 웹사이트를 제작할 수 있습니다.

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

부트스트랩이 있으면 코딩에 입문하는 사람들이 초보적인 html, CSS 지식으로 괜찮은 웹사이트를 만들 수 있습니다.
실제로 웹 코딩에 처음 입문해서 html과 CSS 등 지식을 배우고 실제로 html 프론트엔드 코딩을 할 때 매우 막막하셨던 경험을 해 보았을 수 있습니다. 이때 부트스트랩은 매우 강력하고 효율적으로 웹 코딩을 할 수 있도록 도와줍니다.
아울러 부트스트랩은 최초로 모바일의 Twitter를 개발할 때 시작된 라이브러리인 까닭에 모바일이나 태블릿 등에 반응적으로 디스플레이되는 장점이 있습니다. 

왜 이 강의로 배워야 할까요?

이 강의에서는 부트스트랩의 구조와 콘텐츠에 대해 집중적으로 공부합니다. 개별적인 컴포넌트(Components)들은 실제 프로젝트를 만들어보면서 포괄적이고 반복적으로 코딩을 연습할 것입니다. 몇 개의 실질적인 프로젝트를 처음부터 끝까지 제작해 보면 웹 코딩의 기술은 비약적으로 발전할 것이고 이를 바탕으로 추후 Javascript, Backend 구축 등 심화된 웹 개발을 하는데 매우 단단한 기초를 다질 수 있습니다.
요컨대, 이 강의는 바로 웹 개발의 입문 또는 초보 단계를 빠르게 학습할 수 있게 하려고 기획되었고 제작되었습니다.


bootstrap 5

부트스트랩5
기초부터 웹 프로젝트 만들기

이래서야 언제 홈페이지를 완성하지?

웹 개발에 입문하면 순서대로 다음과 같은 단계적 딜레마에 빠질 것입니다.

  1. 웹사이트·홈페이지를 제작하고 싶어 구글과 유튜브에서 html에 대해 공부했다. 하지만 콘텐츠의 정보를 출력하는 것으로 끝날 뿐, 멋진 웹사이트를 만들기란 쉽지 않다!
  2. 그래서 웹사이트에 예쁜 디자인을 입히기 위해 CSS를 공부하기 시작했다. 글자 크기나 색상 변경 같은 것 외에는 도무지 이해되지 않는다!
  3. 슬라이드, 스크롤, 드롭다운, 팝업 등 좀 더 다이내믹하게 웹에서 글자와 이미지들이 변화하는 기능을 만들고 싶다. 하지만 이런 것을 하려면 자바스크립트(Javascript) 언어를 또 배워야 한다!
  4. 홈페이지를 만들려면 html, CSS, Javascript를 다 배워야 하나? 이래서야 언제 홈페이지를 완성하지?

웹 개발을 배워도 고민은 계속된다

위의 고민 사항이 해결되어도 웹 개발에서는 수없이 꼬리에 꼬리를 무는 궁금점과 고민이 생기게 됩니다. 가령 매번 html 파일을 만들지 말고 기본적인 디자인 템플릿만 만들고 다양한 콘텐츠도 효율적이고 경제적으로 넣을 수 없을까? 또 이 콘텐츠 데이타를 저장하고 관리하는 방법은 없을까? 웹사이트의 속도를 빠르게 웹페이지를 렌더링하는 방법은 없을까? 등등, 다양한 질문들이 계속 떠오릅니다.

하지만 부트스트랩을 배운다면?

하지만 모든 학습과 경험은 단계가 있듯이, 프론트엔드 뿐만 아니라 백엔드를 포괄하는 풀스택 웹 개발의 제일 첫걸음은 html과 CSS가 될 것입니다. 따라서 html/CSS의 완벽한 이해가 필요하고 이를 자유롭게 활용할 수 있어야 합니다. 바로 부트스트랩은 이러한 초기 고민을 깔끔하게 해결해 줄 수 있습니다.
〈부트스트랩5 : 기초에서 프로젝트 제작〉 강의를 수강하신다면 말입니다!


이 강의를
소개합니다

웹코딩 초보자

초보 개발자 및 html,
css, Javascript를
배워본 웹코딩 입문자

부트스트랩5가 궁금해

기본 사용법은 알지만
클래스, 컴포넌트 등
응용법이 궁금할 때

더 빠르게 못하나?

웹 사이트 개발 시에
프론트엔드 개발을
빠르게 끝내고 싶은 분

실무에서는 어떻게?

실무 프로젝트에서
부트스트랩 적용법이
궁금하신 분

이런 분들께 추천합니다!

  • 웹코딩을 시작한 지 얼마되지 않으신 초보 개발자
  • 어느 정도 html, css 그리고 Javascript를 배우신 분
  • 부트스트랩 5의 기본 클래스 개념, 그리고 컴포넌트를 공부하고 싶은 분
  • 부트스트랩의 기본 내용은 알고 있는데, 이를 변형하고 응용하고 싶은 분
  • 실제 프로젝트에서 어떻게 부트스트랩이 적용되는지 궁금하신 분
  • 프론트엔드 웹개발을 빠르게 하고 싶은 분
  • 짧은 시간에 이상의 지식들을 컴팩트하게 배우고 싶은 분

이 강의를 들은 후에는?

  • html, css 같은 웹개발의 기초를 다질 수 있습니다.
  • 쉽고 빠르게 프론트엔드 웹디자인을 할 수 있습니다. 원하는 형태의 웹코딩을 프론트엔드에서 할 수 있고, 이를 바탕으로 다양한 활용을 할 수 있습니다.
  • 이 후 워드프레스 같은 CMS나 NodeJS 같은 서버 구축과 같은 심화 학습을 통해 궁극적으로 웹 개발 전문가가 될 것입니다.

이 강의에는
이런 특징이 있어요

이렇게 진행됩니다!

이 강의는 크게 부트스트랩 5의 기초편과 프로젝트 제작편으로 구분됩니다.

  • 기초편
    • 부트스트랩의 Grid, Display, Box, Position 그리고 Contents의 클래스 개념을 익히게 됩니다.
  • 프로젝트
    • 총 3개로 구성되었습니다.
    • 첫 번째 프로젝트보다 두 번째가, 두 번째보다 세 번째가 조금씩 커스터마이징을 통해 난이도가 높아집니다.
    • 가장 기초적인 개념부터 시작해 실제적인 활용과 응용을 거쳐 최종적으로 내가 원하는 웹사이트를 코딩할 수 있는 능력을 반복적이고 단계적으로 익힐 수 있습니다.
  • 각 강의에 사용된 코드는 파일로 제공됩니다.

강의 내용 소개

  1. 기초편: 부트스트랩5의 개념과 자주 사용되는 클래스와 컴포넌트에 대해 학습합니다.
  2. 프로젝트 1: One-page Website로 CSS는 최소한으로 이용해서 부트스트랩의 클래스와 컴포넌트만으로 제작해봅니다.
  3. 프로젝트 2: 부트스트랩의 클래스와 컴포넌트에 더해서 CSS(SCSS)와 Javascript를 커스터마이징해서 Multi-page Website를 구축합니다. 아울러 카카오맵 API를 이용해 지도를 자바스크립트로 코딩하는 방법을 배웁니다.
  4. 프로젝트 3: 기본적인 부트스트랩은 물론이고, SCSS와 Javascript module화를 통해 좀 더 고급스러운 Front-end 웹 코딩을 배우게 됩니다. 이 프로젝트에서 사용하는 지도는 네이버맵 API를 이용해서 코딩합니다.

Q&A
예상 질문

Q. 컴퓨터 관련 전공자가 아닌데 들을 수 있는 강의인가요?

물론입니다. 이 강의는 그렇게 어렵지 않습니다. 컴퓨터 공학, 웹에 대한 딱딱한 이론이나 역사를 공부하는 게 아니라, 웹 개발의 기초 중 html, CSS 그리고 Javascript를 통합한 부트스트랩 라이브러리를 프로젝트를 통해 공부하는 강의입니다.
또한, 훌륭한 웹 개발자 중에는 비전공자도 많습니다. 저 역시 컴퓨터 관련 비전공자랍니다!

Q. html과 CSS에 대해 정말 조금밖에(또는 전혀) 모르는데 강의를 따라갈 수 있을까요?

물론입니다. html과 CSS라는 용어만이라도 들은 적이 있으면 공부를 시작하는 데는 충분합니다. 다만, 모든 공부가 그렇듯이 다소 끈기와 인내심 그리고 호기심은 있어야 합니다.

Q. 강의를 듣기 전에 준비해야 할 것이 있나요?

우선 인터넷이 연결되는 컴퓨터가 있어야 합니다. PC, Mac, Notebook 등 종류와 사양은 상관없습니다.
html, CSS, Javascript 등 프로그래밍 언어를 조금 이해하고 있으면 더욱 좋습니다. 만약 이에 대한 지식이 부족하다면 유튜브에서 무료 동영상 강의를 검색해보세요! 2~3시간 정도 공부하시면 충분합니다.
웹브라우저는 크롬(Chrome, 가장 추천) 또는 파이어폭스(FireFox, general or developer edition)을 이용하실 것을 권장합니다.
또한 코딩을 할 수 있는 코드 에디터(Visual studio code editor, sublime text editor, atom editor 등)라면 어떤 것이든 상관없습니다. 이 강의에서는 최근 많이 사용하는 Visual studio code editor(강의에서 사용)를 강추합니다.

Q. PC(윈도우 운영체제)에서도 강의를 듣고 코딩을 할 수 있나요?

물론입니다. 이 강의는 MAC 운영체제를 사용해 코딩을 진행하고 있지만, 윈도우, 리눅스 등 어떠한 운영체제에서도 문제없이 강의를 수강하고 코딩할 수 있습니다.


이 강의의
지식공유자는

Self-coding

  • Front-End (WordPress) Developer
  • Medipress 웹사이트 제작 및 교육(프리랜서)
  • Udemy Instructor

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
부트스트랩의 기본 구조와 개념, 그리고 컴포넌트를 공부하고 싶은 분
웹 코딩을 처음 접하시는 분 중 쉽고 빠르게 웹 개발을 하고 싶은 분
부트스트랩의 기본 내용은 알고 있는데, 이를 변형하고 응용하고 싶은 분
📚
선수 지식,
필요한가요?
html, CSS, Javascript 등 컴퓨터 언어를 조금 이해하고 있으면 더욱 좋습니다.
부트스트랩(Bootstrap)이라는 이름은 들어본 적이 있다면 이 강좌를 수강하기에 아무 문제가 없습니다.

안녕하세요
Self-coding 입니다.
Self-coding의 썸네일
커리큘럼 총 83 개 ˙ 14시간 25분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 인트로
전체 강좌 소개 미리보기 06:27
부트스트랩 개념과 특징 13:50
코드 에디터 소개 및 설정 09:35
섹션 1. 기초편
기초편 강의 자료 파일
Grid 1 08:45
Grid 2 07:44
Grid 3 04:13
Justify Align & Gutters 09:49
Break 03:32
Offset 02:53
Ordering 04:01
Display 07:19
Flex-1 05:39
Flex-2 06:00
Border & Shadow 10:56
Margin & padding 06:48
Sizing 04:11
Position 1 14:45
Position 2 02:23
Float 05:13
Typography 07:51
Text 08:41
Color 06:59
Image & figure 03:58
Ratio 04:07
Table 03:13
섹션 3. 프로젝트 2
프로젝트 2 - Intro 미리보기 06:29
프로젝트 2 - Setting 08:29
프로젝트 2 - Menu - 1 23:14
프로젝트 2 - Menu - 2 (Offcanvas) 12:57
프로젝트 2 - Front Carousel 13:14
프로젝트 2 - Front programs section 09:55
프로젝트 2 - Front infos section 09:04
프로젝트 2 - Front latest section 18:49
프로젝트 2 - Map section (Kakao api map Jasvascript) 17:15
프로젝트 2 - Footer section 12:22
프로젝트 2 - Page template 15:17
프로젝트 2 - Blog template 17:38
프로젝트 2 - Post template 12:14
프로젝트 2 - Modal 10:01
섹션 4. 프로젝트 3
프로젝트 3 Intro 미리보기 11:26
프로젝트 3 - Index Setup 11:22
프로젝트 3 - Menu - 1 20:23
프로젝트 3 - Menu - 2 (tooltip) 08:19
프로젝트 3 - Menu - 3 11:59
프로젝트 3 - Menu - 4 (Modal) 13:30
프로젝트 3 - Front Carousel 16:44
프로젝트 3 - Front Info section 21:36
프로젝트 3 - Front Card section 05:24
프로젝트 3 - Front Gallery section 09:16
프로젝트 3 - Front Latest section 10:43
프로젝트 3 - Footer 17:40
프로젝트 3 - Scroll Top (Javascript) 17:34
프로젝트 3 - Intro page setup 12:21
프로젝트 3 - Intro CEO & Brand section 10:57
프로젝트 3 - Intro Navs 13:49
프로젝트 3 - Intro Accordion 09:32
프로젝트 3 - Map (Naver map api JS) 19:39
프로젝트 3 - Page setup 04:42
프로젝트 3 - Page main section 18:48
프로젝트 3 - Page Communication section 05:33
프로젝트 3 - Blog setup 05:34
프로젝트 3 - Blog CTA & Carousel section 10:29
프로젝트 3 - Blog Card section 14:46
프로젝트 3 - Blog Pagination & aside 13:02
프로젝트 3 - Post setup 02:34
프로젝트 3 - Post meta section 19:32
프로젝트 3 - Post Content -1 10:38
프로젝트 3 - Post Content -2 09:54
프로젝트 3 - Post Comments 11:00
프로젝트 3 - Related posts 08:05
프로젝트 3 - Reservation && Epilogue 13:05
추후 새로운 프로젝트로 업로드하겠습니다.
강의 게시일 : 2021년 11월 02일 (마지막 업데이트일 : 2021년 11월 14일)
수강평
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.

22,000원

폴더에 추가 46 공유
지식공유자 : Self-coding
총 83개 수업˙총 14시간 25분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
수강 전 궁금한 점이 있나요?
문의하기
문의
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스