bootstrap 살펴보기
Post on 18-Dec-2014
1.912 Views
Preview:
DESCRIPTION
TRANSCRIPT
2012.01.03, colud UI, 현영배
TwitterBoot-strap
• What
• How Come
• Grid system
• Responsive design
• Base CSS
• UI Components & Jquery Plugin
• LESS
• Customize
• Summary
content
Bootstrap
• 트위터에서 오픈 소스로 공개한 웹 프론트엔드 개발 도구 (Toolkit)
• 트위터 UI 디자이너 Mark Otto 와 개발자 Jacob Thornton 개발
• 오픈소스기반의 HTML3,CSS3,JS 만든 UI 프레임워크
What
4
• 현시점에서 서비스를 수정한다면 ?
• 멀티브라우저 , 멀티 플렛폼 – 시간 , 비용 등 발생
How Come
5
Grid system
Grid system
기본 그리드 시스템
레이아웃
7
• 레이아웃 디자인 기본적 요소
• Div 태그와 css 를 이용하여 화면을 분할해 요소를 배치
• 12 열의 격자로 이루어져 있고 기본 버전과 유동 버전 등이 있음
• 그 외에도 다양항 CSS 프레임워크이 존재함
Grid system
8
Grid system
기본 그리드 시스템
레이아웃
9
Responsive design
Responsive design
반응형웹디자인
11
• PC, 태블릿 , 스마트폰 등 다양한 해상도에 반응
Responsive design
12
Base CSS
Base CSS
14
테이블
클래스 사용법 및 예제
양식
Base CSS
15
버튼 샘플 제공
• 초기엔 IE 를 지원하지 않았으나 현재 IE7 이상에서도 호환 (IE 호환이 아직
취약 )
• IE 에서 CSS 지원 정도에 따라 조금씩 달라 보일 수있으나 레이아웃과 색감 등은
유지
• 버튼의 경우 UI 의 아이콘 이미지는 Glyphicons 에서 제공한 아이콘셋을
이용하고 CSS Sprite 기법을 적용하여 성능향상
Base CSS
16
Glyphicons 아이콘 셋 아이콘 셋 적용된 UI 컨포넌트
UI Compo-nents & Jquery Plugin
UI Components & Jquery Plugin
18
컨포넌트
• UI 컴포넌트 - 패턴을 재사용하기 쉽게 마크업 ,CSS,JS 를 묶어서 제공하는 것
• 부스트랩에는 기본 CSS 가 적용 되어 있고 다양한 UI 컴포넌트가 존재
• 동적인 인터랙션 필요시 Jquery 플러그인 형태로 컨트롤 가능
UI Components & Jquery Plugin
19
CSS 사용 기본 컴포넌트 목록
http: / / twi t ter.g i thub.com/bootstrap/components.html
Jquery 플러그인 인터랙션 컨포넌트
http: / / twi t ter.g i thub.com/bootstrap/ javascr ipt .html
LESS
• 탄생 배경 –일반 프로그래밍 언어와 달리 상속이나 변수 개념이 없어 CSS 작성과
관리가 번거롭기 때문에 CSS 전처리 도구들이 생김
• CSS 전처리 도구 – 자체적 정의 문법 .
변수 , 상속 , 연산 , 함수 등의 기능 가능하며 확장해 작성된 코드를 컴파일해
브라우저에
호환하는 최종 CSS 를 만들어 냄
• 다양한 CSS 전처리 도구중 부트스트랩은 LESS 를 도구로 사용
LESS
21
LESS
22
변수
연산자
LESS
23
중첩선택자
중첩선택자 컴파일 결과 ( 클라이언트방식과 서버방식 존재 )
Customize
• 부트스트랩 홈페이지에서 LESS 에 적용된 변수 값을 변경하고 사용할
컴포넌트와 Jquery 플러그인을 선택하면 필요한 CSS 와 JS 만 골라서 다운
받을 수 있음
• 커스터마이징 페이지 이외에 다양한 부트스트랩용 테마 제공 사이트를 활용 할
수있음
Customize
25
• 개발자들이 디자인을 적용하기 어려워서 쉽게 UI 만들기 위해 만들어짐
• 크로스브라우징 , 반응형웹 , 멀티 플렛폼 대응
• 커스터마이징이 상대적으로 쉽고 다양한 예제 및 샘플제공 . 각종 테마 존재
• 대부분의 프레임워크가 그렇듯 전혀 다른 커스터마이징은 힘들다 . 개발자가
손쉽고 빠르게 디자인 이슈 없이 만들 때 사용하기 좋다 .
Summary
26
참고 문헌http: / / twi t ter.g i thub.com/bootstrap/ index.htmlhttp: / /www.s l ideshare.net/d ja lmaaraujo/bootstraptwitterhttp: / / rk jun.wordpress.com/2012/02/28/bootstrap-2-0- intro/http: / /news.ycombinator.com/ i tem?id=4588053http: / /www.al is tapart .com/art ic les/bui ld ing-twit ter-bootstrap/http: / /he l lowor ld.naver.com/hel lowor ld/67876https: / /g i thub.com/twi tter /bootstrap/ tree/eb81782cdbdc68aaebe4fa561b5fbb73ef866611
Thanks
top related