이미지나 게시글 출력후 마우스 Hover시 테두리라인 색상이나 두께를 나타내고자 할때
A같이 코드를 주면 두께만큼 아래 위로 영역이 움직입니다.
A 내용 영역
<style type="text/css">
.a { background:black; color:white; width:200px; text-align:center; padding:10px 20px}
.a:hover { background:white; color:black; border:3px solid red; border-radius:5px;}
</style>
<div class="a">A 내용 영역</div>
.a { background:black; color:white; width:200px; text-align:center; padding:10px 20px}
.a:hover { background:white; color:black; border:3px solid red; border-radius:5px;}
</style>
<div class="a">A 내용 영역</div>
B와 같이 코드를 주면 내용이 움직이지 않고 고정되게 출력됩니다.
B 내용 영역
<style type="text/css">
.b { background:black; color:white; width:200px; text-align:center; padding:10px 20px; }
.b:hover { background:white; color:black; border:3px solid red; margin:-3px; border-radius:5px; }
</style>
<div class="b">B 내용 영역</div>
.b { background:black; color:white; width:200px; text-align:center; padding:10px 20px; }
.b:hover { background:white; color:black; border:3px solid red; margin:-3px; border-radius:5px; }
</style>
<div class="b">B 내용 영역</div>