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

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

강의를
시작하기 전에

부트스트랩?

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

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

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

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

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

---

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

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

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

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

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

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

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

하지만 모든 학습과 경험은 단계가 있듯이, 프론트엔드 뿐만 아니라 백엔드를 포괄하는 풀스택 웹 개발의 제일 첫걸음은 html과 CSS가 될 것입니다. 따라서 html/CSS의 완벽한 이해가 필요하고 이를 자유롭게 활용할 수 있어야 합니다. 바로 부트스트랩은 이러한 초기 고민을 깔끔하게 해결해 줄 수 있습니다.
〈부트스트랩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
예상 질문

---

이 강의의
지식공유자는

Self-coding

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

---