[display]
ㅇblock
한줄을 혼자 다 먹는다
높이, 넓이 지정을 할 수 있다.
ㅇinline
한줄에 여러개를 쓸 수 있다.
높이, 넓이 조절이 안 된다.
ㅇinline-block
높이, 넓이를 지정하면서 한줄에 여러개를 쓸 수 있다.
[position]
ㅇstatic
알아서 이전 포지션을 보고 그 다음 자리를 매꿔가면서 자기자리르 찾아간다.
ㅇabsolute
전후 안 따지고 기존 자리를 빼서 상위(부모)객체기준으로 자리를 옮겨간다.
static인 속성의 위치가 이놈을 빼고 다시 자리 조정해서 바뀐다.
자식을 absolute 를 쓰기 위해서는 부모객체가 static이면 안 먹는다.
자식 때문에 부모를 바꾸어야 할 경우에는 뒤에께 안 바뀌기 위해서는
absolute 보다는 relative로 바꿔주는게 기존 레이아웃을 보존 할 수 있다.
ㅇrelative
내 자리를 잡아 높고 상대적 위치로 이동을 한다.
static 속성인 것들의 위치가 바뀌지 않는다.
ㅇfixed
absolute 랑 같은데 viewpoint 기준으로 움직인다.
스크롤 해도 고정적인 위치에 보인다.
[샘플 코드]
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
.box{
border : 1px solid #000;
background: #efefef;
}
.a{
width: 300px;
height: 100px;
left: 200px; top: 200px;
position: relative;
background: #f00;
}
.b{
width: 300px; height: 100px;
display: inline-block;
left: 200px; top: 200px;
position: absolute;
}
.c{
width: 300px;
height: 100px;
}
.d{
width: 100px; height: 100px;
right: 0px; bottom: 0px;
position: fixed;
}
body{ height: 1244px;}
.child{
left: 5px; top: 5px;
width: 100px; height: 100px;
position: absolute;
}
.parent{
position: relative;
}
</style>
</head>
<body>
<div class="box a">outer1</div>
<span class="box b">span1</span>
<span class="box">span2</span>
<button class="c">button</button>
<div class="box d">outer2</div>
<div class="box parent">parent
<div class="box child">child</div>
</div>
<div class="box">outer3</div>
</body>
</html>
댓글