Bootstrap

디자인을 편하게 하는데 도움주는 반응형 웹 프레임워크

• https://www.w3schools.com/bootstrap5/tryit.asp?filename=trybs_default&stacked=h

복잡 : 자동 처리
반응형 웹 : 자원
브라우저 : 거의 대부분 브라우저 호환

추가 방법:
링크(cdn) : 권장되는 방법

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>

직접 다운로드

시작하기 전

메타태그 추가 (mobile-first)

<meta name="viewport" content="width=device-width, initial-scale=1">

컨테이너
화면에 보여지는 크기
.container: 전체 페이지에서 여백이 좀 남게

• https://www.w3schools.com/bootstrap5/tryit.asp?filename=trybs_gs_container&stacked=h

container-fuild: 화면이 여백이 거의 없게

• https://www.w3schools.com/bootstrap5/tryit.asp?filename=trybs_gs_container-fluid&stacked=h
  

그리드

한 페이지는 12개로 나뉜다 생각하여 cloumn을 설정
1x12 ,4x3, 4/8,6/6,12 로 조정가능

<div class="container-fluid mt-1">
mt : marign top
-1: 0.25rem, 3:16px

<div class="col p-3 bg-primary text-white">.col</div>:
p-3 - pedding에 3 부여
bg-color- 백그라운드 색

여기서 col에 col-sm3을 붙일 수 있는데 해당 부분을 붙이면은 sm(small device)기준, 576px보다 작은 사이즈에선 스택처럼 그리드가 쌓이고, 큰 사이즈에선
전체 비율에서 3에 해당하는 부분을 차지한다 . 예를 들면, 3 3 3 3으로 적었으면 전체를 12로 기준잡았을 때 정확한 4분할이 되고 4 8 이면 4:8 비율로 그리드가 조정된다.

• https://www.w3schools.com/bootstrap5/tryit.asp?filename=trybs_grid_ex1&stacked=h