그리드 시스템
https://codepen.io/hana78786/full/LYdagzQ
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
div{
border: 1px solid red;
}
</style>
</head>
<body>
<h1>그리드시스템</h1>
<div class = "row">
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
</div>
<br><br><br><br><br>
<div class="row">
<div class="col-md-2">md-2</div>
<div class="col-md-2">md-2</div>
<div class="col-md-2">md-2</div>
<div class="col-md-2">md-2</div>
<div class="col-md-2">md-2</div>
<div class="col-md-2">md-2</div>
</div>
<br><br><br><br><br>
<div class="row">
<div class="col-md-3">md-3</div>
<div class="col-md-3">md-3</div>
<div class="col-md-3">md-3</div>
<div class="col-md-3">md-3</div>
</div>
<br><br><br><br><br>
<div class="row">
<div class="col-md-4">md-4</div>
<div class="col-md-8">md-8</div>
</div>- 부트스트랩은 무조건 12개를 기준으로 한다
- 12개에서 중간사이즈일때 각각 블록안 몇개를 차지할것인지 class명으로 쓴것이다
- col-md-6은 중간사이즈일때 6개를차지한다.
- col-lg-6은 큰 사이즈일때 6개를 차지한다
- col-sm-6은 작은사이즈일때 6개를 차지한다.
<div class="container">
<div class="row header">
<div class ="col-12 col-md-4 col-sm-4">logo</div>
<div class ="col-12 col-md-4 col-sm-8">search</div>
<div class ="d-none col-md-4 d-md-block">reserved</div>
</div>
<div class="row body">
<div class = "col-md-4 col-sm-12">login</div>
<div class = "col-md-8 col-sm-12">main</div>
</div>
<div class="row footer">
<div class="col-md-6 col-sm-3">license</div>
<div class="col-md-6 col-sm-9">company info</div>
</div>
</div>- 클래스 명을 중첩하여 사이즈를 정할수있다.
- 웹페이지의 크기 변화에 따라 블록의 사이즈도 변경된다
- d-none은 display none이 되어 보이지 않는 다는 뜻
- d-md-block은 md일때 block형태로 보여진다는 뜻
- 아래 코드펜으로 확인해보면 중첩해서 사용한 사이즈대로 반응해 크기가 변하는걸 알수있다
hello world