Grid 시스템
웹 제작을 진행 할 때 기준선을 기준으로 콘텐츠를 배치시키는 방법을 뜻함
그리드 시스템 을 사용하면 손쉽게 레이아웃을 구성하고 반응형 웹을 만들 수 있음
부트스트랩은 하나의 행에 12개의 열을 넣을 수 있습니다
기본적으로 그리드를 배치하는 방법에 대해 알아보겠습니다.
기본적으로 css를 어느정도 알고 있다고 판단하고 코드와 함께 설명만 첨부하겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
.mycol{
border: 2px blue solid;
}
.mycontainer{
border: 2px red solid;
}
.rowidth{
height: 300px;
}
</style>
</head>
<body>
<!--
col-[units] : 화면 넓이가 576px 미만 핸드폰 //기본값
col-sm-[units] : 화면 넓이가 576 px 이상 핸드폰가로
col-md-[units] : 화면 넓이가 768px 이상 테블릿
col-lg-[units] : 화면 넓이가 992px 이상 데스크탑
col-xl-[units] : 화면 넓이가 1200px 이상
ex) ccol-md-1 -> 768px이상이면 12개의 열중 1가지 열만 사용
container 고정폭
container-fluid 전체폭 넓이
//align-value
start - 시작
center - 중앙
end - 끝
around- 항목 주위에 같은 여백
between - 항목끼리 같은 여백
{device-width} == 화면 넓이에 따른 값
{align-value} == 위의 5가지의 값
//수평 중앙 정렬 할때
.justify-content-{device-width}-{align-value} --행 정렬시
//수직 중앙 정렬
.align-items-{align-value} --열 정렬시
.align-self-{align-value} --행 정렬시
//margin 값을 이용한 제어
적절히 남은 빈공간이 margin값으로 채워짐
.ml-auto -- margin left 열
.mr-auto -- margin rigth 열
//offset 사용 --offset을 사용하면 클래스가 정용된 열의 왼쪽에 units에 대입되는 열긔 갯수만큼 비어있는 열을 생성
.offset-{device-width}-{units} --행
//그리드의 정렬 -- 숫자가 높을수록 뒤에 나옴 단 순서대로 사용해야함
.order-{device-width}-{number} --행
-->
<div class="container mycontainer">
<div class="row">
<div class="col-md-4 mycol">12개중 4칸</div>
<div class="col-md-4 mycol">12개중 4칸</div>
<div class="col-md-2 mycol">12개중 2칸</div>
</div>
<div class="row">
<div class="col-md-6 mycol">12개중 6칸</div>
<div class="col-md-6 mycol">12개중 6칸</div>
</div>
<div class="row">
<div class="col-md-6 mycol">
<div class="row">
<div class="col-md-4 mycol"> 12칸중 6칸의 4칸</div>
<div class="col-md-8 mycol"> 12칸중 6칸의 8칸</div>
</div>
</div>
<div class="col-md-6 mycol">12개중 6칸</div>
</div>
<!-- justify -->
<div class="row justify-content-center">
<div class="col-md-4 mycol">12개중 2칸 justify</div>
<div class="col-md-4 mycol">12개중 4칸 justify</div>
<div class="col-md-2 mycol">12개중 2칸 justify</div>
</div>
<!-- align -->
<div class="row rowidth justify-content-center">
<div class="col-md-4 mycol align-self-center">12개중 2칸 align</div>
<div class="col-md-4 mycol align-self-start">12개중 4칸 align</div>
<div class="col-md-2 mycol align-self-end">12개중 2칸 align</div>
</div>
<!--margin-->
<div class="row">
<div class="col-md-2 mycol mr-auto">12개중 2칸 margin</div>
<div class="col-md-2 mycol">12개중 2칸</div>
<div class="col-md-2 mycol">12개중 2칸</div>
</div>
<!--offset-->
<!--width가 768px이상이라면 첫번째 col이 차지하는 크기가 5개의 공백이 먼저 만들어지고 첫번째 col을 시작해라-->
<div class="row">
<div class="col-md-4 mycol offset-md-2">12개중 4칸 offset</div>
<div class="col-md-2 mycol">12개중 2칸</div>
</div>
<!--col이 만들어지기 전에 왼쪽에 2개의 공백을 만들고 시작해라-->
<div class="row">
<div class="col-md-2 mycol offset-md-2">12개중 2칸 offset</div>
<div class="col-md-2 mycol offset-md-2">12개중 2칸</div>
<div class="col-md-2 mycol offset-md-2">12개중 2칸</div>
</div>
<!--order-->
<!--숫자가 높을수록 뒤에 나옴-->
<div class="row">
<div class="col-md-2 mycol order-md-3">12개중 2칸 1</div>
<div class="col-md-2 mycol order-md-2">12개중 2칸 2</div>
<div class="col-md-2 mycol order-md-1">12개중 2칸 3</div>
</div>
</div>
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
'HTML_CSS' 카테고리의 다른 글
| CSS - 반응형 웹 (0) | 2020.06.02 |
|---|---|
| Bootstrap - form Style (0) | 2020.05.31 |
| Bootstrap (1) _소개 및 설치 (0) | 2020.05.30 |
| HTML- img 태그 (0) | 2020.05.02 |
| HTML- link태그 (0) | 2020.05.02 |
