Jam's story
float 유동배치 본문
float: right 나 left로 설정할 수 있다.
왼쪽이나 오른쪽에 배치되도록 하는것이다.
우선 이러한 html 이 있다.
.float-unit {
width: 50px;
background: #707070;
color: #FFFFFF;
font-size: 18px;
font-weight: bold;
text-align: center;
padding: 15px 0;
}

이렇게 세로로 나온다
여기에 float : left를 추가해보자

이렇게 나온다
clear: both 를 추가해준다
부모 요소(div.floatframe)가 해당 요소(div.float-unit)를 인식하지 못하고,
오로지 float되지 않은 요소들만 인식하여 포함
내부에 배치하기 위해서는 float 속성 해제 필요

<!DOCTYPE html>
<html>
<head>
<title>overflow 프로퍼티</title>
<style>
.float-frame {
background : #E0E0E0;
border: 1px solid #D0D0D0;
padding: 10px;
}
.float-unit {
width: 50px;
background: #707070;
color: #FFFFFF;
font-size: 18px;
font-weight: bold;
text-align: center;
padding: 15px 0;
float: left;
}
.clear {
clear: both; /* float 속성 해제 */
}
</style>
</head>
<body>
<div class="float-frame">
<div class="float-unit">A</div>
<div class="float-unit">B</div>
<div class="float-unit">C</div>
<div class="float-unit">D</div>
<div class="clear"> </div> <!-- float 속성 해제 -->
</div>
</body>
</html>
'2021-2학기 > html+css+javascript' 카테고리의 다른 글
position 배치 (0) | 2021.10.19 |
---|---|
디자인 color 배색 사이트 (0) | 2021.10.18 |
웹페이지 간단하게 만들어보기 (0) | 2021.10.17 |
중간고사 준비2 (0) | 2021.10.16 |
html+css로 똑같이구현해보기 (0) | 2021.10.15 |