-
Bootstrap이란프론트엔드 프로그래밍/Bootstrap 2022. 1. 26. 17:14
Bootstrap
- HTML, CSS, JS 라이브러리
- jQuery 기반의 HTM5 Web Framework
- 프론트엔드에서 작동되는 프레임워크
- 트위터에서 사용하던 각종 레이아웃, 버튼, 입력 요소 등 UI 요소들을 누구나 사용할 수 있도록 만들어진 오픈 소스 프레임 워크 (라이브러리)
- HTML/CSS 기반의 템플릿 양식, 버튼, 내비게이션 등 다양한 UI 요소 포함
- 자바스크립트를 선택적으로 확장 가능
Bootstrap 특징
- 쉽고 편리하게 사용할 수 있음
- HTML/CSS 기본 지식만 있으면 누구나 사용 가능
- 반응형 웹 디자인
- PC 또는 스마트폰이나 태블릿 등의 모바일용 디자인 지원
- 모든 최신 브라우저와 호환
Bootstrap 기능
- CSS 기능 : 디자인이나 스타일 적용
- 컴포넌트 기능 : 내비게이션바, 탭, 버튼 등의 기능을 간단하게 수정해서 사용 가능
- 자바스크립트 기능 : 사용자의 액션과 상호작용하는 기능 제공
Bootstrap 장점
- 쉽고 빠르게 다양한 기능 개발 가능
- 모바일 환경과 반응형 웹 제작 가능
- 수준 높은 퀄리티 제공
- 개발 시간 단축으로 개발 비용 절감
- 오픈 소스이며 상업적 이용 가능
Bootstrap 단점
- jQuery 의존성 높음
- 정형화된 디자인
Bootstrap 사용 방법
- 파일을 다운로드 받아서 사용
- Bootstrap 파일 구성
- css / js 폴더
- jQuery 파일 필요
- CDN 이용
- 링크를 통해 서버에서 제공 받음
2개 다운로드
- Bootstrap
- jQuery
Bootstrap 프로젝트 생성 (Dynamic Web Project)
- webapp 폴더에
- Bootstrap의 css와 js 폴더 복사해 넣음
- jquery-3.6.0.min.js 파일 복사해 넣음
부트스트랩 사용법
- 부트스트랩에 정의된 다양한 클래스들을 HTML 태그에 적용하고 (class 속성에 지정)
- 부가적인 속성들을 정의한 클래스들을 조합해서 사용
- <태그 class=”bs클래스이름1 bs클래스이름2, …..” >
- <button type=”button” class=”btn btn-primary”>
- <div class=”container bg-primary text-white”>
부트스트랩 주요 기능
- Containers
- Jumbotron
- Grid
- button
- Table
- Image
'프론트엔드 프로그래밍 > Bootstrap' 카테고리의 다른 글
Jumbotron, Grid, button, Table, Image (0) 2022.01.26 컨테이너 (0) 2022.01.26