https://getbootstrap.kr/docs/5.1/components/buttons/ <- 스타터 템플릿 코드 복사해서 붙여넣으면 쉽게 사용 가능
여러 기능들이 있는 bootstrap을 이용해서 쉽게 반응형 레이아웃을 제작할 수 있음.
fixed width container (responsive fixed layout)
responsive fixed layout(반응형 고정폭 레이아웃)을 만들 때 사용한다. Media query에 의해 반응형으로 동작하며 동일 breakpoint내에서는 viewport 너비가 늘어나거나 줄어들어도 고정폭을 갖는다.
full width container (fluid layout)
fluid layout(유동 최대폭 레이아웃)을 만들 때 사용한다. viewport 너비에 상관없이 언제나 콘텐츠 요소를 화면에 꽉차는 너비를 갖게 한다.
앞에서 설명한 .container와 .container-fluid는 콘텐츠 요소를 포함하는 부모 요소로서 container 또는 wrapping 요소라고 부른다. container는 그리드 시스템을 위한 필수 사항이다.
그리드 시스템은 열을 나누어 콘텐츠를 원하는 위치에 배치하는 방법(Layout)을 말한다. Bootstrap은 반응형 12열 그리드 시스템을 제공한다.
grid layout을 구성시에는 반드시 .row(행)를 먼저 배치하고 행 안에 .col--(열)을 필요한 갯수만큼 배치한다.
container -> row -> col -> contents
더 많은 기능들이 있으니 따로 더 공부하고 싶을 때 찾아볼것.
