<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>부트스트랩 프레임워크</title>
<!-- 부트스트랩 -->
<link href="./resource/bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="./resource/bootstrap-3.3.2-dist/css/bootstrap-theme.min.css" rel="stylesheet">
<script src="./resource/js/jquery-3.4.1.min.js"></script>
<!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->
<!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>그리드 시스템</h1>
<div>
<사용방법> <br>
1) .container-fluid 혹은 .container 상위 태그에 클래스 지정<br>
2) 그 하위에 .row 클래스 지정 (clear css 속성 동일 - float 해제)<br>
3) 그리드 시스템 클래스 지정<br>
- 그리드 시스템의 클래스 처음 시작은 .col 클래스로 시작된다.<br>
- 디바이스 크기를 지정하는 접두사가 붙는다.<br>
예) .col-xs-*, .col-sm-*, .col-md-*, .col-lg-* <br>
- 디바이스 크기 접두사 뒤에 12열 기준으로 열정렬 숫자를 나열한다.<br>
예) .col-xs-2, .col-sm-3, .col-md-5, .col-lg-1<br>
4) row 클래스는 1행 기준점 마다 지정해야한다.<br>
5) 디바이스 크기를 지정하는 접두사<br>
- xs : 최소 사이즈 모바일<br>
- sm : 탭 <br>
- md : 데스크탑 중간<br>
- lg : 데스크탑 최대<br>
6) 그리드 시스템 클래스는 디바이스 크기 별로 중복 적용이 가능하다.<br>
예) (1개의 태그에 클래스 적용) class="col-lg-6 col-md-4 col-xs-12"<br>
: lg 크기일 경우 6열로 정렬, md 크기일 경우 4열로 정렬, xs 크기일 경우 12열로 정렬
</div>
<h1>반응형 유틸리티</h1>
<div>
디바이스 크기에 따라 그리드 시스템 적용 대상을 보이거나 안보이게 할 수 있다.<br>
(작은 기기에서 안보여야 할 영역을 감출 수 있다.)
</div>
<h1>그리드 시스템 적용</h1>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-6 col-xs-12"> <!-- sm없을 경우 md사이즈로 적용됨 -->
<p class="bg-danger">1</p>
</div>
<div class="col-lg-3 col-md-6 col-xs-12">
<p class="bg-warning">2</p>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 hidden-xs hidden-sm">
<p class="bg-success">3</p>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 hidden-xs">
<p class="bg-info">4</p>
</div>
</div>
</div>
<script src="./resource/bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
</body>
</html>