CS Position 속성 활용팁 (margin과 absoulte 활용)

margin과 absoulte 활용

 

원하는 요소를 position : absoulte; 를 사용해서 브라우저 가운데로 오려고 하려면,

이동하고자 하는 요소의 가로 세로 사이즈 반의 크기만큼 margin을 활용해서 -값을 준다

/*****반만큼 나눌때 border 테두리를 줬을때 테두리 값을 더해야 한다 예를들어 border 10px이면

width 값이 100px이 아니라 120px에서 반으로 나뉘어 60px이라고 생각해야 한다 

이유는 width가 양쪽 합산 해서 120 / 2 인거다 *******/

 

width / 2 = X

height /2 = Y

margin-left = X;

margin-top: Y; 

 

<style>
div{position:absoulte;left:50%top:50% margin:-60px 0 0 -60px;
width:100px; height:100px;border:10px solid red;}
</style>