<최종 화면> 최종 화면보단 flex를 이용한 그때그때 스타일을 하나하나씩 보는게 좋다. (배치, 정렬)
수평으로 배치하고, align-items: flex-start를 하면 요소는 수평 배치, 정렬은 위 기준으로 된다.
수평으로 배치하고, align-items: center를 하면 요소는 수평(가로) 배치, 정렬은 가운데 기준으로 된다.
수평으로 배치하고, align-items: fiex-end를 하면 요소는 수평(가로) 배치, 정렬은 아래 기준으로 된다.
수평으로 배치하고, align-items: stretch를 하면 요소는 수평(가로) 배치, 부모 사이즈만큼 늘린다.
수평으로 배치하고, align-items: baseline를 하면 요소는 수평(가로) 배치, 요소 안의 글씨 아래 기준으로 정렬된다.
두 번째, 요소의 글자 크기를 바꿔서, 어떤 의미인지 좀더 명확히 보자.
반대로 수직 배치에 수평 정렬을 해보자. (수직으로 배열되고, 왼쪽 정렬이 된다.)
수직 배열로 요소는 위에서 아래로 배치되고, 가운데 정렬이 된다.
요소는 수직 배열이라서 위에서 아래로 배치되고, 오른쪽 정렬이 된다.
수직배열에서 stretch를 주면 너비를 넓혀준다.
flex-flow는 direction과 wrap 속성을 한번에 줄 수 있다.
(수평 정렬, )
justify-content: space-around, space-between을 줬지만, align 속성에서도 가능하다.
아까 주석 처리한 네모 박스를 다시 주석을 풀고 여려개로 보자.
제목 영역을 만들때 요소들을 정중앙 정렬을 할때가 있다. 정 가운데 정렬을 해보자.
우선 임의로 글자를 써보자.
배경색과 글자색을 주었다.
지금까지 글자를 가운데 정렬은 text-align: center였으나, 수평 가운데 정렬이고, 수직 기준으로 가운데 정렬은 안된다.
이럴 경우 우선 display: flex;속성을 준다. inline-block처럼 만들고
가운데 정렬을 준다.
그리고 수직 정렬을 가운데로 하면된다.
만약 Hello와 This is header를 윗줄, 아랫줄로 보고 싶다면
배치를 수직 배치로 하면 된다.
지금까지 부모 요소에서 flex 스타일을 적용하였다.
이번에는 자식 요소에서 flex 스타일을 적용하자.
우선 새로 네모 박스를 만들겠다.
자식 요소에서 flex를 사용하려면, 부모 요소에 display:flex로 해야한다.
자식 요소 flex 스타일 order을 알아보자. (배치 순서 변경)
flex-grow를 알아보자. 마치 android의 layout_weight 느낌
ch1만 flex-grow를 주면 ch2,ch3 배치되고 나머지 공간을 ch1로 채운다.
ch1,ch2에만 flex-grow를 주면 ch3(ccc) 감쌀정도의 크기를 차지하고 나머지 부분을 aaa,bbb가 차지한다.
layout_weight처럼 상대적인 값으로 width 적용해보자. ch1 : 1 / ch2 : 1 / ch3 : 6
flex-shrink 속성을 알아보기 위해 새로운 파일을 만들어서 적용해보자.
우선 비교를 위해 여러개의 네모를 만들어보자.
브라워저 화면에 비례하여 전체적으로 크기가 균등하게 조절이 된다.
특정 네모칸에 flex-shrink:0; 을 주면 크기가 고정이 된다.
flex-shrink:1;은 같은 비율로 다른 것과 똑같이 변경되고,
flex-shrink:2;는 2할 더 변경된다.
브라우저 창을 줄일 시, 6번은 다른 네모보다 더 줄어든 것을 볼 수 있다.
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.container{
display: flex;
}
.container>div{
background-color: aquamarine;
width: 100px;
margin: 10px;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div class="container">
<div>1</div>
<div style="flex-shrink: 0;">2</div>
<div>3</div>
<div style="flex-shrink: 1;">4</div>
<div>5</div>
<div style="flex-shrink: 2;">6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>
|
이제 다시 01_flex.html로 와서 flex-basis 를 알아보자.
우선 비교를 위해 ch1,ch2,ch3 속성을 똑같이 맞춰주자.
flex-basis: 값은 초기 길이를 지정하는 속성이다.
자식 요소의 flex에는 flex-flow와 비슷한 축약형도 있다.
<복붙용 코드>
01_flex.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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex style</title>
<style>
/* 기본적인 div요소의 스타일링 */
div#container>div{
background-color: aqua;
padding: 20px;
margin: 10px;
}
/* flex 스타일 적용하기 [자식요소의 배치방식을 부모 요소에서 제어] */
/* 유연한 구조이므로 브라우저 사이즈에 반응하는 반응형 웹에 적합함 */
div#container{
display: flex; /*자식들의 요소 width가 inline-block처럼 wrap되어 옆으로 배치됨*/
/* 기존 방식과 차이점 : 기존 방식은 자식요소들에게 직접 display속성을 적용했었음. */
/* 기본적으로 자식 요소가 많아서 부모 너비를 벗어나도 자동 줄바꿈되지 않음 */
/* 만약 줄바꿈이 되고 싶다면.. */
/* flex관련 세부 속성들!!! */
/* 1. flex-wrap */
flex-wrap: wrap;
flex-wrap: nowrap; /*기본*/
flex-wrap: wrap-reverse; /*새로 줄바꿈되는 줄이 위로 생김*/
flex-wrap: nowrap;
/* 2. flex-direction */
/* 자식요소들은 기본적으로 가로 방향으로 배치됨 */
/* 이 배치방법을 변경하는 속성 [acdroid orientation가 비슷] */
flex-direction: column;
flex-direction: column-reverse; /*아래부터 수직으로 올라가면서 배치됨*/
/* 부모높이를 자식 요소들보다 크게 해야 column-reverse를 정확히 알수 있음 */
height: 300px;
flex-direction: row; /*가로방향(default)*/
flex-direction: row-reverse;
/* direction, wrap속을 축약형 속성 */
flex-flow: row wrap;
flex-flow: wrap column;/*순서 상관 없음*/
/* 기본 상태 */
flex-flow: row nowrap;
/* 졍렬에 사용되는 2가지 속성 */
/* 1. justfy-content : direction방향의 정렬*/
/* 1-1 수평배열(row) 일때는 수평 정렬 */
flex-direction: row;
justify-content: center;
justify-content: flex-end; /*right*/
justify-content: flex-start; /*left*/
justify-content: space-between; /*요소 사이의 공백을 넓혀줌*/
justify-content: space-around; /*요소들을 둘러싸는 공백 너비가 같게*/
/* 1-2 수직배열(colum) 일때는 수직 정렬 */
flex-direction: column;
justify-content: flex-start; /*top*/
justify-content: center;
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;
justify-content: flex-start;/*default 상태*/
/* 2. align-items : direction과 교차되는 방향 정렬*/
/* 2-1 수평배열(row) 일때는 수직정렬 */
flex-direction: row;
align-items: flex-start; /*top*/
align-items: center;
align-items: flex-end; /*bottom*/
align-items: stretch; /*수평 배열일 때 요소의 높이를 부모사이즈 만큼 넓힘 [기본상태]*/
align-items: baseline; /*요소 안의 글씨의 아래를 기준으로 정렬*/
/* 2-2 수직배열(column) 일때는 수평정렬 */
flex-direction: column;
align-items: flex-start; /*left*/
align-items: center;
align-items: flex-end; /*right*/
align-items: stretch; /*수직 배열이므로 요소의 너비를 넓혀줌*/
align-items: baseline; /*글씨의 아래를 기준이므로 의미없는 값*/
/* aling정렬[direction의 교차 정렬]에서 space-aroundm space-between을 사용하고 싶다면 */
/* align-content속성을 사용해야함 */
flex-flow: row wrap;
justify-content: flex-start; /*기본 상태*/
align-content: space-around;
align-content: space-between;
}
</style>
</head>
<body>
<div id="container">
<div>aa</div>
<div style="font-size: 30px">bb</div>
<div>cc</div>
<!-- 만약 개수가 많아 부모 사이즈를 벗어난다면? -->
<!-- 기본적으로는 부모 밖으로 나가버림. -->
<div>aa</div>
<div>bb</div>
<div>cc</div>
<div>aa</div>
<div>bb</div>
<div>cc</div>
<div>aa</div>
<div>bb</div>
<div>cc</div>
</div>
<hr>
<!-- 제목영역 만들때 요소들을 가운데 정렬하기!! -->
<div id="aa">
<h2>Hello</h2>
<p>This is header</p>
</div>
<style>
div#aa{
height: 200px;
background: cornflowerblue;
color: white;
/* 이 방법으로 정가운데 정렬이 안됨!! */
/* text-align: center; */
/* 정가운데 정렬할 때 flex Good! */
display: flex; /*인라인 요소로 바뀜*/
justify-content: center;
align-items: center; /*수평정렬*/
flex-direction: column; /*수직배치*/
}
</style>
<hr>
<!-- 자식 요소 입장에서 사용하는 flex 스타일 속성 -->
<div id="container2">
<div id="ch1">aaa</div>
<div id="ch2">bbb</div>
<div id="ch3">ccc</div>
</div>
<style>
/* 자식요소의 기본 스타일 */
#container2>div{
background-color: tomato;
padding: 20px; margin: 10px;
}
/* 부모의 display가 flex가 아니면 자식 요소의 flex는 의미가 없음 */
#container2{display: flex;}
/* 자식들이 사용하는 flex 스타일 */
/* 1. order : 배치순서 변경 */
#ch1{ order:3;}
#ch2{ order:1;}
#ch3{ order:2;}
/* 2. flex-grow : 너비를 상대적인 값의 비례로 결정 */
/* android에서 weight속성과 같은 역할 */
#ch1{
order: 1;
flex-grow: 1;
}
#ch2{
order: 2;
flex-grow: 1;
}
#ch3{
order: 3;
flex-grow: 6;
}
/* 3. flex-shrink : 나머지 item들에 비해 얼마나 줄어들 */
/* 별도 예제로.. 02_flex_shrink.html */
/* 4. flex-basis: 요소의 초기 길이를 지정함 */
/* 공간의 여우가 있을 때 최소길이 확보 */
#ch1{
flex-grow: 0;
}
#ch2{
flex-grow: 0;
flex-basis: 200px;
}
#ch3{
flex-grow: 0;
flex-basis: 300px;
}
/* 5. flex(축약형 -grow - shrink - basis) */
#ch1{flex: 0 0 0px;}
#ch2{flex: 0 0 0px;}
#ch3{flex: 0 0 0px;}
#ch1{flex: 1 0 0px;}
#ch2{flex: 3;} /*-grow만 작성해도 됨*/
/* self 정렬 */
#container2{
height: 300px;
}
#ch1{
align-self: flex-start;
}
#ch2{
align-self: center; /*strech가 center로 바뀜*/
}
#ch3{
align-self: flex-end;
}
</style>
</body>
</html>
|
02_flex_shrink.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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.container{
display: flex;
}
.container>div{
background-color: aquamarine;
width: 100px;
margin: 10px;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div class="container">
<div>1</div>
<div style="flex-shrink: 0;">2</div>
<div>3</div>
<div style="flex-shrink: 1;">4</div>
<div>5</div>
<div style="flex-shrink: 2;">6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>
|
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML+ CSS' 카테고리의 다른 글
| HTML+CSS ( 기초) 홈페이지 화면 영역 구성 (flex, 반응형 웹 적용 ,따로 기능 없음) (1) | 2019.12.10 |
|---|---|
| HTML+CSS (기초) flex 스타일 적용하기 1-1 (0) | 2019.12.10 |
| HTML+CSS (기초) 부모 요소, 자식 요소 사이즈 영향 (0) | 2019.12.10 |
| HTML+CSS (기초) 홈페이지 만들기 스타일 시트 적용 (media 이용, 기능 없음) (2) | 2019.12.10 |
| HTML+CSS (기초) media 스타일 적용하기 2 (브라우저 크기에 따라 사이즈 조절) (0) | 2019.12.10 |
댓글