연습장
1. Bootstrap 소개와 설치 본문
https://poiemaweb.com/bootstrap-basics
Bootstrap Basics | PoiemaWeb
Bootstrap은 빠르고 간편한 반응형 웹 디자인(responsive web design)을 위한 open-source front-end framework이다. HTML, CSS, JavaScript로 만들어진 typography, 입력 양식(forms), 버튼, 테이블, 탭, 내비게이션, 모달, 이미
poiemaweb.com
Bootstrap은 빠르고 간편한 반응형 웹 디자인을 위한 open-source front-end framework이다.
HTML, CSS, JavaScript로 만들어진 typography, 입력 양식(forms), 버튼, 테이블, 탭, 내비게이션, 모달, 이미지 캐러셀(image carousel) 등을 제공하며 추가적으로 JavaScript plugin들을 제공한다.
Bootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
getbootstrap.com
1.1 Code의 재사용 (Code reuse)
CSS를 활용한 UI/UX 디자인은 수많은 셀렉터와 CSS 프로퍼티를 선언하는 작업이다.
이때 중복되는 선언이 발생할 수 있는데 class 어트리뷰트를 활용하면 중복 선언을 방지할 수 있고 코드를 재사용할 수 있다.
미리 사용될 가능성이 높은 스타일을 미리 작성하여 class화하면 같은 코드를 중복 작성하는 비효율을 줄일 수 있으며 이는 비용 절감과 품질의 향상으로 이어진다.
Bootstrap은 미리 선언해 놓은 다양한 class와 자바스크립트 코드로 이루어진 프론트엔드 프레임워크이다.
HTML에 Bootstrap의 class를 지정하는 것으로 빠르고 쉽게 일관된 스타일의 반응형 웹사이트를 작성할 수 있게 한다.
1.2 Framework
Framework
- 소프트웨어 개발시 공통적으로 필요한 기능들을 재사용 관점에서 모아 구조화한 것
- 일관된 애플리케이션의 뼈대를 제공하며 필요에 따라 확장 가능한 기반 코드를 제공
- Framework에서 제공하는 기반 코드를 사용하여 필요한 기능을 추가
- 팀 전체의 Coding style을 통일시켜 커뮤니케이션과 유지보수 측면에서 유리
스니핏(Snippet)
- 웹사이트 디자인에 자주 사용되는 정형화된 코드로 이를 별도로 저장해 두었다가 필요할 때마다 복사하여 사용
1.3 Bootstrap의 장점
- HTML과 CSS에 대한 기본 지식이 있다면 쉽게 사용할 수 있다.
- 스마트폰, 테블릿, 데스크탑에 적합한 responsive CSS를 제공한다.
- Bootstrap 3부터 mobile-first style을 기본으로 지원한다.
- 대부분의 브라우저(Chrome, Firefox, Internet Explorer, Safari, Opera)를 지원한다.
2. Bootstrap의 설치
- Bootstrap을 다운로드 받은 후 자신의 환경에 위치
https://getbootstrap.com/docs/5.3/getting-started/download/
Download
Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.
getbootstrap.com
- CDN(Content Delivery Network)
- npm을 통해 설치
3. 사용법
CDN 방식으로 Head 영역에 <link> 와 <script> 를 넣어준다.
우측의 메뉴에서 Components -> buttons 선택하고
미리보기를 보면서 자신이 원하는 요소를 가져올 수 있다.
