중단점(Breakpoints)
Bootstrap에서 반응형 레이아웃이 기기 또는 뷰포트 크기에 따라 어떻게 동작하는지를 결정하는 사용자 정의 가능한 너비이다.
https://getbootstrap.com/docs/5.3/layout/breakpoints/
Breakpoints
Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap.
getbootstrap.com
컨테이너(Containers)
Bootstrap의 가장 기본적인 레이아웃 요소로, 주어진 장치나 뷰포트 내에서 콘텐츠를 포함하고 정렬할 수 있는 기능이다.
https://getbootstrap.com/docs/5.3/layout/containers/
Containers
Containers are a fundamental building block of Bootstrap that contain, pad, and align your content within a given device or viewport.
getbootstrap.com
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Container Class</title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid text-bg-primary fs-3">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque quidem eius neque minus, animi id inventore nulla officiis sequi ut dicta nostrum suscipit ipsam autem similique ratione cupiditate. Corporis placeat recusandae mollitia qui explicabo ullam quis minus! Unde, deserunt, eaque alias minus ut nisi asperiores sequi sapiente soluta quisquam aliquam?</p>
</div>
</body>
</html>
출력 결과
container-fluid 속성으로 인해 웹 브라우저 사이즈에 따라서 콘텐츠가 맞춰진다.
플렉스 박스(Flex)
유틸리티를 적용하여 display-flexbox 컨테이너를 만들고 직접 자식 요소를 flex 항목으로 변환한다. flex 컨테이너와 항목은 추가 flex 속성으로 추가로 수정할 수 있다.
https://getbootstrap.com/docs/5.3/utilities/flex/#enable-flex-behaviors
Flex
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
getbootstrap.com
그리드 시스템(Grid)
Bootstrap의 그리드 시스템은 일련의 컨테이너, 행, 열을 사용하여 콘텐츠를 레이아웃하고 정렬한다. flexbox로 구축되었으며 완전히 반응형이다.
https://getbootstrap.com/docs/5.3/layout/grid/
Grid system
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
getbootstrap.com
Gutter
거터는 열 사이의 패딩으로, Bootstrap 그리드 시스템에서 콘텐츠의 간격을 조절하고 정렬하는 데 사용된다.
https://getbootstrap.com/docs/5.3/layout/gutters/
Gutters
Gutters are the padding between your columns, used to responsively space and align content in the Bootstrap grid system.
getbootstrap.com
'Web > Bootstrap' 카테고리의 다른 글
| [Bootstrap] 웹사이트 만들기 - 프로필 섹션 (0) | 2024.10.25 |
|---|---|
| [Bootstrap] 웹사이트 만들기 - 헤더 영역 (0) | 2024.10.25 |
| [Bootstrap] Bootstrap CSS 실습 (2) | 2024.10.24 |
| [Bootstrap] Bootstrap 적용 방법 (0) | 2024.10.24 |
| [Bootstrap] Bootstrap 기초 (0) | 2024.10.24 |