<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>위치 속성</title>
<style>
/*
컨텐츠의 위치를 원하는 곳으로 지정하려며 CSS의 position 속성을 이용해야한다.
만일, 개발자가 아무런 속성을 지정하지 않을 경우
모든 태그요소들은 기본적으로 position 이 relative이다.
절대위치는 다른 태그요소와 공존할 수 있다. 즉, 다른 태그에 의해 밀려나지 않는다.
*/
#b1{
position:absolute; /*절대위치: 자신의 부모 태그를 기준으로 한 절대위치..
ex) body로부터 절대위치*/
left:250px;
top:30px;
border:2px solid red;
}
#b2{
position:absolute; /*절대위치: 자신의 부모 태그를 기준으로 한 절대위치..
ex) body로부터 절대위치*/
left:300px;
}
</style>
</head>
<body>
<img src="../images/bomberman.png" id="b1" width="100px"></img>
<img src="../images/bomberman.png" id="b2" width="100px"></img>
</body>
</html>
모든 태그는 박스이면서, 이 박스들은 두가지 유형으로 분류된다. 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>
