참고 : https://getbootstrap.com/docs/3.4/css/#grid
예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Step01_GridSystem2</title>
<!-- gride system 사용법 (html의 table만드는 것이랑 비슷) -->
<!-- 1. bootstrap을 로딩한다. -->
<link rel="stylesheet" href="./css/bootstrap.css"/>
</head>
<body>
<!--
2. containe를 결정한다.
(1) .container : 가운데 정렬된 컨테이너
(2) .container-fluid : 폭100%인 유동형 컨테이너
-->
<div class="container">
<!-- 3. row(행)을 정의 한다. -->
<!-- 12등분으로 지정 되어 있음 -->
<div class="row">
<!-- colum(칼럼)을 정의한다. -->
<!-- 예시) 부모요소의 width 기준으로 각 칼럼의 폭을 50% 갖겠다 -->
<div class="col-xs-6">칼럼1</div>
<div class="col-xs-6">칼럼2</div>
</div>
</div>
</body>
</html>
'CSS' 카테고리의 다른 글
| 메뉴만들기연습3 (0) | 2019.11.20 |
|---|---|
| 메뉴만들기 연습2 (0) | 2019.11.20 |
| 메뉴만들기 연습1 (0) | 2019.11.19 |
| CSS+Javascript 1 (0) | 2019.11.19 |
| 이미 만들어져 있는 css요소를 div에 적용해보기 (0) | 2019.11.19 |
