인프런 커뮤니티 질문&답변
작성한 질문수
hover시 문제 발생
작성
·
2.2K
1
안녕하세요 선생님!
지금 실습예제 보면서 혼자 메인메뉴를 만들어보고 있는데요,
메뉴를 float: left로 나열하고 hover시 font-weight: bold를 적용시키니
오버 할 때마다 조금조금씩 자리가 밀려나서 전체 메뉴의 위치가 이동을 하더라구요 !
transition font-size 적용해도 그렇구요 ㅜㅜ
혹시 이 점에 있어서 해결방안이 있을까요?
https://blog.naver.com/dlrhdms08/221838270814. (문제 영상 링크 입니다.)
항상 감사합니다 :)
답변 1
0
Dongho Lee
지식공유자
네 이런 경우에는 li 에 float 을 지정할 때 padding 으로 메뉴의 크기를 만드는 것 보단 width를 지정하는 방법이 있을 수 있습니다. 글자 두께를 지정하면서 글자폭이 늘어나는 문제기 때문에 피해가는 방법입니다.
그리고 지금 현 상태로 보완하는 방법도 있습니다. font-weight: bold; letter-spacing: -1px; 처럼 두께를 지정할 때 자간을 같이 주는 방법입니다. 글자 크기에 따라서 자간의 값은 다를 수 있으니 여러 값을 입력해 보시기 바랍니다. ^^