Container
Bootstrap에서 가장 기본적인 레이아웃 요소
내용을 채우고, 정렬하는데 사용
<div class="container">
<!-- Content here -->
</div>
BreakPoint
Bootstrap의 장치 또는 View의 크기에 따라 반응형 레이아웃이
작동하는 방식을 결정하는 사용자 정의 가능한 너비
6개의 기본 중단점
Grid
행과 열의 레이아웃을 정렬
모든 모양과 크기의 레이아웃을 빌드할 수 있다.
row 와 col만사용해 테이블처럼 만들 수 있다.
<div class="container text-center">
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<div class="row">
<div class="col">1 of 3</div>
<div class="col">2 of 3</div>
<div class="col">3 of 3</div>
</div>
</div>
아래 코드와 같이 비율로 잡아줄수도 있다. (모바일 호환성도 뛰어남)
사용할 수 있으면 매우 편리한 기능 ※ 중요
<div class="container text-center">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
자세한건 아래 링크에 잘 정리되 있음
그리드 시스템
강력한 모바일 우선 flexbox 그리드를 사용하여 12개의 열 시스템, 6개의 기본 반응형 계층, Sass 변수 및 믹스인, 수십 개의 사전 정의된 클래스 덕분에 모든 모양과 크기의 레이아웃을 빌드할 수 있
getbootstrap.kr
Columns
<div class="container text-center">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>align-self-~~ 처럼 수직정렬을 쉽게할 수 있음 (원래 수직정렬 해주기 힘듬)
Gutters
<div class="container overflow-hidden text-center">
<div class="row gy-5">
<div class="col-6">
<div class="p-3">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3">Custom column padding</div>
</div>
</div>
</div>
마진과 패딩값을 지원함 (여백 조절)
Spacing
반응형 친화적인 margin 또는 padding 값을
단축 클래스를 사용해 할당
단축 클래스
예시)
<div class="pt-4 bg-warning">I only have a top padding (1.5rem)</div>
<div class="p-5 bg-success">I have a padding on all sides (3rem)</div>
<div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem) and a bottom padding (3rem)</div>pt-4 :
p: 패딩
t: 마진or패딩 top,
-4: 1.5rem
(글씨크기단위인 rem(Root em)은 웹 브라우저의 기본 폰트 사이즈 에 의해 결정되며
대부분의 웹사이트는 기본 16px을 사용함 => 이경우에 1.5rem 은 16.* 1.5 = 24px)
Z-index
컨텐츠를 정렬하기 위한 세 번째 축을 제공하는 CSS 속성
display
display 속성값
d-none
d-inline
d-inline-block
d-block
d-grid
d-inline-grid
d-table
d-table-cell
d-table-row
d-flex
d-inline-flex
float
float 속성값
.float-start
.float-end
.float-none
Flex
반응형 UI에서 정렬시킬때 사용
Object fit
<img src="..." class="object-fit-contain border rounded" alt="...">
<img src="..." class="object-fit-cover border rounded" alt="...">
<img src="..." class="object-fit-fill border rounded" alt="...">
<img src="..." class="object-fit-scale border rounded" alt="...">
<img src="..." class="object-fit-none border rounded" alt="...">사진 썸네일 등 조정할때 사용하면 좋음
Shadow
그림자를 줄 수 있는 속성, 잘 사용하면 느낌있는 레이아웃을 만들 수 있다.
<div class="shadow-none p-4 mb-4 bg-light">No shadow</div>
<div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div>
<div class="shadow p-4 mb-4 bg-white">Default shadow</div>
<div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>
[layout.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Layout</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"></script>
</head>
<body>
<h3 class="mt-2">Container</h3>
<div> - 컨테이너는 부트스트랩의 가장 기본적인 레이아웃 요소로 그리드, 정렬, 공간 분리시 활용 </div>
<div> - 반응형 UI가 자동으로 적용되어 있으므로 해상도 별로 크기 조절을 지원함 </div>
<hr><br>
<div class="container text-bg-primary">
기본형 컨테이너이고, small 사이즈와 동일합니다.
</div>
<hr><br>
<h3>fluid 옵션</h3>
<div class="container-fluid text-bg-primary">
fluid - 전체 화면사이즈와 동일하게 컨테이너 레이아웃을 활용
</div>
<hr><br>
<h5>Container 반응형 옵션</h5>
<p> - 컨테이너의 크기에 따라 종단점까지 도달할때 크기에 따라 확장되는 길이가 제한된다.</p>
<div>
<div class="container-sm border ">100% wide until small breakpoint</div>
<div class="container-md border ">100% wide until medium breakpoint</div>
<div class="container-lg border ">100% wide until large breakpoint</div>
<div class="container-xl border ">100% wide until extra large breakpoint</div>
<div class="container-xxl border ">100% wide until extra extra large breakpoint</div>
</div>
<hr>
<h3>Container 활용 예시</h3>
<div class="container">
<div class="row">
<div class="col-3 bg-primary" style="height:150px">
일반 영역입니다.
</div>
<div class="col-9 bg-warning">
경고 영역입니다.
</div>
</div>
</div>
<hr><br>
<br>
<div class="h3">그리드 시스템</div>
<div> - flexbox로 구축 되었으며 페이지 전체에 최대 12개의 열을 허용한다.</div>
<hr><br>
<div class="container">
<!-- 가장 기본적인 1:1 비율을 가지는 그리드-->
<div class="row" style="height:50px">
<div class="col border">1-1</div>
<div class="col border">1-2</div>
</div>
<br>
<!-- 가장 기본적인 1:1:1 비율을 가지는 그리드-->
<div class="row" style="height:50px">
<div class="col border">2-1</div>
<div class="col border">2-2</div>
<div class="col border">2-3</div>
</div>
<br>
<!-- col의 크기를 지정해서 1:1:1로 만드는 방법-->
<div class="row" style="height:50px">
<div class="col-4 border">3-1</div>
<div class="col-4 border">3-2</div>
<div class="col-4 border">3-3</div>
</div>
<br>
<!-- col의 크기를 지정해서 1:2:1로 만드는 방법-->
<div class="row" style="height:50px">
<div class="col-3 border">4-1</div>
<div class="col-6 border">4-2</div>
<div class="col-3 border">4-3</div>
</div>
<br>
<!--row의 크기를 지정해서 3개의 행만 가지도록 설정도 가능-->
<div class="row row-cols-3" style="height:50px">
<div class="col border">5-1</div>
<div class="col border">5-2</div>
<div class="col border">5-3</div>
<div class="col border">5-4</div>
</div>
</div>
<hr><br>
<!--12개 + 2개의 열을 가지는 그리드 -> 12칸을 넘겨도 배치는 되나 부자연스럽게 배치됨-->
<div class="container">
<div class="row">
<div class="col border">1</div>
<div class="col border">2</div>
<div class="col border">3</div>
<div class="col border">4</div>
<div class="col border">5</div>
<div class="col border">6</div>
<div class="col border">7</div>
<div class="col border">8</div>
<div class="col border">9</div>
<div class="col border">10</div>
<div class="col border">11</div>
<div class="col border">12</div>
<div class="col border text-bg-danger">13</div>
<div class="col border text-bg-danger">14</div>
</div>
</div>
<hr><br>
<!-- 비율로 열의 크기를 정하는 방법 - 'col-숫자'를 통해 비율 제한 가능-->
<div class="container">
<div class="row">
<!-- 1:2:1 배치-->
<div class="col-3 border text-center">1-1 비율3</div>
<div class="col-6 border text-center">1-2 비율6</div>
<div class="col-3 border text-center">1-3 비율3</div>
</div>
<br>
<div class="row">
<!-- 1:3:1 배치 -> 안된다. 12안으로 계산되어야 가능!!-->
<div class="col-3 border text-center">2-1 비율3</div>
<div class="col-9 border text-center ">2-2 비율9</div>
<div class="col-3 border text-center text-bg-danger">2-3 비율3</div>
</div>
<br>
<!-- 1:3 배치 -->
<div class="row">
<div class="col-3 border text-center">3-1 비율3</div>
<div class="col-9 border text-center ">3-2 비율9</div>
</div>
<br>
<!-- 5개 배치? -> 2개 남아서 여백이 생긴다. 그냥은 안되고 -->
<div class="row">
<div class="col-2 border text-center">4-1 </div>
<div class="col-2 border text-center">4-2 </div>
<div class="col-2 border text-center">4-3 </div>
<div class="col-2 border text-center">4-4 </div>
<div class="col-2 border text-center">4-5 </div>
</div>
<br>
<!--열의 컨텐츠의 크기로 배치 할 때-->
<div class="row row-cols-auto">
<div class="col border text-center">5-1 </div>
<div class="col border text-center">5-2 </div>
<div class="col border text-center">5-3 </div>
<div class="col border text-center">5-4 </div>
<div class="col border text-center">5-5 </div>
</div>
<br>
<!--열을 꽉 채운 크기로 배치 할 때-->
<div class="row">
<div class="col border text-center">5-1 </div>
<div class="col border text-center">5-2 </div>
<div class="col border text-center">5-3 </div>
<div class="col border text-center">5-4 </div>
<div class="col border text-center">5-5 </div>
</div>
</div>
<hr><br>
<div class="h3">세로 정렬하기</div>
<div> - align-items-xxx : 부모 eleemnt에서 자식 item을 정렬 시킬수 있다.</div>
<hr><br>
<div class="container text-center border">
<!-- <div class="row border align-items-start" style="height: 100px;"> -->
<div class="row border align-items-center" style="height: 100px;">
<!-- <div class="row border align-items-end" style="height: 100px;"> -->
<div class="col border">1</div>
<div class="col border">2</div>
<div class="col border">3</div>
</div>
</div>
<hr><br>
<div class="h3">세로 정렬하기</div>
<div> - 정렬 될 elemnt(자식)에서 align-self-xxx로 세로 정렬이 가능하다.</div>
<hr><br>
<div class="container text-center border">
<div class="row border" style="height: 100px;">
<div class="col border align-self-start">1</div>
<div class="col border align-self-center">2</div>
<div class="col border align-self-end">3</div>
</div>
</div>
<hr><br>
<div class="h3">Gutters 거터,여백</div>
<div> - 거터는 가로 padding에 의해 생성되는 열 콘텐츠 사이의 간격입니다.
각 열에 padding-right 및 padding-left를 설정하고 음수 margin을
사용하여 각 행의 시작과 끝에서 이를 오프셋하여 콘텐츠를 정렬합니다.
</div>
<br>
<h2>Horizontal gutters</h2>
<div class="container px-4 text-center">
<div class="row gx-5">
<div class="col border">
<div class="p-3 border">Custom column padding</div>
</div>
<div class="col border">
<div class="p-3 border">Custom column padding</div>
</div>
</div>
</div>
<hr><br>
<h2>Vertical gutters</h2>
<div class="container overflow-hidden text-center">
<div class="row gy-5">
<div class="col-6 border">
<div class="p-3 border">Custom column padding</div>
</div>
<div class="col-6 border">
<div class="p-3 border">Custom column padding</div>
</div>
<div class="col-6 border">
<div class="p-3 border">Custom column padding</div>
</div>
<div class="col-6 border">
<div class="p-3 border">Custom column padding</div>
</div>
</div>
</div>
<hr><br>
<h2>Horizontal & vertical gutters</h2>
<div class="container text-center" style="height: 100px;">
<div class="row g-5">
<div class="col-6 border">
<div class="p-3 border">Custom column padding</div>
</div>
<div class="col-6 border">
<div class="p-3 border">Custom column padding</div>
</div>
<div class="col-6 border">
<div class="p-3 border">Custom column padding</div>
</div>
<div class="col-6 border">
<div class="p-3 border">Custom column padding</div>
</div>
</div>
</div>
<br><br><br><br><br><br><br>
<hr>
<div class="h3">공백 영역 (margin & padding)</div>
<div> - 공백을 주기 위해 margin과 padding을 사용 가능하나 단축 표현이 필요함</div>
<a href="https://getbootstrap.com/docs/5.2/utilities/spacing/#margin-and-padding">참조</a>
<br>
<div class="container">
<h3>Margin</h3>
<hr>
<div class="m-0 border">margin-0</div>
<div class="m-1 border">margin-1</div>
<div class="m-2 border">margin-2</div>
<div class="m-3 border">margin-3</div>
<div class="m-4 border">margin-4</div>
<div class="m-5 border">margin-5</div>
<!-- 6부터 없다.-->
<!-- <div class="m-6 border text-bg-danger">margin-6</div> -->
<hr>
<div class="m-auto border">margin-auto</div>
<hr>
</div>
<hr><br>
<div class="container">
<h3>Padding</h3>
<hr>
<div class="p-0 border">Padding-0</div>
<div class="p-1 border">Padding-1</div>
<div class="p-2 border">Padding-2</div>
<div class="p-3 border">Padding-3</div>
<div class="p-4 border">Padding-4</div>
<div class="p-5 border">Padding-5</div>
<!-- 6부터 없다.-->
<!-- <div class="p-5 border">Padding-6</div> -->
<hr>
<!-- auto 속성 없다!-->
<!-- <div class="pe-auto border">Padding-5</div> -->
<hr>
</div>
<hr><br>
<div class="container">
<div>Margin 음수</div>
<div class="border">상위 배치된 item</div>
<div class="border" style="margin-top : -10px;">음수 마진 줄 곳</div>
</div>
<hr><br>
<div>가운데 정렬</div>
<div class="container border">
<div class="mx-auto border" style="width: 200px; height: 100px">
Centered element
</div>
</div>
<hr><br>
<div>공백 방향</div>
<div class="container">
<hr>
<div class="mt-4 border">margin-top</div>
<div class="mb-4 border">margin-bootom</div>
<div class="ms-4 border">margin-start(왼쪽)</div>
<div class="me-4 border">margin-end(오른쪽)</div>
<div class="mx-4 border">margin-x(가로)</div>
<div class="my-4 border">margin-y(세로)</div>
<div class="m-4 border">margin</div>
<hr>
</div>
<hr><br>
<div class="container">
<div class="pt-4 border">Padding top</div>
<div class="pb-4 border">Padding bottom</div>
<div class="ps-4 border">Padding start</div>
<div class="pe-4 border">Padding end</div>
<div class="px-4 border">Padding x</div>
<div class="py-4 border">Padding y</div>
</div>
<hr><br>
<div class="container">
<div class="ms-4 px-5 border">Margin-start + Padding-x</div>
<div class="mt-3 py-4 border">Margin-Top + Padding-y</div>
</div>
<hr><br>
<div class="h3">갭(Gap)</div>
<div> - item들을 자동으로 간격을 조정하는 옵션</div>
<h3>gap-5 : item 간격 제일 큰 숫자</h3>
<div class="container">
<div class="d-grid gap-5">
<div class="p-2 bg-light border">Grid item 1</div>
<div class="p-2 bg-light border">Grid item 2</div>
<div class="p-2 bg-light border">Grid item 3</div>
</div>
</div>
<hr>
<h3>gap-3 : item 간격 보통 숫자</h3>
<div class="container">
<div class="d-grid gap-3">
<div class="p-2 bg-light border">Grid item 1</div>
<div class="p-2 bg-light border">Grid item 2</div>
<div class="p-2 bg-light border">Grid item 3</div>
</div>
</div>
<hr><br>
<div class="h3">display</div>
<div> - 반응형 디스플레이 유틸리티 클래스를 사용하여 display 속성 값을 변경하는 옵션</div>
<br>
<!-- d-none
d-inline
d-inline-block
d-block
d-grid
d-inline-grid
d-table
d-table-cell
d-table-row
d-flex
d-inline-flex -->
<div class="container">
<div class="d-inline p-2 text-bg-primary">
d-inlined-inlined-inlined-inlined-inlined-inlined-inlined-inlined-inlined-inlined-inlined-inlined-inlined-inlined-inline
</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>
</div>
<hr><br>
<div class="container">
<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">d-block</span>
</div>
<hr><br>
<div class="container">
<span
class="d-inline-block p-2 text-bg-primary">inline-blockinline-blockinline-blockinline-blockinline-blockinline-blockinline-blockinline-blockinline-blockinline-blockinline-block</span>
<span class="d-inline-block p-2 text-bg-dark">inline-block</span>
</div>
<hr><br>
<h2>Float</h2>
<div> - item을 오른쪽이나 왼쪽으로 정렬시키는 방법</div>
<div class="py-2">
<div class="float-start border">Float start on all viewport sizes</div><br>
<div class="float-end border">Float end on all viewport sizes</div><br>
<div class="float-none border">Don't float on all viewport sizes</div>
</div>
<hr><br>
<h2>Width</h2>
<div class="w-25 bg-warning">Width 25%</div>
<div class="w-50 bg-danger">Width 50%</div>
<div class="w-75 bg-warning">Width 75%</div>
<div class="w-100 bg-danger">Width 100%</div>
<div class="w-auto bg-warning">Auto Width</div>
<div class="mw-100 bg-danger">Max Width 100%</div>
<hr><br>
<h2>Height</h2>
<!-- <div class="container" style="height:800px">
<div class="h-25 bg-warning">Height 25%</div>
<div class="h-50 bg-danger">Height 50%</div>
<div class="h-75 bg-warning">Height 75%</div>
<div class="h-100 bg-danger">Height 100%</div>
<div class="h-auto bg-warning">Auto Height</div>
<div class="mh-100 bg-danger">Max Height 100%</div>
</div> -->
<hr><br>
<h2>Flex </h2>
<div>반응형 flexbox 유틸리티 세트를 사용해 그리드 열,
네비게이션 바, 컴포넌트, 레이아웃의 정렬 및 크기 조정을 신속하게 관리</div>
<div class="container mt-3">
<div class="d-flex p-2 border">d-flex</div>
<div class="d-flex p-2 border">d-flex</div>
<div class="d-flex p-2 border">d-flex</div>
<div class="d-flex p-2 border">d-flex</div>
</div>
<hr><br>
<div class="container mt-3">
<div class="d-inline-flex p-2 border">d-inline-flex</div>
<div class="d-inline-flex p-2 border">d-inline-flex</div>
<div class="d-inline-flex p-2 border">d-inline-flex</div>
<div class="d-inline-flex p-2 border">d-inline-flex</div>
<div class="d-inline-flex p-2 border">d-inline-flex</div>
<div class="d-inline-flex p-2 border">d-inline-flex</div>
<div class="d-inline-flex p-2 border">d-inline-flex</div>
</div>
<hr><br>
<div>오른쪽이나 왼쪽으로 정렬시키는 flex </div>
<div class="d-flex flex-row mb-3">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<hr><br>
<h2>Shadows ★★★★★</h2>
<div> - 그림자 주는 옵션, item간에 구분을 줄때 사용되고, 잔잔하지만 강력한 속성</div>
<div class="container mt-3">
<h1>Shadows</h1>
<div class="shadow-none p-4 mb-4 bg-light">No shadow</div>
<div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div>
<div class="shadow p-4 mb-4 bg-white">Default shadow</div>
<div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>
</div>
<hr><br>
<h2>Vertical alignment</h2>
<div> - vertical-alignment 유틸리티를 사용하여 요소의 정렬을 변경합니다</div>
<div class="container p-5">
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>'Web Front' 카테고리의 다른 글
| [Bootstrap] 3.Theme (0) | 2023.12.19 |
|---|---|
| [Bootstrap] 2.Component (0) | 2023.12.19 |
| [Bootstrap] 0.시작 (0) | 2023.12.19 |
| [VsCode] 확장프로그램 Kite AutoComplete AI VSIX 다운로드 (0) | 2023.12.05 |
