부트스트랩(Bootstrap) 트위터사가 만든 HTML, CSS, JS 개발을 위한 오픈소스 툴킷

Presentation on theme: "부트스트랩(Bootstrap) 트위터사가 만든 HTML, CSS, JS 개발을 위한 오픈소스 툴킷"— Presentation transcript:

1 부트스트랩(Bootstrap) 트위터사가 만든 HTML, CSS, JS 개발을 위한 오픈소스 툴킷

2 Bootstrap 기술 소개 부트스트랩(Bootstrap)이란?
트위터 사가 만든 편리하고 효율적인 HTML5, CSS3, Javascript 오픈소스 툴킷 반응형(responsive), 모바일위주(mobile first) 웹 개발을 위한 웹 프레임워크 전문가들이 미리 만들어놓은 css, js, 클래스들을 사용하여 높은 품질의 웹페이지를 손쉽게 개발 jQuery 프레임워크를 이용

3 Bootstrap 기술 소개 부트스트랩(Bootstrap) 관련 자료
(영문 홈페이지 v4.1.1) (한글 문서 서비스, v4.0.0) (부트스트랩 테마) (w3schools.com에서 제공하는 Bootstrap 4 튜토리얼)

4 Bootstrap 기술 소개 부트스트랩 프로젝트 시작 방법 소스를 다운로드하여 사용하는 방법
에서 zip파일 다운로드, 압축 풀기 (컴파일된 css, js를 다운로드) 내 서버에서 제공하는 css, js 파일을 사용 CDN(content delivery network)을 이용하는 방법 CDN 서버에서 제공하는 css, js 파일을 링크하여 사용 기본 템플릿을 복사하여 시작 패키지 매니저를 이용하여 설치하여 사용 (npm)

5 Bootstrap 기술 소개 기본 템플릿을 이용하여 페이지 작성 시작
반응형 동작을 위해 뷰포트 메타 태그 Bootstrap CSS 파일 링크 Bootstrap이 정상 작동하려면 jquery가 반드시 필요 Bootstrap.min.js 포함 CDN을 이용하는 사례

6 레이아웃 – 컨테이너 Bootstrap은 전문가가 디자인한 클래스(class)들의 모음
asp 첫 번째 해야 하는 일은 컨테이너 클래스 사용하기 고정폭 콘테이너 .container 최대폭 콘테이너 .container-fluid

7 레이아웃 – 그리드 시스템 그리드 시스템 12개의 컬럼 시스템, 5개의 반응형 계층, Sass 변수 및 믹스인 및 수십 개의 미리 정의 된 클래스를 사용하여 강력한 mobile-first 플렉스박스 그리드로 모든 형태의 레이아웃을 만듭니다. 부트스트랩의 그리드 시스템은 일련의 컨테이너, 행 및 열을 사 용하여 내용을 정렬하고 구성합니다. 그것은 플렉스 박스로 제작 되었으며 완전히 반응형 입니다. 

8 레이아웃 – 미디어 객체 미디어 객체

9 컨텐츠 - 타이포그래피 Typography

10 컨텐츠 - 타이포그래피 Typography

11 컨텐츠 – 테이블 각종 테이블 클래스 .table .table-dark .table-striped .table-bordered .table-hover .table-sm

12 컨텐츠 – 이미지, 피규어 반응형 이미지 .img-fluid 섬네일 이미지 .img-thumbnail
이미지 정렬 .float-left .float-right

13 컴포넌트 – 알림

14 컴포넌트 – 배지

15 컴포넌트 – 버튼

16 컴포넌트 – 버튼 그룹

17 컴포넌트 – 카드

18 컴포넌트 – 캐러셀 캐러셀 Carousel 회전목마와 같이 순환하는 슬라이드 쇼(이미지 또는 텍스트 슬라 이드)를 구성하는 컴포넌트.

19 컴포넌트 – 컬랩스

20 컴포넌트 – 드롭다운

21 컴포넌트 – 폼

22 컴포넌트 – 점보트론

23 컴포넌트 – 목록그룹

24 컴포넌트 – 모달 (modal)

25 컴포넌트 – 내비게이션

26 컴포넌트 – 내비게이션바 (메뉴)

27 여러 페이지를 갖는 메뉴 시스템 작성하기 홈페이지 메뉴 구상 Index.html 파일에 내비게이션바 추가
메뉴 item의 파일명 지정 이 파일을 복사하여 다른 파일명으로 저장 내용 수정 li Item의 class를 active로 지정