이미지나 게시글 출력후 마우스 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>
위에 코드로 완벽해 지지 않으면 아래 코드와 같이 해 줘도 됩니다.
C 내용 영역
<style type="text/css">
.c { background:black; color:white; width:200px; text-align:center; padding:10px 20px; border:3px solid transparent; }
.c:hover { background:white; color:black; border:3px solid red; border-radius:5px; }
</style>
<div class="b">C 내용 영역</div>
.c { background:black; color:white; width:200px; text-align:center; padding:10px 20px; border:3px solid transparent; }
.c:hover { background:white; color:black; border:3px solid red; border-radius:5px; }
</style>
<div class="b">C 내용 영역</div>