|
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
|
<div class="row">
<div class="col" style="background-color:red; border: 1px solid;">
col
</div>
<div class="col" style="background-color:red; border: 1px solid;">
col
</div>
</div>
<!--
div class="row"로 두고
그 안에 div class="col"을
두개를 만들면 이 div가
50% 50%로 반반씩 나눈다.
-->
<div class="row">
<div class="col-6" style="background-color:green; border: 1px solid">
col-6
</div>
<div class="col-6" style="background-color:green; border: 1px solid">
col-6
</div>
</div>
<!--
col-6 같은 경우에는
이런식으로 생각하는 것이 좋다.
전체 블럭 = 12
각 div가 6 + 6 씩 나누므로 50% 50% 가
되는 것이다.
만약 col-4 였다면
4 + 4 + 4 = 12
총 3개의 div가 있어야 한 행을
다 채울 수 있었다.
-->
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6" style="background-color:yellow; border: 1px solid">
col-lg-3 col-md-4 col-sm-6
</div>
<div class="col-lg-3 col-md-4 col-sm-6" style="background-color:yellow; border: 1px solid">
col-lg-3 col-md-4 col-sm-6
</div>
<div class="col-lg-3 col-md-4 col-sm-6" style="background-color:yellow; border: 1px solid">
col-lg-3 col-md-4 col-sm-6
</div>
<div class="col-lg-3 col-md-4 col-sm-6" style="background-color:yellow; border: 1px solid">
col-lg-3 col-md-4 col-sm-6
</div>
</div>
<!--
여기서 lg = 데스크탑
md = 태블릿(아이패드)
sm = 모바일(스마트폰)
의미한다.
그러므로
데스크탑 환경에서는
div가 0 0 0 0 (3+3+3+3 총 4개 가 있어야 한 행을 채움)
데스크탑 -> 태블릿 환경
0 0 0
0
(왜냐하면 md-4 이므로 4+4+4 한행에 div가 3개밖에
올 수 없으므로 남은 하나의 div는 팅겨나가 밑으로 빠진다.)
태블릿 -> 모바일
sm=6은 한행에 2개밖에 올 수 없으므로
0 0
0 0
으로 배치가 된다.
-->
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-12" style="background-color:blue; border: 1px solid">
col-lg-2 col-md-3 col-sm-12
</div>
<div class="col-lg-2 col-md-3 col-sm-12" style="background-color:blue; border: 1px solid">
col-lg-2 col-md-3 col-sm-12
</div>
<div class="col-lg-2 col-md-3 col-sm-12" style="background-color:blue; border: 1px solid">
col-lg-2 col-md-3 col-sm-12
</div>
<div class="col-lg-2 col-md-3 col-sm-12" style="background-color:blue; border: 1px solid">
col-lg-2 col-md-3 col-sm-12
</div>
<div class="col-lg-2 col-md-3 col-sm-12" style="background-color:blue; border: 1px solid">
col-lg-2 col-md-3 col-sm-12
</div>
<div class="col-lg-2 col-md-3 col-sm-12" style="background-color:blue; border: 1px solid">
col-lg-2 col-md-3 col-sm-12
</div>
</div>
<!--
이거는 알겠제?
-->
|
cs |
'공부기록 > 웹 개발' 카테고리의 다른 글
| 부트스트랩 container (0) | 2021.12.28 |
|---|---|
| 부트스트랩 글씨체 적용 (0) | 2021.12.28 |
| 부트스트랩 토글이 안 될때 해결방법 (0) | 2021.12.28 |
| CodePly , navbar (0) | 2021.12.28 |
| 부트스트랩을 설치하는 방법 , CDN (0) | 2021.12.28 |