22. 링크 하이라이트 🖍

목표

링크에 마우스를 올리면 하이라이트가 따라오도록 만들어 보자.

HTML + CSS

강의에서 준 자료를 활용했고, 강의에서는 하이라이트를 span으로 생성했지만 나는 HTML에 div로 만들어 두었다.

스크립트 작성

이번에도 코드가 단 17줄이다. a 태그를 모두 찾고 마우스가 들어왔을 때 호버 이벤트를 발생시켜 준다. 뷰포트를 기준으로 요소가 차지하는 영역을 나타내는 getBoundingClientRect()를 이용하여 너비, 높이, 위치 등을 받아왔다. 뷰포트 기준이기 때문에 페이지 스크롤을 더해서 위치를 지정해주면 된다. 크기가 딱 맞으니 보기 답답해서 3px의 좌우 패딩을 주었다.

새로 알게 된 점

getBoundingClientRect()라는 함수는 처음 봤는데 이제야 알게 된 게 억울할 정도로 좋다. 속성으로 주어지는 clientTop이나 offsetTop은 일단 용어부터가 헷갈리고 뷰포트나 페이지 기반 좌표는 존재하지 않아 정확한 위치를 받아오기 힘들었다. 이것도 뷰포트에 나타나는 요소가 아니면 제대로 작동하지 않는다는 문제가 있긴 하지만 속성을 이용한 방식보다 훨씬 편하고 정확해서 마음에 든다.

이번 과제처럼 event.target을 여러번 입력해야 되는 경우 구조분해할당을 이용하니 매우 편했다. 그런데 속성을 설정할 때는 하나씩 할당해주지 않으면 적용되지 않았다.

정확히 무슨 이유로 적용이 안 되는 건지는 모르겠지만 CSS 자체가 JS에 비해서 엄격한 것 같다. JS는 웬만하면 알아서 해석해 주는데 CSS는 조금이라도 틀리면 다 무시해 버리니...

소스 코드

Visit Github Repository