1. 강좌 소개

부트스트랩은 트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 놓은 것입니다. 프론트엔드 작업시 일관성을 유지할 수 있는 장점으로 크게 각광 받는 프레임워크입니다. ‘프레임워크’ 라고 하는 것은 재사용이 가능한 요소들의 집합되어 있으며, 정해진 구조와 틀 안에서 이것들이 확장이 가능한 기반 코드로 이루어 짐을 뜻합니다.

2.강의 대상

웹개발자

디자이너

초보자

기타

3.강좌 관련  안내

각 강좌는 다음의 내용을 다룹니다. 프로젝트 완성을 위해 부트스트랩의 필요한 부분들을 하나 하나 강좌로 다지고 나갑니다.

강좌는 다음과 같이 구성됩니다.

1강 – 부트스트랩 웹 다지인 프레임워크에 대해서 소개하고 실제로 부트스트랩을 다운로드 받아 개발환경을 구축하는 시간을 가집니다.
2강 – 점보트론(Jumbotron)은 웹 사이트를 소개하는 부분을 만들 때 사용하는 부트스트랩 컴포넌트입니다. 점보트론을 이용해 웹 사이트를 소개하는 방법을 공부합니다.
3강 – 내비게이션 바는 특정한 웹 사이트의 전체적인 구성을 보여주는 컴포넌트입니다. 내비게이션 바를 작성하는 방법을 공부합니다.
4강 – 외부 스타일 시트를 알아 봅니다. 외부 스타일 시트란 HTML 문서 외부에서 디자인을 정의하는 CSS 문서를 따로 만드는 것을 의미합니다.
일반적으로 외부 스타일 시트는 웹 사이트 전반적으로 공통적으로 유지되는 디자인을 개발할 때 사용합니다.
5강 – 푸터. 푸터는 웹 사이트의 아래 쪽에 위치하며 기타 정보를 담는 영역입니다. 이번 시간에는 전반적인 디자인을 고려하여 적절하게 푸터를 삽입해 웹 사이트를 꾸미는 방법에 대해서 공부합니다.
6강 – 모달. 모달이란 웹 사이트에서 사용하는 팝업 창입니다. 모달 창을 띄우게 되면 모달을 끄기 전까지는 원래 화면으로 돌아가지 못하는 성질을 가지고 있으며 실제로 상세 정보
보여주기나 로그인 및 회원가입 등에서 많이 사용되고 있습니다. 모달을 이용해서 어떠한 정보를 팝업 창으로 보여주는 방법에 대해서 알아보는 시간을 가집니다.
7강 – 미디어 객체는 부트스트랩에서 하나의 멀티미디어 콘텐츠를 담기 위해서 사용할 수 있습니다. 흔히 SNS에서 사용되는 댓글이나 포스트 등에 이러한 미디어 객체 형태가 사용됩니다.
8강 – 웹 사이트를 확장하기 위해서는 각종 링크를 연결해서 하나의 완성된 웹 사이트의 틀을 마련해야 합니다. 구체적으로 웹 사이트를 확장하는 방법에 대해서 알아보는 시간을 가집니다.
9강 – 테이블. 테이블은 행과 열로 구성되어 데이터를 표현하는 방법으로 많이 사용됩니다. 테이블을 이용해서 강의 정보를 차례대로 출력하는 방법에 대해서 알아보는 시간을 가집니다.
10강 – 인용구. 인용구란 어떠한 문장을 멋지게 표현하기 위해서 웹 사이트에 넣는 태그 중 하나입니다. 인용구를 삽입하는 방법에 대해서 공부하는 시간을 가집니다.
설명11강 – 리스트 그룹. 리스트 그룹은 여러 개의 항목들을 하나의 목록으로 관리하기 위해서 사용하는 컴포넌트입니다. 이 리스트 그룹을 적절히 활용해서 다양한 정보를 차례대로 출력할 수 있습니다.
12강 – 동영상 불러오기. 부트스트랩의 컴포넌트를 이용해서 웹 사이트에 유튜브나 네이버 TV 등의 외부 동영상을 불러오는 방법을 공부합니다.
13강 – 소스코드 작성하기. 웹 문서에서 소스코드를 보여주기 위한 방법을 소개합니다. 부트스트랩에서는 손쉽게 몇 가지 태그를 이용해서 이러한 소스코드 표현 방법을 제공하고 있습니다.
14강 – 폼(Form) 태그는 클라이언트가 작성한 어떠한 정보를 서버로 전달하기 위해서 사용하는 태그입니다. 흔히 댓글 작성, 로그인, 회원가입 등이 이 폼 태그를 이용해서 구현됩니다.
웹 사이트 안에서 폼 태그를 이용해서 댓글 창, 로그인 창, 회원가입 창을 구현해보는 시간을 가집니다.
15강 – 프로젝트 완성 . 이번 강의를 마지막으로 간단한 웹 디자인 프로젝트가 완성됩니다.