숨겨져 있지만 접근 가능한 mailto:// 링크 만들기

Question

이 사이트에는 이메일 혼란에 관해 많은 글이 올라온 것으로 알고 있습니다. 그런데 최근에 나는 이전에 한 번도 본 적이 없는 이 깔끔한 작은 CSS-trick을 발견했습니다.

이메일 주소가 표시되지만(여기: [email protected]) 안타깝게도 클릭 가능한 mailto:// 链接。如果有人将其输入为 href 생성이 되지 않으며 물론 해당 주소는 봇이 다시 가져올 수 있습니다.

그래서 모든 .e-mail 요소에 이벤트 리스너를 추가하는 작은 JavaScript 루틴을 추가했습니다.

으아악 으아악 으아악

저는 이 솔루션에 매우 만족합니다. 하지만 다른 한편으로는 내 자바스크립트가 HTML/CSS의 우아함과 단순성을 파괴한다고 생각합니다. 순수한 CSS + HTML만 사용하여 이메일 난독화의 이 방법을 보완하여 모든 일반적인 요구 사항(예: 화면 리더 호환, 완전히 난독화, 올바른 형식, 복사하려면 마우스 오른쪽 버튼 클릭)을 충족하는 클릭 가능하고 눈에 띄는 링크를 생성하는 방법을 아는 사람이 있습니까?

Answer 1

저도 예전에 비슷한 일을 한 적이 있습니다. 심각한 스팸 메일을 받지 않고 내 웹사이트 중 하나에 내 이메일 주소를 표시할 수 있는 방법이 필요합니다. 2년 전에 이 기능을 구현했는데 스팸을 전혀 받지 못했습니다. 하지만 CSS로는 이 작업을 수행하지 않습니다. 이것은 순수한 JS입니다.

결과 위로 마우스를 가져가면 클릭 가능한 이메일 주소가 생성되는 것을 볼 수 있습니다.

도움이 되기를 바랍니다.

으아악 으아악