🍀 Bootstrap
: 주로 클래스의 형태로 스타일을 부여하며, 기본값을 가지고 있기 때문에 디자인에 용이
※ 주의) 공동 작업의 경우 버전을 똑같이 해야 함!!
https://getbootstrap.com/
- 원하는 버전 선택 - docs - 2번에서 CDN links 복사
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
width 넓이(픽셀)
height 높이(픽셀)
initial-scale 초기 배울(기본 꽉 찬 화면)
minimum-scale 최소 배율(기본값:0.25, 범위 0~10.0)
maximum-scale 최대 배율(범위 0~10.0)
user-scalable 확대/축소 여부(yes/no)
shrink-to-fit 임의 내용 크기 줄임 방지 여부
-->
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
▶︎ 컨테이너(container)
* container를 만들어서 전체적인 영역을 구성한 다음 원하는 스타일 부여
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>container</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<style type="text/css">
div{
border:1px solid #CCCCCC;
background:#EEEEEE;
}
</style>
</head>
<body>
<h4>container 좌우에 여백이 있음</h4>
<div class="container">
내용
</div>
<h4>viewport를 꽉 채운 container</h4>
<div class="container-fluid">
내용
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
▶︎ 그리드(grid)
* grid로 공간 분할을 통해 다양한 형태로 디스플레이 가능
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>container</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<style type="text/css">
/*속성 선택자*/
[class*="col"]{ /*col이 들어가는 클래스*/
padding-top:15px;
padding-bottom:15px;
background-color:#eee;
border:1px solid #999;
}
</style>
</head>
<body>
<!--
그리드 옵션
----------------------------------------------------------------
Extra small Small Medium Large Extra Large xxl
<576px >=576px >=768px >=992px >=1200px >=1400px
----------------------------------------------------------------
.col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl- -> class
-->
<div class="container">
<h4>12개 컬럼</h4>
<div class="row"><!-- 행 -->
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<br>
<h4>2개 컬럼</h4>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<h4>같은 넓이</h4>
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<h4>모바일에서 컬럼들이 하나는 꽉 찬 넓이로, 다른 하나는 절반 넓이로 쌓임</h4>
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<h4>컬럼들은 모바일에서 50% 넓이로 시작하고 데스크탑에서는 33.3% 넓이가 됨</h4>
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
