부트스트랩(Bootstrap)은 Front End에서 웹사이트의 구성 코드인 html과 css 그리고 javascript를 하나로 통합하여 정형화된 인터페이스를 제공해주고 있는 일종의 프레임워크 라이브러리입니다.
웹사이트를 제작할 때 html과 css, javascript를 웹개발자가 따로따로 만들어서 서로 통합해야 하겠지만, 이 부트스트랩 프레임워크는 이를 일정한 형태로 만들어져 배포되었기 때문에 우리는이 코드(컴포넌트 등)들을 이용해서 더욱 쉽게 웹사이트를 제작할 수 있습니다.
이 강좌에서는 부트스트랩의 구조와 컨텐츠에 대해 집중적으로 공부하고, 개별적인 컴포넌트(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 등 어떤 코드 에디터를 사용하시든 상관없습니다.
이 페이지나 포스트를 소셜네트워크에 공유해주세요!