스마트 인재개발원/HTML - CSS - JS
(스마트인재개발원) CSS 기초 이미지 띄우기, float
앨런튜링_
2021. 5. 28. 17:22
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-image: url('img/bg.jpg');
background-repeat: no-repeat;
background-size: 700px;
}
</style>
</head>
<body>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
float: left;
}
body{
text-align: justify;
}
</style>
</head>
<body>
<img src="img/bg.jpg" alt="" >
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores commodi officiis aliquam quis nostrum ut repellat fugit ab eligendi inventore aperiam, temporibus molestias numquam dignissimos incidunt, voluptatibus adipisci obcaecati nisi?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores commodi officiis aliquam quis nostrum ut repellat fugit ab eligendi inventore aperiam, temporibus molestias numquam dignissimos incidunt, voluptatibus adipisci obcaecati nisi?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores commodi officiis aliquam quis nostrum ut repellat fugit ab eligendi inventore aperiam, temporibus molestias numquam dignissimos incidunt, voluptatibus adipisci obcaecati nisi?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores commodi officiis aliquam quis nostrum ut repellat fugit ab eligendi inventore aperiam, temporibus molestias numquam dignissimos incidunt, voluptatibus adipisci obcaecati nisi?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores commodi officiis aliquam quis nostrum ut repellat fugit ab eligendi inventore aperiam, temporibus molestias numquam dignissimos incidunt, voluptatibus adipisci obcaecati nisi?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores commodi officiis aliquam quis nostrum ut repellat fugit ab eligendi inventore aperiam, temporibus molestias numquam dignissimos incidunt, voluptatibus adipisci obcaecati nisi?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores commodi officiis aliquam quis nostrum ut repellat fugit ab eligendi inventore aperiam, temporibus molestias numquam dignissimos incidunt, voluptatibus adipisci obcaecati nisi?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores commodi officiis aliquam quis nostrum ut repellat fugit ab eligendi inventore aperiam, temporibus molestias numquam dignissimos incidunt, voluptatibus adipisci obcaecati nisi?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores commodi officiis aliquam quis nostrum ut repellat fugit ab eligendi inventore aperiam, temporibus molestias numquam dignissimos incidunt, voluptatibus adipisci obcaecati nisi?
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{width: 100px;
height: 100px; }
#box1{
background-color: red;
float:right;
}
#box2{
background-color: rgb(11, 103, 241);
float: left;
}
#box3{
/* clear = 양쪽(float)의 영향을 받지 않겠다
속성(left, right, both)*/
background-color: rgb(46, 224, 120);
clear: both;
}
</style>
</head>
<body>
<div id='box1'></div>
<div id='box2'></div>
<div id='box3'></div>
</body>
</html>