hover시 문제 발생

미해결질문
이고은 프로필

안녕하세요 선생님!

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

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

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

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

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

https://blog.naver.com/dlrhdms08/221838270814. (문제 영상 링크 입니다.)

항상 감사합니다 :)

Dongho Lee 프로필
Dongho Lee 5달 전

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

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

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스