TIL - 구분선 포인터 문제

📌👩🏻‍💻

로그인 모달창 과제를 하며 회원가입과 아이디/비밀번호 찾기 사이의
구분선을 위와 같이 before 가상요소를 사용하여 구현했는데
이 때 구분선이 선택 가능하여 아이디/비밀번호 찾기로 넘어갈 수 있다는 문제점을 발견했다. 국내 사이트는 이와 같은 구분선을 어떻게 처리할까 궁금해 찾아봤다.

네이버

• 나와 같이 before 가상요소를 사용하여 구현했다. 때문에 구분선 클릭이 가능하다.
• hover하면 밑줄이 생긴다.

다음

다음 고객센터 하단 화면

• | 요소를 직접 html에 넣은 것으로 보인다.
• 구분선이 선택되지 않는다.
• hover하면 밑줄이 생긴다.

다음 메인 화면 하단

• span태그로 구분점을 감싼 것을 볼 수 있다.
• span태그에 txt_dot이라는 클래스를 지정하여 패딩값을 지정했다.
• hover하면 밑줄이 생긴다.

카카오

• 네이버와 마찬가지로 before 가상요소를 사용하여 구분선을 삽입했다.
• 때문에 구분선에도 포인터가 생기고 클릭 역시 가능하며
  마찬가지로 hover하면 밑줄이 생긴다.

다음을 제외한 네이버와 카카오는 가상요소를 사용해 구분선을 삽입했고,
다음은 html에 직접 구분선, 구분점을 삽입했다. 세 사이트 모두 hover하면 밑줄이 생기는데, 사용자로써는 밑줄로 인해 큰 불편함을 느끼지 못할 수 있겠구나 라고 생각했다. (실제로 나도 찾아보며 알게 되었기 때문)