본문 바로가기
TechNical/Front End

Positioning 관련

by 강멍멍이 2017. 11. 15.
반응형

[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>

반응형

댓글