반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS float 속성</title>
<style>
/*
float 속성값
left - 해당 요소를 문서 왼쪽에 배치
right - 해당 요소를 문서 오른쪽에 배치
none - 좌우 어느쪽에도 배치하지 않음. 기본값
*/
#tree {
float: left;
margin-right: 40px;
}
</style>
</head>
<body>
<img id="tree" src="images/tree.png">
<p>Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris est sint sit aliqua enim. Aute Lorem eu sint aute sunt
proident. Do culpa consectetur elit duis laboris reprehenderit incididunt nulla. Irure exercitation tempor aliqua
laboris cupidatat anim in non officia aliquip excepteur fugiat labore.</p>
<p>Lorem ipsum reprehenderit adipisicing exercitation enim velit veniam incididunt sit consectetur elit exercitation.
Commodo veniam sit quis nisi ea. Ipsum do aliqua nostrud laboris elit duis adipisicing id Lorem qui. Labore dolor
ipsum enim incididunt. Velit qui cillum sunt labore incididunt duis aute Lorem nulla et. Sint commodo aute amet
laboris ullamco exercitation Lorem dolore veniam ut reprehenderit incididunt. Laborum nulla eiusmod cillum irure
anim aute.</p>
<p>Excepteur voluptate ad irure ipsum duis. Deserunt cupidatat commodo proident eu mollit cillum commodo quis quis et
ad. Incididunt adipisicing enim laboris voluptate.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>float 속성 해제</title>
<style>
/*
clear 속성 - float 속성을 사용하면 그다음에 넣는 다른 요소에도 똑같은 요소가
전달되기 때문에 float 속성이 더이상 유용하지 않다고 알려주는 속성
claar 속성값
left - float:left를 해제
right - float:right를 해제
both - float:left와 right 모두 해제
*/
div {
padding: 20px;
margin: 10px;
}
#box1 {
background: #ffd800;
float: left;
}
#box2 {
background: #0094ff;
float: left;
}
#box3 {
background: #00ff21;
}
#box4 {
background: #a874ff;
clear: left;
}
</style>
</head>
<body>
<div id="box1">박스1</div>
<div id="box2">박스2</div>
<div id="box3">박스3</div>
<div id="box4">박스4</div>
</body>
</html>
반응형
'IT > CSS' 카테고리의 다른 글
| CSS - 3일차 background (0) | 2023.05.15 |
|---|---|
| CSS - 2일차 box-width, border-radius, box-shadow (0) | 2023.05.11 |
| CSS - 2일차 display (0) | 2023.05.11 |
| CSS - 2일차 position (0) | 2023.05.11 |
| CSS - 2일차 padding, margin (0) | 2023.05.11 |