부트스트랩(Bootstrap) 웹 디자인 실전 강좌

부트스트랩(Bootstrap) 웹 디자인 실전 강좌

14명의 학생들이 수강

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강 – 프로젝트 완성 . 이번 강의를 마지막으로 간단한 웹 디자인 프로젝트가 완성됩니다.

강좌 교육과정 소개 (COURSE CURRICULUM)

부트스트랩 웹 디자인 실전 강좌
1강 – 부트스트랩 소개 및 개발환경 구축하기 00:11:00
2강 – 점보트론(Jumbotron) 00:06:00
3강 – 내비게이션 바 00:12:00
4강 – 외부 스타일 시트 00:12:00
5강 – 푸터 00:11:00
6강 – 모달 00:08:00
7강 – 미디어 객체 00:07:00
8강 – 웹 사이트 확장하기 00:10:00
9강 – 테이블 00:07:00
10강 – 인용구 00:05:00
11강 – 리스트 그룹 00:03:00
12강 – 동영상 불러오기 00:03:00
13강 – 소스코드 작성하기 00:04:00
14강 – 폼(Form) 00:12:00
15강 – 프로젝트 완성 00:02:00

강의 평가

5

5
1 개의 수강평
  • 5 stars1
  • 4 stars0
  • 3 stars0
  • 2 stars0
  • 1 stars0
  1. 유익한 강좌 . 감사드립니다.

    5

    좋은 강좌 나눠 주셔서 정말 감사드립니다.

강좌 수강 Take This Course
  • 무료
  • 평생
  • 위시리스트
  • 1 시간, 53 분
  • 강좌 수15

샵투스쿨의 목표

교육은 백년지대계 !
개인과 국가 발전의 초석은 교육과 배움입니다.새로운 지식과 기술 재교육의 갈망을 샵투스쿨에서 채우세요.

shop2school 제휴 문의1-302-613 -1812 |이메일 info@shop2world.com | 법인명: SHOP2WORLD, INC. | 2801 CENTERVILLE RD 1ST FLOOR PMB 8085 WILMINGTON DE 19808 USA.