introduce responsive web, bootstrap

1. Twitter Bootstrap
lsh00124@naver.com 이상훈

2. Contents
1. Responsive website
2. What is Bootstrap?
3. Prior knowledge before you study
4. Learning sequence
5. Plan
6. Final Goal!
2

3. 디스플레이 종류에 따라 화면의 크기가 자동으로 최적화되도록 조절되는 웹
페이지
즉, Responsive ( 즉각 반응하는) + Web(웹)
http://blog.naver.com/arias419/220170145216
1. 사용자와 친화적 기능
2. 원활한 모바일 이용으로 구매율 상승
3. 검색엔진의 최적화
What is Responsive website?
3

4. http://mmbrandagency.com/
http://foodsense.is/
http://getbootstrap.com/
4

5. 트위터에서 개발한 UI 툴킷 : 적은 코딩으로도 유려하고 풍부한 결과를 얻을 수 있는 강력한 라이브러리
반응형 웹이라는 트랜드를 반영 : 한번의 개발으로 PC와 모바일 모두에 대응할 수 있어 개발시간 단축, 유지보수의 이
점
최고 수준의 UI 디자이너들이 디자인한 기본 디자인 : 디자이너가 아니라도 일정 수준 이상의 결과물을 얻을 수
있습니다.
5
매끄럽고, 직관적이고, 강력한!!
http://getbootstrap.com/2.3.2/index.html
What is Bootstrap?

6. 6
HTML
CSS - 옵션, 디자인을 커스터마이징 하기 위해서 필요
JavaScript - 옵션, 툴킷에 새로운 기능을 추가하기 위해
서 필요
Jqeury – bootstrap은 jqeury 기반
Prior knowledge
Prior knowledge before you study

7. 7
Lecture site : 생활코딩 (http://opentutorials.org/course/477)
Refernce site : 부트스트랩 (http://bootstrapk.com/BS3)
부트스트랩 친절한 한글버전 (http://bootstrapk.com/BS3)
w3schools (http://www.w3schools.com/bootstrap/default.asp)
Learning sequence

8. 8
1. Get started : 프로젝트 내용과 방법, 간단한 템플릿으로 시작하기
2. Scaffolding : 부트 스트랩의 레이아웃 및 구성 요소를 기반으로한 12개의 반응형 그리드
3. Base css : 트위터 디자이너들이 만든 높은 퀄리티의 css, 어떻게 활용했을 때 어떤 디자인이 만들어
지는지
4. Component : 페이지를 구성하는 요소들
5. Javascript : 페이지를 구성하는 요소들
Learning sequence

9. ``
``
``
``
Get started
Base css
``Scaffolding
``Component
``
``
Javascript
이미지 갤러리 site
Plan
9

10. Final goal!
10