모든 태그는 박스이면서, 이 박스들은 두가지 유형으로 분류된다. 1. block형 : 자신과 같은 행에, 그 어떠한 태그도 존재할 수 없으며 너비와 높이를 가질 수 있다. 2. inline형 : 자신과 같은 행에, 다른 태그 요소와 공존이 가능하며 너비와 높이를 가질 수 없다.
float을 이용하여 Box를 띄워주어 같은 행에 존재할 수 있도록 할 수 있다.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>block, inline 속성</title>
<style>
#box1{
background-color:red;
width:200px;
}
#box2{
background-color:LightGray;
width:400px;
}
</style>
</head>
<body>
<!-- 모든 태그는 박스이면서, 이 박스들은 두가지 유형으로 분류된다.
1. block형 : 자신과 같은 행에, 그 어떠한 태그도 존재할 수 없다.
너비와 높이를 가질 수 있다.
2. inline형 : 자신과 같은 행에, 다른 태그 요소와 공존이 가능
너비와 높이를 가질 수 없다.
-->
<div id="box1">box1</div>
<div id="box2">box2</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>block, inline 속성</title>
<style>
#box1{
background-color:red;
width:200px;
float:left; /*현재의 태그 요소를 띄운다.*/
}
#box2{
background-color:LightGray;
width:400px;
float:left;
}
</style>
</head>
<body>
<!-- 모든 태그는 박스이면서, 이 박스들은 두가지 유형으로 분류된다.
1. block형 : 자신과 같은 행에, 그 어떠한 태그도 존재할 수 없다.
너비와 높이를 가질 수 있다.
2. inline형 : 자신과 같은 행에, 다른 태그 요소와 공존이 가능
너비와 높이를 가질 수 없다.
-->
<div id="box1">box1</div>
<div id="box2">box2</div>
</body>
</html>
