실제 작동시 질문입니다.

Question

안녕하세요 선생님, 제이쿼리 들어와서 헷갈리는 부분이 많아서 질문남깁니다. 1. jquery를 수업내용과 같이 작성하였을때 a tag에 마우스를 올리지 않더라도  a tag 보다 넓은 실제 li 영역에 마우스를 올리면 배경은 바뀌지만 a에 적용한 hover 효과는 작동하지 않았습니다. -> 이경우에 a에 길어져도 attr을 부여하거나 jquery에 parent()를 추가해야 호버와 함께 작동할 것 같은데 맞나요? ㅠㅠ 2. 해당예제를 한글로 변환해서 만들려고 하다가 궁금한 부분이 생겼습니다. a:before에 width 값을 0으로 주고, overflow를 주기전에 영문은 예제처럼 제자리에 있는 반면, 한글은 수직아래로 떨어집니다.  이때, heigh 값을 100%로 주고 overflow를 hidden 할 경우에 영문과 비슷하게 작동하지만 마지막 글자에서 부자연스럽게 채워지게 되는데 한글 메뉴로 구성했을때 다른 해결방법이 있는지 궁금합니다.

코딩웍스(Coding Works) · Answer

1번 질문에 대한 답변 data-image="images/portrait-01.jpg"를 a태그 안에 넣지 않고 li에 넣은 것은 a태그 내부가 너무 길어져서 입니다. 특별한 의미는 없습니다. a로 data-image속성을 옮기면 아래 처럼 스크립트의 선택자를 바꿔주면 됩니다.

어바웃

$(' .navi li a ').mouseenter(function(){...} $(' .navi li a ').mouseleave(function(){...} 2번 질문에 대한 답변 한글의 경우나 띄어쓰기가 있는 경우 자동 줄바꿈이 일어납니다. 그래서 자동줄바꿈을 하지 않게 white-space: nowrap; 속성을 추가하시며 됩니다. 참고로 한글이 입력되면서 a와 a:before의 높이가 살짝 안맞을거에요. 이런 부분을 해결하는건 a를 inline-block으로 변경해주세요. 그래서 크기값을 갖게 해주세요. a를 block으로 변경하지 않는건 a의 너비가 100%가 되는 것을 방지하기 위해서 입니다. .navi li a { display: inline-block; } .navi li a:before { white-space: nowrap; /* 텍스트가 넘쳐도 자동으로 줄바꿈 하지 않음 (기본값은 normal) */ }