https://getbootstrap.com/docs/5.1/getting-started/introduction/#starter-template
방문 후 Starter Template 이라고 써있는 예제 코드를 새로운 HTML 파일에 복붙하면 끝
<div class="container">이쁜 여백가진 박스</div>
<div class="mt-5">margin-top 쉽게 주기</div>
<div class="pb-5">padding-bottom 쉽게 주기</div>
<div class="fs-3">font-size 쉽게 주기</div>
<div class="text-center">text-align 쉽게 주기</div>
<div class="fw-bold">font-weight 쉽게 주기</div>
padding-left 는 ps-5 (start의 약자)
padding-right 는 pe-5 (end의 약자)
등 수백개가 있어서 더 찾고 싶으면 Bootstrap 홈페이지의 Utility class 메뉴로
<div class="row">
<div class="col-md-4"> 안녕 </div>
<div class="col-md-4"> 안녕 </div>
<div class="col-md-4"> 안녕 </div>
</div>
col-4 중간에 md를 붙여주면된다. 이건 일종의 조건문인데
"md 사이즈 혹은 그 이상에서만 4컬럼을 차지하게 해주십쇼"라는 뜻이다.
md는 768px인 모바일사이즈이다. 홈페이지를 참고하자.
내가 짠 코드가 나중에 수정이 쉽고 관리가 쉬워지면 좋은 코드이다.
class활용이 용이한, 확장성이 좋으면 좋은 코드이다.
양이 적으면 좋다. (선택사항)
많은 부트스트랩 요소들은 사이즈가 em 으로 선언되었다.
fontsize로 한번에 div 박스를 알맞은 비율로 설정할 수 있다.
<hr>
이라는 태그는 가로 선을 생성해준다.
<div class="vr"></div>
이렇게 쓰면 세로선을 생성해주고, height 설정 가능하다.
Bootstrap 홈페이지에 있는 <svg>
이런 식으로 정의된 아이콘은 용량을 훨씬 줄일 수 있다.