오늘은 HTML로 클릭 가능한 이메일 링크를 만드는, 웹 개발에서 정말 유용하게 쓰이는 기술을 마스터하는 방법을 알아보겠습니다.
잠깐, HTML로 이메일 링크 만드는 법이라고요? 지금 혹시 1998년인가요?
아니요, 물론 그렇지 않습니다. 하지만 사실 메일 링크는 가장 기본적인 형태가 너무 단순해서, 경험 많은 개발자조차 작성 방법을 금세 잊어버리곤 합니다(필자도 예외는 아니었습니다!).
mailto 링크란 무엇인가요?
mailto 링크는 클릭하는 순간 컴퓨터에 설정된 기본 메일 클라이언트(예: Windows의 Outlook, macOS의 Mail)를 자동으로 실행하고, 미리 지정된 수신자 주소로 새 메일 작성 창을 띄워주는 특수한 하이퍼링크입니다.
웹사이트의 '문의하기' 버튼이나 연락처 페이지에서 자주 볼 수 있는 기능이죠.
mailto 링크의 HTML 코드
mailto 링크는 일반 링크와 완전히 동일한 문법을 사용합니다. 바로 앵커 태그 <a>를 활용하는 것이죠.
먼저 일반적인 링크에서는 href 속성 안에 URL 경로를 작성합니다:
<a href="https://www.somewebsite.com">링크 텍스트</a>mailto 링크를 만들 때는 href 속성 안에 이메일 주소를 넣고 앞에 mailto:를 붙여주면 됩니다:
<a href="mailto:yourname@email.com">이메일 보내기</a>@email 부분은 @gmail, @hotmail 등 실제로 사용하는 이메일 서비스 도메인으로 자유롭게 바꿔서 사용하면 됩니다.
활용 팁: 제목과 참조 추가하기
mailto 링크에는 쿼리 파라미터를 추가해 메일 작성 창을 더욱 편리하게 설정할 수 있습니다:
- 제목 지정:
<a href="mailto:yourname@email.com?subject=문의사항">문의하기</a> - 참조(CC) 추가:
<a href="mailto:yourname@email.com?cc=other@email.com">참조 포함 메일</a> - 본문 미리 입력:
<a href="mailto:yourname@email.com?body=안녕하세요.">본문 포함 메일</a>
여러 파라미터를 조합할 때는 첫 번째 항목 뒤에 ?를, 이후 항목들 사이에는 &를 사용합니다.
이처럼 mailto 링크는 몇 줄의 코드만으로 사용자가 클릭 한 번으로 바로 이메일을 보낼 수 있게 해주는 간단하지만 강력한 기능입니다. 여러분의 웹사이트 연락처 페이지에 꼭 활용해 보세요!