CSS - float
2020. 7. 31. 14:26ㆍWeb(CSS)
|
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
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
|
@charset "UTF-8";
#main-nv{/*border: 1px solid red;*/
margin-top: 50px;
margin-bottom: 60px;
overflow: hidden;/* 영역밖의 내용처리-숨김
으로 자식들이 float으로 빠져나가서 생긴 부모의 높이(형태)를 다시 살림 */
}
#main-nv ul{list-style: none;
/*border: 1px solid red;*/
float: right;/* 전체를 우측메뉴바로.. */
}
#main-nv li{/*border: 1px solid;*/
float: left;/* 각각 메뉴들을 한 줄에 나란히 */
margin-left: 15px;}
#main-nv a{text-decoration: none;
padding: 8px 10px;}
#main-nv a:link, #main-nv a:visited{
background-color: #330;
color: #ff0;
}
#main-nv a:hover, #main-nv a:active{
background-color: #ff0;
color: #330;
transition: 1s;/*1초동안 속성값의 변화가 지속됨*/
}
h1{background-color: #0d0;
clear: both;/* float의 영향을 해제함 */}
p{line-height: 1.8;
background-color: #eee;}
p>b{
background-color: #9fc;
padding: 5px;
}
/* float: left; */
#left,#right{
border: 4px dashed #ccc;
width: 40%;
margin: 3em 1em;
padding: 1em;
display: inline-block;
vertical-align: top;
}
#left img{
width: 70%;
margin-right: 1em;
float: left;
}
#left p{
border: 4px solid #00c;
}
/* float: right; */
#right img{
margin-left: 1em;
width: 70%;
float: right;
}
/* float으로 요소들을 한 줄에 나란히 정렬 */
section{border: 4px dotted #666;
margin: 4em 1em;
padding: 1em;}
section>div{border: 1px solid;}
#sec01>div{float: left;}
#sec02>div{float: right;}
.div-l{color: red;
float: left;}
.div-r{
color: blue;
float: right;
}
header{border: 1px solid #333;
height: 200px;}
header nav ul{list-style: none;}/* 목록앞의모양 제거 */
header nav li{ border: 1px solid #930;
float: left;
margin-right: 10px;
}
nav a{text-decoration: none;}/* 링크 밑줄 제거 */
aside{border: 1px solid #f33;
width: 20%;
margin: 1em 0;}
article{border: 1px solid #33f;
width: 50%;
margin: 1em 0.7%;}
aside, article{height: 600px;}
#as-left, article{float: left;}
#as-right { float: right;}
footer{border: 1px solid #333;
height: 100px;
background-color: rgba(0,0,50,0.5);
clear: both;}
//--------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="float.css" rel="stylesheet">
</head>
<body>
<nav id="main-nv">
<ul>
<li><a href="#left">float01</a></li>
<li><a href="#sec01">float02</a></li>
<li><a href="#sec02">float03</a></li>
<li><a href="#sec03">float04</a></li>
<li><a href="#sec04">float05</a></li>
</ul>
</nav>
<h1>float:left/right;</h1>
<p>
이미지에 float:left/right;을 주면 이미지 주변으로
글자들이 자연스럽게 둘러싸며 배치됨.<br>
(이미지가 공중에 뜨고 생긴 빈공간을 아래에 있던 글자 영역이 밀고 올라와서 자리를 차지하고 글자는 둘러싸게 보여짐)
</p>
<div id="left">
<h2>img float:left;</h2>
<img alt="pineapple" src="img/pineapple.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit
</p>
</div>
<div id="right">
<h2>img float:right;</h2>
<img alt="pineapple" src="img/pineapple.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit
</p>
</div>
<hr>
<h1>float으로 요소들을 한 줄에 나란히 정렬하기</h1>
<p>
요소들을 각자 float: left;를 주면 크기가 줄면서 한줄에 나란히 좌측에 배치되고<br>
요소들을 각자 float: right;를 주면 크기가 줄면서 한줄에 나란히 우측에 배치되면서 요소들의 순서가 바뀐다<br>
float된 요소들의 영향으로 부모요소는 높이값이 없어진다.
</p>
<section id="sec01">
<h2>float:left;</h2>
<div>div01</div>
<div>div02</div>
<div>div03</div>
<div>div04</div>
</section>
<section id="sec02">
<h2>float:left;</h2>
<div>div01</div>
<div>div02</div>
<div>div03</div>
<div>div04</div>
</section>
<section id="sec03">
<h2>float:left;</h2>
<div class="div-l">div01</div>
<div class="div-l">div02</div>
<div class="div-r">div03</div>
<div class="div-r">div04</div>
</section>
<section id="sec04">
<p>
나란히 배치하는 레이아웃용으로 float올 사용한 경우
<b>float을 적용한 요소들 다음에 오는 요소는</b> float의 영향을 받아서
밀고 올라오므로 <b>clear:both;를 적용해서 제자리로</b> 내려보낸다.
</p>
<header>
<nav>
<ul>
<li><a href="#">menu01</a></li>
<li><a href="#">menu02</a></li>
<li><a href="#">menu03</a></li>
</ul>
</nav>
</header>
<aside id="as-left">
aside left
</aside>
<article>
article center
</article>
<aside id="as-right">
aside right
</aside>
<footer>
copyright
</footer>
</section>
</body>
</html>
|
cs |
float을 활용하여 화면의 배치를 바꾸고 이미지를 나란히 만들어주는 기능을 배워보았다.
어려운 건 없고 왼쪽으로 하느냐 오른쪽으로 하느냐 정도의 차이니깐 활용을 잘해보도록 하자!
'Web(CSS)' 카테고리의 다른 글
| CSS - background-image (0) | 2020.07.31 |
|---|---|
| CSS - overflow (0) | 2020.07.31 |
| CSS- display (0) | 2020.07.31 |
| CSS - padding (0) | 2020.07.27 |
| CSS - margin (0) | 2020.07.27 |