반응형
그리드 시스템(Grid System)
그리드 시스템은 페이지에 총 12열로 나눠진다.
그리드 시스템은 반응형이며, 화면 크기에 따라 열이 자동으로 다시 정렬된다.
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
그리드 클래스(Grid Class)
| col < 576px | col-sm >= 576px | col-md >= 768px | col-lg >= 992px | col-xl >= 1200px | col-xxl >=1300px |
여기서 그리드 클래스의 px 크기를 잘 보아야 한다.
반응형으로 만들기위해서는 그리드 클래스는 필수적으로 알아야 한다.
그리드 class="row"
그리드 클래스를 정의한 이후 class = "row"를 잊으면 안된다.
위 클래스는 레이아웃의 행을 말해준다.
그리드 예제문제
부트스트랩 5 CDN을 이용하여 다음과 같이 만들어라
스크린 크기가 768px이상일 때
스크린 크기가 576px 이상일때
스크린 크기가 576px 이하일때
정보보안기사 전자책으로 필기, 실기 합격한다
deg.kr
그리드 예제 정답코드
HTML 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="bootstrapex.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row" id="row1">
<div class="col-md-4" id="layout1">
<h1>layout1</h1>
<p>레이아웃 안에 글을 쓸 수 있습니다.</p>
</div>
<div class="col-sm-6 col-md-4" id="layout2">
<h1>layout2</h1>
<p>스크린 크기가 768px이하일 때 layout2는 layout1아래에 있어야합니다.</p>
</div>
<div class="col-sm-6 col-md-4" id="layout3">
<h1>layout3</h1>
<p>스크린 크기가 576px 이하이면 layout2아래에 576px이상이고 768px이하이면
layout2 옆에 존재해야 합니다.
</p>
</div>
<!-- 여기까지가 row1 -->
</div>
<div class="row" id="row2">
<div class="col-md-3 col-sm-6" id="layout4">
<h1>layout4</h1>
<p>한 번 더 연습해봐요</p>
</div>
<div class="col-md-3 col-sm-6" id="layout5">
<h1>layout5</h1>
<p>576~768px 일때 layout4 옆에 있어야합니다.</p>
</div>
<div class="col-md-3 col-sm-6" id="layout6">
<h1>layout6</h1>
<p>위의 예시대로 나왔는지 확인해보세요</p>
</div>
<div class="col-md-3 col-sm-6" id="layout7">
<h1>layout7</h1>
<p>마지막 레이아웃입니다.</p>
<p id="f1"><strong>여러분 포기하지마세요!!</strong></p>
</div>
</div>
<!-- 아래 </div>는 container-fuild 것이다. -->
</div>
</body>
</html>CSS코드
/* row1레이아웃 */
#layout1{
border:10px solid green;
height:200px;
}
#layout2{
border:10px solid red;
height:200px;
}
#layout3{
border:10px solid blueviolet;
height:200px;
}
#layout4{
border:10px solid blue;
height:200px;
}
#layout5{
border:10px solid gray;
height:200px;
}
#layout6{
border:10px solid yellow;
height:200px;
}
#layout7{
border:10px solid burlywood;
height:200px;
}
#f1{
color:red;
}반응형
'웹프로그래밍 > bootstrap5' 카테고리의 다른 글
| [bootstrap 5] Container vs Fluid Container (0) | 2023.09.14 |
|---|---|
| [bootstrap 5] Bootstrap 5 시작하기 (0) | 2023.09.14 |
댓글