-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path21layout.html
131 lines (118 loc) · 4.89 KB
/
21layout.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!--
부트스트랩 레이아웃
grid system
grid란 화면을 일정크기의 격자로 나눈 것을 의미
부트스트랩에서는 이것을 토대로 웹 페이지를 구성하는
요소와 컨텐츠를 배치할 수 있음
이 방식을 통해 데스크탑/모바일/태블릿 환경에 따라
컨텐츠 재배치가 훨씬 수월해짐
부트스트랩은 반응형 12열 그리드 시스템을 사용함
container, row, col
부트스트랩에서 레이아웃 관련 스타일은 container, row, col
을 이용함
html에서 표를 만드는 것과 유사하게 container 클래스로
tr, th는 row로, td는 col 클래스로 대응한다고 보면 됨
즉, container 클래스로 레이아웃의 전체공간을 정의하고
row 와 col 로 행과 열을 정의한다고 이해하면 됨
.container : 반응형 고정폭 레이아웃
.container-fluid : 유동 최대폭 레이아웃
.container-breakpoint : 반응형 중단점 유동 레이아웃
.col-breakpoiont : 중단점을 기준으로 이하면 유동폭, 이상이면 고정폭으로
열의 너비를 결정함
-->
<!doctype html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
.bg { background: #dddddd;
text-align: center; }
.box { height: 250px; }
.box2 { height: 35px; background: gold; }
</style>
</head>
<body>
<h1>부트스트랩 레이아웃</h1>
<h2>grid system</h2>
<div class="container bg box">고정폭</div>
<hr>
<div class="container-fluid bg box">유동폭</div>
<h2>grid system</h2>
<div class="container bg box">
<div class="row">
<div class="box2 col-1">1</div>
<div class="box2 col-1">2</div>
<div class="box2 col-1">3</div>
<div class="box2 col-1">4</div>
<div class="box2 col-1">5</div>
<div class="box2 col-1">6</div>
<div class="box2 col-1">7</div>
<div class="box2 col-1">8</div>
<div class="box2 col-1">9</div>
<div class="box2 col-1">10</div>
<div class="box2 col-1">11</div>
<div class="box2 col-1">12</div>
</div>
</div>
<h2>grid system</h2>
<div class="container-fluid bg box">
<div class="row">
<div class="box2 col-1">1</div>
<div class="box2 col-1">2</div>
<div class="box2 col-1">3</div>
<div class="box2 col-1">4</div>
<div class="box2 col-1">5</div>
<div class="box2 col-1">6</div>
<div class="box2 col-1">7</div>
<div class="box2 col-1">8</div>
<div class="box2 col-1">9</div>
<div class="box2 col-1">10</div>
<div class="box2 col-1">11</div>
<div class="box2 col-1">12</div>
</div>
</div>
<hr>
<h2>grid system</h2>
<div class="container-fluid bg box">
<div class="row">중단점 기준 유동
<div class="box2 col-md">1</div>
<div class="box2 col-md">2</div>
<div class="box2 col-md">3</div>
</div>
</div>
<hr>
<h2>grid system</h2>
<div class="container-fluid bg box">
<div class="row">고정폭 열 너비
<div class="box2 col">1</div>
<div class="box2 col">2</div>
<div class="box2 col">3</div>
</div>
</div>
<hr>
<h2>grid system</h2>
<div class="container">
<header class="row box2" style="background: yellow">
<div class="col-md">header</div></header>
<nav class="row box2" style="background: lightblue">
<div class= "col-md">nav</div>
</nav>
<div id="main" class="row">
<aside class="col-md-3" style="height: 500px;
background: lightgreen">menu</aside>
<section class="col-md-9"
style="background: lightyellow">main</section>
</div>
<footer class="row box2" style="background: ">
<div class="col-md">footer</div></footer>
</div>
<!-- jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>