Bootstrap5

Bootstrap?

<aside> 💡

빠르고 쉬운 웹 개발을 위한 프론트엔드 프레임워크

</aside>

부트스트랩은 타이포그래피, 폼, 버튼, 표, 네비게이션, 모달, 이미지 등 다양한 요소를 위한 HTML 과 CSS 기반 디자인 템플릿을 제공하며 선택적 JavaScript 플러그인도 포함
Bootstrap은 반응형 디자인을 쉽게 만들 수 있는 디자인을 제공

Bootstrap5 CDN(Content Deliver Network)

CDN을 통해서 직접 다운로드 하지 않고 Bootstrap5 를 사용할 수 있다

<!-- Latest compiled and minified CSS -->
<link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet">

<!-- Latest compiled JavaScript -->
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js>"></script>

Bootstrap5는 모바일 우선

Bootstrap 5는 모바일 기기에 반응하도록 설계. 모바일 우선 스타일은 핵심 프레임워크의 일부

적절한 렌더링과 터치 확대/축소를 보장하려면 <head>내부에 다음 태그를 추가한다.
```
<meta name="viewport" content="width=device-width, initial-scale=1">
```

컨테이너

컨테이너는 컨테이너 내부의 내용을 채우는데 사용.

사용 가능한 클래스는 .container와 .container-fluid두가지가 있다

.container

반응형 고정 너비 컨테이너

너비는 max-width에 따라서 달라진다