Top
medipress favicon 다크 / 라이트 모드

어두운 테마는 화면을 어둡게 해서 눈의 피로를 줄여줍니다. 검색 버튼 옆에 있는 다크 모드를 써보세요.

Loading...

10시간 만에 부트스트랩 기초부터 마스터하기(+ 웹팩, 프로젝트 제작)

부트스트랩(Bootstrap) 4에 대한 최신 개념을 이해하고 이를 바탕으로 응용, 변형하고 실습으로 My website를 Front-End에서 코딩해봅니다.

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

이 강좌에서는 부트스트랩의 구조와 컨텐츠에 대해 집중적으로 공부하고, 개별적인 컴포넌트(Components)들은 실제 웹사이트를 만들어보면서 포괄적으로 연습합니다.

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

  1. 주요 개념인 부트스트랩 Grid 개념(Container와 Columns 등)에 대해 CSS3의 display flex 개념을 통해 전반적으로 공부하고,
  2. 부트스트랩 컨텐츠(Typography, Image 등)에 사용되는 클래스값에 대해 이해한다.
  3. Modern Javascript를 이용한 애플리케이션에 이용되는 Module bundler Compling Library인 웹팩(Webpack)에 대해 공부하고,
  4. 이를 통해 Webpack Starter template를 구성한다.
  5. 부트스트랩4의 컴포넌트를 이용하여 Website를 코딩한다.
  6. 또한 몇 가지 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 등 어떤 코드 에디터를 사용하시든 상관없습니다.


CodingDIY Front-End Web designer

안녕하세요. 부트스트랩과 워드프레스 그리고 자바스크립트 등으로 프런트엔드 웹개발를 하고 있으며, 또한 Udemy에 이들을 이용해 초보자라도 혼자서 웹사이트를 개발할 수 있도록 코딩 강좌를 하고 있는 메디프레스 회사의 팀장(개발자)입니다.


답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

연관 포스트

2021 부트스트랩 5(Bootstrap 5) – 기초부터 웹 프로젝트 만들기

이 강좌는 인프런 사이트(https://www.inflearn.com)에 2021년 11월 초에 런칭한 부트스트랩5 동영상 강좌입니다.

DIY Coding Further – 워드프레스 전문가 되기

 워드프레스(WordPress)는 SEO 친화적이며, 모바일 반응형, 정기적인 업데이트, 보안이 우수하다는 장점 뿐만 아니라 오픈 소스로…

내 손으로 직접 만들어보는 워드프레스 테마 코딩

워드프레스(WordPress)는 전세계적으로 가장 많은 비율로 홈페이지를 제작에 사용되는 소프트웨어 툴입니다. 약 1/4 이상의 홈페이지가 이…