Bootstrap
Bootstrap이란?
: 미리 만들어진 CSS와 JavaScript를 통해 > CSS속성을 쉽게 적용할 수 있게 해주며,
표, 목록, 양식 등의 요소를 예쁘게 만들어주고, 이미 만들어진 다양한 UI를 활용할 수 있다.
1. Bootstrap 기본
1) Bootstrap을 HTML에 포함하기
- 본질은 CSS와 JS
- 홈페이지에서 다운로드 받거나
- CDN(Content Delivery Network)을 통해서 바로 받아온다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> //head에 적용
</head>
<body>
<h1>Hello, world</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> //body 끝자락에 적용
</body>
</html>
2) Text
- CSS 속성을 class로 적용할 수 있게 만들어져 있다 !!
- text-start : text-align: start; 적용 가능
<p class="text-start">text-start 적용</p>
<p class="text-center">text-center 적용</p>
<p class="text-end">text-end 적용</p>
- fw-(굵기) : 굵기 조정 가능
- fst-italic : 기울임 적용 가능
** 매우 다양하기 때문에 직접 찾아보며 적용해보기
Get started with Bootstrap · Bootstrap v5.3 (getbootstrap.com)
3) Color
- 몇 종류의 색상을 미리 정해두고, 글자와 배경에 쉽게 적용할 수 있도록 만들어져 있다.
- 글자에 적용할 때에는 text-* 클래스
- 요소의 배경에 적용할 때에는 bg-* 클래스 활용
- 배경색에 적절한 글자색을 적용할 때에는 text-bg-* 클래스 활용
<!-- text 색상 설정-->
<p class="text-primary">text-primary</p>
<p class="text-secondary">text-secondary</p>
<p class="text-success">text-success</p>
<p class="text-danger">text-danger</p>
<p class="text-warning">text-warning</p>
<p class="text-info">text-info</p>
<p class="text-light bg-dark">text-light</p>
<p class="text-dark">text-dark</p>
<!-- bg 색상 설정 -->
<p class="bg-primary">bg-primary</p>
<p class="bg-secondary">bg-secondary</p>
<p class="bg-success">bg-success</p>
<p class="bg-danger">bg-danger</p>
<p class="bg-warning">bg-warning</p>
<p class="bg-info">bg-info</p>
<p class="bg-light">bg-light</p>
<p class="bg-dark text-light">bg-dark</p>
<!--text-bg 설정-->
<p class="text-bg-primary">text-bg-primary</p>
<p class="text-bg-secondary">text-bg-secondary</p>
<p class="text-bg-success">text-bg-success</p>
<p class="text-bg-danger">text-bg-danger</p>
<p class="text-bg-warning">text-bg-warning</p>
<p class="text-bg-info">text-bg-info</p>
<p class="text-bg-light">text-bg-light</p>
<p class="text-bg-dark">text-bg-dark</p>
+ 그라데이션 적용 bg-gradient 클래스 활용
4) Box Model
- 부모 요소를 기준으로 너비와 높이를 지정
- w-* h-*
- 25~100%까지 25% 간격으로 사용 가능
<div style="width: 500px; height: 500px;">
<div class="w-50 h-50 bg-primary">
<div class="w-25 h-25 bg-secondary">helloe</div>
</div>
</div>
- margin & padding 도 정의되어 있다.
- {m/p}{방향} - {크기(0~5또는 auto)}
- 방향 : t, b, s, e, x(좌우), y(상하), 생략(네방향 모두)
ex. px-3 : 좌우 방향으로 padding 3만큼
mb-4 : 아래 방향으로 margin 4만큼
5) Flex
- d-flex 를 적용하면 Flex Container가 된다.
- 축의 방향 조절은 flex-* 형태로 정의한다. (flex-column, row, row-reverse, column-reverse)
- flex-wrap / flex-nowrap 사용가능
- justify-content-* 모두 적용 가능 (start, end, center, between, evenly, around)
- align-items-* 모두 가능 (start, end, center)
- align-content-* 모두 가능 (start, end, center, between, around)
2. Bootstrap Grid System
1) Container
- container : 화면의 크기에 따라 너비가 바뀜
- container-fluid : 화면의 너비 전체를 차지
<div class="container-fluid fs-2 bg-primary-subtle"></div>
<div class="container fs-2 bg-secondary"></div>
2) Row & Columns
- container 안에 row 와 col을 만들어 넣는다.
- row는 12칸으로 이뤄져있다.
- col-*을 통해서 12칸 중에 몇칸을 차지할지 결정할 수 있음. (12넘으면 다음줄로 간다)
- 줄이 늘어난다면 gy-* 통해 줄 간격 조절이 가능.
- gx-*로 좌우 간격 조절 가능.
<div class="container-fluid bg-primary-subtle">
<div class="row">
<div class="col">col1</div>
<div class="col">col2</div>
<div class="col">col3</div>
</div>
</div>
<div class="container bg-secondary">
<div class="row">
<div class="col">col1</div>
<div class="col">col2</div>
<div class="col">col3</div>
</div>
</div>
<div class="container-fluid bg-primary-subtle">
<div class="row">
<div class="col-4">col1</div>
<div class="col-6">col2</div>
<div class="col-1">col3</div>
<div class="col-2">col4</div>
</div>
</div>
3) Breakpoints
: Column의 칸의 갯수를 화면의 사이즈에 따라 다르게 만들 수 있다. (이때 화면의 사이즈의 기준점이 breakpoint)
- col-{breakpoint}-{크기}
<!--여기 요소들은 무조건 4칸씩(화면의 사이즈와 무관)-->
<div class="container-fluid">
<div class="row">
<div class="col-4 bg-secondary p-1">col-4</div>
<div class="col-4 bg-warn p-1">col-4</div>
<div class="col-4 bg-secondary p-1">col-4</div>
</div>
</div>
<!--여기 요소들은 sm(576px)이상에서 4칸씩 (화면이 더작아지면 요소배치가 달라짐) -->
<div class="row">
<div class="col-sm-4 bg-primary p-1">col-sm-4</div>
<div class="col-sm-4 bg-black text-white p-1">col-sm-4</div>
<div class="col-sm-4 bg-primary p-1">col-sm-4</div>
</div>
<!--여기 요소들은 sm(576px)이상에서 4칸씩, 미만에서는 6칸씩-->
<div class="row">
<div class="col-6 col-sm-4 bg-secondary p-1">col-sm-4</div>
<div class="col-6 col-sm-4 bg-warning text-white p-1">col-sm-4</div>
<div class="col-6 col-sm-4 bg-secondary-subtle p-1">col-sm-4</div>
</div>
'Programming > Frontend (HTML, CSS)' 카테고리의 다른 글
부트스트랩에서 팝오버 data-content 개행 넣기 (1) | 2024.05.10 |
---|---|
CSS Flexbox (0) | 2023.12.15 |
CSS Box Model (0) | 2023.12.14 |
CSS (0) | 2023.12.13 |
HTML (2) | 2023.12.12 |