반응형
<float>
웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용
*공식: 자식이 float left하면 반드시 부모도 float left여야 한다
- inherit - 부모요소 상속
- left - 왼쪽
- right - 오른쪽
- none - 요소 부유시키지 않음
-사용 예시)
section{
float: left;
width: 580px;
}
section article{
float: left;
width: 250px;
height: 220px;
margin: 5px;
padding: 10px;
border: 1px solid #ccc;
}
aside{
float: right;
width: 200px;
border: 1px solid darkgreen;
margin-top: 77px;
}
<clear>
float 속성이 적용된 이후 나타나는 요소들의 동작을 조절, 이후에 등장하는 요소들이 더는 flaot 속성에 영향을 받지 않도록 설정
clear : both;
footer{
clear: both; /*앞 aside의 float에 딸려 올라가지 않도록*/
width: 800px;
margin-bottom: 0;
background-color: #000;
color: white;
text-align: center;
}
반응형
'html, css, bootstrap' 카테고리의 다른 글
1104_선택자 (0) | 2022.11.04 |
---|---|
1104_미디어 태그 (0) | 2022.11.04 |
css_semantic tags (0) | 2022.11.03 |
1103_css_position (0) | 2022.11.03 |
visual studio git push (0) | 2022.11.02 |