Bootstrap

• HTML + CSS + JS 결합된 라이브러리
• 주로 CSS 중심의 기술
• 사용법
  • 외부 파일 다운로드하여 프로젝트에 설치
  • CDN(Content Delivery Network)
    • 외부 사이트에 있는 파일을 링크
• 클래스 이름 설정값에 따라 디자인 변함
• 종류
  • button
  • table
  • images
  • dropdowns
  • modal
  • form
  • flex
  • grid
• 무료 템플릿

부트스트랩 ver.1

• 반응형 디자인을 지원하지 않음
  ⇒ 고정 그리드 시스템만 지원

부트스트랩 ver.2

• 반응형 디자인을 지원
  ⇒ 다양한 화면 크기에 따라 레이아웃이 자동으로 조정

특징

• CSS 활용
  • HTML 에서 사용되는 기본 스타일 제공
• 재사용 가능한 컴포넌트
  • 기본 요소 외에도 사용자들이 자주 사용하는 요소들을 포함
  • 버튼, 드롭다운 메뉴, 탭, 라벨, 상태 바
• JS 컴포넌트
  • JS를 이용해 드롭다운, 탭, 버튼 등의 기능을 구현
• 다양한 디바이스에 적응하는 반응형 웹 디자인을 쉽게 구현

기본 형태

• 부트스트랩이 제공하는 CSS에 미리 정의된 class의 이름을 사용

Layout

컨테이너 (Container)

• 가장 기본적인 레이아웃 요소
• 기본 그리드 시스템을 사용할 때 필요

<div class="container"></div>

종단점 (Breakpoints)

• 반응형 레이아웃이 작동하는 방식을 결정
  • 사용자 정의 가능한 너비

Grid

<div class="container text-center"›
	<div class="row">
		<div class="col">
			Column
		</div>
		<div class="col">
			Column
		</div>
		<div class="col">
			Column
		</div>
	</div>
</div>

gutters

• padding에 의해 생성되는 열 콘텐츠 사이의 간격
• 여백 조절

spacing

• 마진과 패딩
• gap

Z-index

display

• 반응형 화면에서 인라인과 블록 스타일 바꿀 때

float

• 오른쪽 정렬, 왼쪽 정렬

flex

• 반응형에서 정렬시킬 때
• 오른쪽, 왼쪽

Object fit

• 썸네일 사진 조정

vertical alignment

• 수직 정렬

Shadows

• 그림자 속성