[HTML] Bootstrap 이용하는 방법, Bootstrap으로 반응형 페이지 만들기

https://getbootstrap.kr/docs/5.2/getting-started/introduction/

Bootstrap 시작하기

부트스트랩 시작하기 페이지에 접속한다.

 

Bootstrap의 CSS와 JS가 포함된 코드를 그대로 복사해서 시작 틀로 사용해도 되고,

 

또는 그 아래에있는 CSS, JS링크를 복사해서 

CSS는 head태그 안에, JS코드는 body태그 가장 아래에 추가해 주면 된다.

---

화면 상단의 검색창에

원하는 레이아웃,컴포넌트 등 필요한 것을 검색한다

 

아래는 Cards를 검색한 결과임.

 

예시로 나오는 카드를 보고

마음에 들면.. 밑에있는 HTML 코드를 복사해서 붙여넣으면 

그대로 사용할 수 있다.

 

하지만 내가 원하는 대로 만들기 위해서는 저 카드를 변형시켜야 할 수도 있다.

그럴 때는 부트스트랩의 유틸리티를 찾아서 클래스에 추가해서 사용하자.

(너비를 50%로 주고싶다면 w-50같은 유틸리티를 추가함)

---

반응형 페이지 만들기

 

row, col 클래스가 있다.

   <div class="row">
       <div class="col"></div>
       <div class="col"></div>
       <div class="col"></div>
   </div>

col 옆에 -숫자 를 붙여주면, 

총 12칸 중에 (숫자)만큼 차지하도록 할 수 있다.

 

   <div class="row">
       <div class="col-4"></div>
       <div class="col-4"></div>
       <div class="col-4"></div>
   </div>

이렇게 하면 삼분할 된다.

 

   <div class="row">
       <div class="col-lg-4"></div>
       <div class="col-lg-4"></div>
       <div class="col-lg-4"></div>
   </div>

숫자 사이에 lg같은 것을 붙여주면

lg사이즈 일 때만 적용되도록 할 수 있다.

 

xs, sm, md, lg등의 사이즈가 있고

이를 이용해서 사이즈별로 한 행에 몇 열로 나타나게 할 지 설정할 수 있다.