2021.04.26 - [프론트엔드/bootstrap] - [bootstrap] 부트스트랩 그리드, 12그리드시스템
[bootstrap] 부트스트랩 그리드, 12그리드시스템
파이참에서 bootstrap 을 통해 html5 로 새로운 프로젝트를 만들어 주면 다음과 같은 소스코드가 나온다. Title html 페이지의 기본 구성 요소가 적혀 있다. 여기서 편집을 통해 페이지를 구
silvering0.tistory.com
이전과 같은 소스코드를 살펴 보겠다.
<!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.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
<div class="col-md-4" style="background-color: red;">
A
</div>
<div class="col-md-4" style="background-color: blue;">
B
</div>
<div class="col-md-4" style="background-color: yellow;">
C
</div>
</body>
</html>여기서 보면 col-md-4 라는 것이 있는데,
이는 칼럼을 중간사이즈로 4로 나눈다. 라는 것이다.
각 칼럼이 4의 사이즈를 갖는 것은 쉽게 이해가 가능하다.
md? 중간사이즈?
코드를 실행해 보면 화면 구성은 다음과 같다.
하지만 화면 폭을 좁게 조정하면?
이렇게 abc 가 아래로 정렬이 된다.
이때 가로 폭이 중간정도로 줄었을 때 아래로 내려가게 시키는 것이 md
sm을 넣어주면? (col-sm-4)
가로폭이 더 작아졌을 때, 아래로 내려가게 된다.
bootstrap 홈페이지에서 사이즈표를 보면 다음과 같다.
'프론트엔드 > bootstrap' 카테고리의 다른 글
| [bootstrap] 부트스트랩 템플릿 사용법 (0) | 2021.04.26 |
|---|---|
| [bootstrap] components 01 (0) | 2021.04.26 |
| [bootstrap] 사이즈조정 혼합사용 col-md, sm, lg.. -n 복합? (0) | 2021.04.26 |
| [bootstrap] 부트스트랩 그리드, 12그리드시스템 (0) | 2021.04.26 |
| [Bootstrap]부트스트랩이란? (0) | 2021.04.26 |