hover시 문제 발생

Question

안녕하세요 선생님!

지금 실습예제 보면서 혼자 메인메뉴를 만들어보고 있는데요,

메뉴를 float: left로 나열하고 hover시 font-weight: bold를 적용시키니

오버 할 때마다 조금조금씩 자리가 밀려나서 전체 메뉴의 위치가 이동을 하더라구요 !

transition font-size 적용해도 그렇구요 ㅜㅜ

혹시 이 점에 있어서 해결방안이 있을까요?

항상 감사합니다 :)

Answer

네 이런 경우에는 li 에 float 을 지정할 때 padding 으로 메뉴의 크기를 만드는 것 보단 width를 지정하는 방법이 있을 수 있습니다. 글자 두께를 지정하면서 글자폭이 늘어나는 문제기 때문에 피해가는 방법입니다.

그리고 지금 현 상태로 보완하는 방법도 있습니다. font-weight: bold; letter-spacing: -1px; 처럼 두께를 지정할 때 자간을 같이 주는 방법입니다. 글자 크기에 따라서 자간의 값은 다를 수 있으니 여러 값을 입력해 보시기 바랍니다. ^^