컴퓨터는 잘못이 없다..
[CSS]Bootstrap Grid System사용하기 본문
[Grid System이란?]
Bootstrap에는 12개의 칼럼으로 나누어서 기능을 제공한다.
테이블을 자유자재로 만들 듯 row클래스와, col-* 클래스들로 자유롭게 구성이 가능하다.
이렇게 구성한 페이지들은 Bootstrap에서 알아서 크기에 따라 반응형으로 동작한다.
[쓰는 방법 예]
<div class="container지정">
<div class="row">
<div class="col">칼럼1</div>
<div class="col">칼럼2</div>
</div>
<div class="row">
<div class="col">칼럼1</div>
<div class="col">칼럼2</div>
<div class="col">칼럼3</div>
</div>
</div>*위 코드 col 자리에 col-(sm~xl)-*가 들어가며 *에는 1~12까지의 수가 들어간다. (13개 이상이면 흘러내린다.)
*위 코드처럼 col만 써준다면 화면 크기를 같은 비율로 나눠 차지한다.(칼럼이 3개면 1:1:1비율)
*또한 col만 써준다면 col클래스 요소가 13개 이상이어도 나눠 차지한다 그리고 흘러내리지 않음!
*또한 col-(sm~xl) 뒤에 숫자를 써주지 않는다면 해당 크기에 대해서 화면크기를 같은 비율로 나눠갖으며 13개 이상이어도 흘러내리지 않는다.
↓정리하면
*숫자를 쓰지 않는다 = 흘러내리지 않는다 and 같은 비율로 나눠 차지한다.
*col 뒤에 sm~xl을 써주지 않는다. = 화면 크기를 가장 크게 하든, 가장 작게하든 항상 적용된다.
*col뒤에 sm~xl을 써준다 = 화면 크기에 따라 적용된다.
ex)
col : 화면의 모든 크기에 대해서 같은 비율로 나눠 차지한다.(col이 2개 라면 1:1 3개 라면 1:1:1)
col-6 : 화면의 모든 크기에 대해서 12칸중 6칸을 차지한다.
col-sm : sm 영역에서 같은 비율로 나눠 차지한다.(col-sm이 2개 라면 1:1 3개 라면 1:1:1)
col-sm-6 : sm영역에서 12칸중 6칸을 차지한다.
[예제코드]
<!--
부트스트랩 그리드 시스템 사용이유?
<tr>
<td></td>
<td></td>
</tr>
같은 느낌
테이블처럼 구성해놓고
그 테이블 안에 내용물을 넣으면 구성할 때 편할 것임!
-->
<!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 rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">
<style>
.row > div{
border : 1px dashed greenyellow;
}
/*아래 코드 설명 참고*/
.col > img{
/*최대 폭이 부모 컨테이너를 넘지 못하도록 제한*/
max-width:100%;
}
</style>
</head>
<body>
<div class="container">
<h1>Grid System 테스트</h1>
<div class="row">
<div class="col">칼럼1</div>
<div class="col">칼럼2</div>
</div>
<div class="row">
<div class="col">칼럼1</div>
<div class="col">칼럼2</div>
<div class="col">칼럼3</div>
</div>
</div>
<div class="container">
<h1>칼럼에 이미지 배치해보기 </h1>
<div class="row">
<div class="col"><img src="images/image1.png"></div>
<div class="col"><img src="images/image2.png"></div>
<div class="col"><img src="images/image3.png"></div>
</div>
</div>
</body>
</html>
[실행 결과]
[코드 설명]
아래와 같은 코드를 쓰는 이유는 무엇일까?
img의 max-width(최대폭)를 100%으로 지정하면 최대폭을 제한해줌으로서
자식요소의 크기가 부모 컨테이너를 넘지 못한다.
만약 이 코드를 생략하면 코드 결과가 어떻게 될까?
<style>
/*아래 코드 설명 참고*/
.col > img{
/*최대 폭이 부모 컨테이너를 넘지 못하도록 제한*/
max-width:100%;
}
</style>
위 코드를 생략하면 이와 같이 사진 한 개가 아래로 내려가버린다.
[max-width, min-width속성 사용예]
1.max-width
어떤 이미지를 ul안에 있는 li 이나 div안에 넣어놨는데 부모의 크기값보다 이미지가 더 클 수 있습니다.
그럴 때 벗어나지 않도록 이미지의 크기를 max-width로 설정해 주면 넘어가지 않는다.
자동으로 가로 세로 비율에 맞게 조정이 됩니다.
2.min-width
디바이스의 크기가 확 줄어들었을 때 '이 부분은 이 크기 이하로 줄어들지마!" 컴퓨터한테 말하려면 min-width를 쓰자. ex) 퍼센트는 70% 로 지정했지만 700px 보단 작아지지말라 할 때
width: 70%;
min-width: 700px;
[참고]
부트스트랩 그리드시스템을 쉽게 사용할 수 있도록 도와주는 홈페이지
Shoelace - Visual Bootstrap 3 Grid Builder
shoelace.io
'공부 > CSS' 카테고리의 다른 글
| [CSS]부트스트랩 Grid System 사용하기 - 반응형 칼럼 사용하기 (0) | 2020.11.12 |
|---|---|
| [CSS]반응형 레이아웃, container class로 화면크기에 따른 폭넓이 조절하기 (0) | 2020.11.12 |
| [CSS]Container (0) | 2020.11.12 |
