부트스트랩 배우기 // 10시간 만에 부트스트랩 기초부터 마스터하기 강좌 (+ 웹팩, 프로젝트 제작, DIY Bootstrap 4)

부트스트랩(Bootstrap) 4에 대한 최신 개념을 이해하고 이를 바탕으로 응용, 변형하고 

실습으로 My website를 Front-End에서 코딩해봅니다.

부트스트랩(Bootstrap)은 Front Endh에서 웹사이트의 구성 코드인 html과 css 그리고 javascript를 

하나로 통합하여 정형화된 인터페이스를 제공해주고 있는 일종의 프레임워크 라이브러리입니다. 

웹사이트를 제작할 때 html과 css, javascript를 웹개발자가 따로따로 만들어서 서로 통합해야 하겠지만, 이 부트스트랩 프레임워크는 이를 일정한 형태로 만들어져 배포되었기 때문에 우리는이 코드(컴포넌트 등)들을 이용해서 더욱 쉽게 웹사이트를 제작할 수 있습니다.

 

 

 

 

이 강좌의 대상:
부트스트랩의 기본 구조와 개념, 그리고 컴포넌트를 공부하고 싶은 분
부트스트랩의 기본 내용은 알고 있는데, 이를 변형하고 응용하고 싶은 분
최신 프런트 엔드 웹개발에서 인기있는 웹팩에 대해서 관심이 많은 분
그리고,
짧은 시간(10시간)에 이상의 지식들을 컴팩트하게 배우고 싶은 분들입니다.

 

 

이 강좌에서는 부트스트랩의 구조와 컨텐츠에 대해 집중적으로 공부하고, 

개별적인 컴포넌트(Components)들은 실제 웹사이트를 만들어보면서 포괄적으로 연습합니다.

대략적인 주요 커리큘럼을 살펴보면 다음과 같습니다:

주요 개념인 부트스트랩 Grid 개념(Container와 Columns 등)에 대해 CSS3의 display flex 개념을 통해 전반적으로 공부하고, 부트스트랩 컨텐츠(Typography, Image 등)에 사용되는 클래스값에 대해 이해한다.

Modern Javascript를 이용한 애플리케이션에 이용되는 Module bundler Compling Library인

웹팩(Webpack)에 대해 공부하고, 이를 통해 Webpack Starter template를 구성한다.

부트스트랩4의 컴포넌트를 이용하여 Website를 코딩한다.

 

또한 몇 가지 Javascript 예제와 css 커스터마이즈하여 

기존의 부트스트랩 컴포넌트와 구조를 변형하여 더 나은 Website를 최종적으로 완성한다.

이 강좌에 사용하는 Resource는, Bootstrap 4.1(및 이에 필요한 jQuery, popper.js),Fontawesome 5, animate.

css 및 wow. js, Lightbox2(css와 js) 그리고 Google map api 등입니다. 

Code Editor는 Sublime Text를 이용하여 동영상을 만들었지만,

 Visual Studio Code, Atom 등 어떤 코드 에디터를 사용하시든 상관없습니다.

 

 

배울 내용
부트스트랩의 전반적인 기능과 구조를 이해할 수 있습니다.
이해된 부트스트랩의 개념을 바탕으로 변형하고 응용할 수 있습니다.
궁극적으로 부트스트랩의 디자인과 같은 듯, 다른 특색있는 웹사이트를 Front-end에서 구현할 수 있습니다.
부수적으로, 웹팩, GIT, 자바스크립트 등에 대해서도 이해할 수 있습니다.

 

 

 

요구 사항
인터넷이 연결되는 컴퓨터가 있어야 합니다. PC, Mac, Notebook 등 종류와 사양은 상관없습니다.
웹브라우저는 크롬(Chrome) 또는 파이어폭스(FireFox, general or developer edition)을 이용하실 것을 권장합니다.
코드 에디터로는 Sublime Text(강좌에서 사용), Visual Code, Atom, NotePad++ 등 어떤 것이든 좋습니다.
html, css, js 등 컴퓨터 언어를 조금 이해하고 있으면 더욱 좋습니다.
부트스트랩(Bootstrap)이라는 이름은 들어본 적이 있다면 이 강좌를 수강하기에 아무 문제가 없습니다.
하지만, 이상의 웹 지식이 없더라도 상관없습니다.
호기심과 꾸준함만 있다면 OK!

10시간 만에 부트스트랩 기초부터 마스터하기
강의 자세히 보기

 

 

 

2020/10/19 - [해외직구] - ASUS ROG Strix X570-E 게이밍 ATX 마더보드 및 AMD Ryzen 7 3700X 8-코어 아마존가 $595

ASUS ROG Strix X570-E 게이밍 ATX 마더보드 및 AMD Ryzen 7 3700X 8-코어 아마존가 $595

2020/10/15 - [배우기 강좌] - 파이썬 Python 드론 프로그래밍 입문 강좌 미국 실리콘밸리 현역 엔지니어와 함께하는 드론 프로그래밍 강좌

파이썬 Python 드론 프로그래밍 입문 강좌 미국 실리콘밸리 현역 엔지니어와 함께하는 드론 프로��

2020/10/13 - [해외직구] - 빔프로젝터추천 // 30,000 시간 LED 램프 수명, 300 인치 이미지 프로젝터 XGIMI H2 4K 1080p HD 스마트 프로젝터

빔프로젝터추천 // 30,000 시간 LED 램프 수명, 300 인치 이미지 프로젝터 XGIMI H2 4K 1080p HD 스마트 프��

2020/10/11 - [해외직구] - 애플맥북 // 아마존가 $2,099 애플 맥북 프로 9세대 6코어 인텔 코어 i7, 16인치, 16GB RAM, 512GB 스토리지

애플맥북 // 아마존가 $2,099 애플 맥북 프로 9세대 6코어 인텔 코어 i7, 16인치, 16GB RAM, 512GB 스토리�

2020/10/12 - [해외직구] - 15인치노트북추천 // 터치패드가 장점인 아수스 젠북 15 노트북 (15.6인치 UHD 4K NanoEdge 디스플레이, 인텔 코어 i7-10510U)

15인치노트북추천 // 터치패드가 장점인 아수스 젠북 15 노트북 (15.6인치 UHD 4K NanoEdge 디스플레이,

2020/08/23 - [배우기 강좌] - 검색웹만들기 강좌 // 파이썬 웹 Django(장고) 프레임워크로 주식 검색 웹 만들기

검색웹만들기 강좌 // 파이썬 웹 Django(장고) 프레임워크로 주식 검색 웹 만들기

2020/08/23 - [배우기 강좌] - 개체지향 프로그래밍 및 설계 (Java) 강좌 // 개체지향 프로그래밍(OOP)'과 '개체지향 분석 및 설계(OOAD)'를 배우기

개체지향 프로그래밍 및 설계 (Java) 강좌 // 개체지향 프로그래밍(OOP)'과 '개체지향 분석 및 설계(

2020/08/22 - [배우기 강좌] - 캔바(Canva)로 SNS 콘텐츠 만드는 방법 // 인터넷 강좌로 캔바 배우기 소셜미디어에 필요한 이미지를 쉽고 빠르게 만드는 방법

캔바(Canva)로 SNS 콘텐츠 만드는 방법 // 인터넷 강좌로 캔바 배우기 소셜미디어에 필요한 이미지�

2020/08/19 - [배우기 강좌] - 엑셀 배우기 인강 // 데이터 수집과 정리의 기본 반드시 알야야 하는, 그러나 상당수가 모르는 내용

엑셀 배우기 인강 // 데이터 수집과 정리의 기본 반드시 알야야 하는, 그러나 상당수가 모르는 내

2020/08/15 - [배우기 강좌] - 게임개발초보자 강좌 // 코딩에 관심이 있는 비전공자도 만들수 있는 Swift 언어로 만드는 테트리스 게임 (Tetris Game) 만들기

게임개발초보자 강좌 // 코딩에 관심이 있는 비전공자도 만들수 있는 Swift 언어로 만드는 테트리�

2020/08/12 - [배우기 강좌] - 동영상강의 / 맥에서 쉽게 영상 자르고 붙이기 인터넷 강의로 동영상 편집 실력자가 되어 보세요 ~

동영상강의 / 맥에서 쉽게 영상 자르고 붙이기 인터넷 강의로 동영상 편집 실력자가 되어 보세요

2020/08/09 - [배우기 강좌] - 인터넷강의 // MBA 과정 전체를 한강좌로 시작부터 IPO까지 사업에 관해 귀하가 알아야 할 모든 것( 경영 강좌 1 위)

인터넷강의 // MBA 과정 전체를 한강좌로 시작부터 IPO까지 사업에 관해 귀하가 알아야 할 모든 것(

2020/07/24 - [배우기 강좌] - HTML 배우기// 입문자를 위한 핵심을 꿰뚫는 강의 최단시간 HTML 완전정복

HTML 배우기// 입문자를 위한 핵심을 꿰뚫는 강의 최단시간 HTML 완전정복

2020/07/24 - [배우기 강좌] - 회사 및 다양한 프로젝트에서 종종 사용되는 AWS 서비스들의 핵심 이론을 배우는 AWS(Amazon Web Service) 입문자를 위한 강의

회사 및 다양한 프로젝트에서 종종 사용되는 AWS 서비스들의 핵심 이론을 배우는 AWS(Amazon Web Servic

2020/07/23 - [배우기 강좌] - 엑셀강의 // Excel+R 누구나 하는 데이터 분석 누구나 통계 할 수 있다는 자신감을 얻는 강의

엑셀강의 // Excel+R 누구나 하는 데이터 분석 누구나 통계 할 수 있다는 자신감을 얻는 강의