실행 가능한 HTML 문서: 이메일 링크 (mailto)

Q: HTML에서 이메일 링크는 어떻게 만드나요?

href가 mailto:와 주소로 시작하는 링크를 쓰세요. hello@example.com 처럼요. 클릭하면 독자의 기본 메일 앱에서 새 메시지가 열려요.

Q: mailto 링크에 제목을 넣으려면 어떻게 하나요?

? 뒤에 쿼리 매개변수로 추가하세요. mailto:hello@example.com?subject=Order%20question처럼요. 공백은 %20으로 인코딩하고, 매개변수를 더 넣을 때는 ?subject=Hi&body=Hello처럼 &로 이으세요.

Q: mailto 링크로 여러 사람에게 보내려면 어떻게 하나요?

주소를 쉼표로 구분하세요. mailto:ana@example.com,bob@example.com처럼요. 참조에는 cc=와 bcc= 매개변수를 쓰세요. mailto:ana@example.com?cc=bob@example.com&bcc=cy@example.com처럼요.

Q: HTML에서 전화번호를 클릭할 수 있게 하려면 어떻게 하나요?

국제 형식 번호로 tel: 링크를 쓰세요. +1 555 123 4567 처럼요. 휴대폰에서는 전화를 걸고, 데스크톱에서는 설치된 통화 앱이 있으면 그 앱을 열어요.

이메일 링크 만드는 법

링크의 href를 mailto:와 주소로 시작하세요. 클릭하면 독자의 메일 앱에서 그 주소로 보내는 새 메시지가 열려요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Email link</title>
</head>
<body>
  <p>Questions? Write to <a href="mailto:hello@example.com">hello@example.com</a>.</p>
  <p>Or call <a href="tel:+15551234567">+1 555 123 4567</a>.</p>
</body>
</html>

미리보기는 다른 앱을 열지 않아요. 여기서 링크를 클릭하면 그 링크가 열 주소를 보여 줘요. 실제 페이지에서는 첫 번째 링크가 새 이메일을 열고, 두 번째 링크는 휴대폰에서 전화를 걸어요.

주소 자체를 링크 텍스트로 쓰세요. 메일 앱이 설정되지 않은 독자(브라우저에서 웹메일을 쓰는 데스크톱에서 흔해요)도 복사할 수 있어요. "이메일 보내기"라고만 쓰인 링크는 그런 독자를 막막하게 해요.

제목, 본문, cc, bcc

mailto 링크는 메시지의 더 많은 부분을 채울 수 있어요. URL 쿼리 문자열처럼 ? 뒤에 매개변수를 추가하고 &로 이으세요.

매개변수	채우는 곳	예
`subject`	제목 줄	`?subject=Order%20question`
`body`	메시지 본문	`&body=Hi%20there`
`cc`	참조 수신자	`&cc=sales@example.com`
`bcc`	숨은 참조 수신자	`&bcc=log@example.com`

수신자가 여러 명이면 주소 부분에 쉼표로 구분해서 넣어요. mailto:ana@example.com,bob@example.com처럼요.

값은 URL 인코딩해야 해요. 공백은 %20, 줄바꿈은 %0D%0A, &는 %26, ?는 %3F예요. 이 예제의 스크립트는 각 링크를 디코딩해서 메일 앱이 무엇을 받는지 보여 줘요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mailto parameters</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <a href="mailto:support@example.com?subject=Order%20%23123&body=Hi%2C%0D%0AMy%20order%20has%20not%20arrived.">Report a problem</a>
  <br>
  <a href="mailto:ana@example.com,bob@example.com?cc=boss@example.com&subject=Q3%20plan">Email the team</a>

  <pre id="out"></pre>

  <script>
    const out = document.querySelector('#out');
    for (const a of document.querySelectorAll('a')) {
      const [to, query] = a.getAttribute('href').slice(7).split('?');
      out.textContent += 'To: ' + to + '\n';
      for (const [key, value] of new URLSearchParams(query)) {
        out.textContent += key + ': ' + value + '\n';
      }
      out.textContent += '\n';
    }
  </script>
</body>
</html>

제목 Order #123은 Order%20%23123으로 써야 해요. #를 그대로 두면 URL이 거기서 끝나서 본문이 사라져요. 공백에 +를 써서도 안 돼요. mailto 링크에서 +는 문자 그대로의 더하기 기호이고, 많은 메일 앱이 그대로 보여 줘요.

JavaScript로 mailto 링크 만들기

손으로 인코딩하면 실수하기 쉬워요. encodeURIComponent가 대신 해 줘요. 입력란에 입력하면 아래 링크가 바뀌어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mailto builder</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 8px; }
    input, textarea { display: block; width: 100%; max-width: 360px; font: inherit; }
    code { display: block; background: #e5e7eb; padding: 8px; word-break: break-all; }
  </style>
</head>
<body>
  <label>To <input id="to" value="hello@example.com"></label>
  <label>Subject <input id="subject" value="Question & feedback"></label>
  <label>Body <textarea id="body" rows="3">Hi,
I have a question.</textarea></label>

  <p><a id="link">Open in mail app</a></p>
  <code id="href"></code>

  <script>
    const fields = ['to', 'subject', 'body'].map((id) => document.getElementById(id));
    const update = () => {
      const [to, subject, body] = fields.map((f) => f.value);
      const href = 'mailto:' + to +
        '?subject=' + encodeURIComponent(subject) +
        '&body=' + encodeURIComponent(body.replace(/\r?\n/g, '\r\n'));
      document.getElementById('link').href = href;
      document.getElementById('href').textContent = href;
    };
    fields.forEach((f) => f.addEventListener('input', update));
    update();
  </script>
</body>
</html>

encodeURIComponent는 &를 %26으로, 줄바꿈을 %0A로 바꾸고, replace는 줄바꿈을 이메일이 기대하는 %0D%0A 쌍으로 만들어요. 주소 부분은 입력한 그대로 두세요. 거기서는 @와 ,를 인코딩하지 않아도 돼요.

tel:과 sms:로 전화 링크 만들기

tel:은 클릭하면 전화를 거는 링크를 만들어요. href에는 국가 번호를 넣고 공백 없이 번호를 쓰세요. 화면에 보이는 텍스트는 원하는 형식으로 써도 돼요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contact links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .contact { display: flex; flex-wrap: wrap; gap: 8px; }
    .contact a {
      padding: 10px 14px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      color: #111827;
      text-decoration: none;
    }
    .contact a:hover { border-color: #2563eb; }
  </style>
</head>
<body>
  <div class="contact">
    <a href="tel:+442079460958">Call +44 20 7946 0958</a>
    <a href="sms:+15551234567">Text +1 555 123 4567</a>
    <a href="mailto:hello@example.com">hello@example.com</a>
  </div>
</body>
</html>

tel:+442079460958은 어느 나라에서든 동작해요. tel:02079460958 같은 국내 번호는 그 나라 안에서만 걸려요.
하이픈은 구분자로 쓸 수 있지만(tel:+1-555-123-4567) 공백은 형식에 없으니 href에서는 빼세요.
sms:는 메시지 앱을 열어요. ?body=로 메시지를 넣는 건 많은 앱에서 되지만 지원이 제각각이라 믿지 마세요.
데스크톱에서 tel:은 설치된 통화 앱(FaceTime이나 인터넷 전화 앱 등)이 있으면 열고, 없으면 아무 일도 하지 않아요.

iPhone의 Safari는 일반 텍스트의 전화번호를 알아서 링크로 바꿔요. 주문 번호 같은 게 그 때문에 깨진다면 <meta name="format-detection" content="telephone=no">로 끄세요.

스팸과 이메일 주소

mailto 링크의 주소는 페이지를 내려받는 어떤 봇이든 읽을 수 있어요. hello [at] example [dot] com처럼 쓰거나 JavaScript로 주소를 조립하는 요령은 단순한 수집기 일부는 막지만 링크를 쓰기도 더 어렵게 만들어요. HTML 폼에서 다루는 문의 폼을 쓰면 주소가 페이지에 아예 나오지 않아요. 대부분의 사이트에는 받은편지함의 좋은 스팸 필터가 더 간단한 답이에요.

<form action="mailto:...">는 피하세요. 독자의 메일 앱에 의존하고, 입력값을 읽기 어려운 URL 인코딩 형태로 보내며, 무언가 전송되었다는 확인도 받을 수 없어요.

자주 하는 실수

mailto:를 빼먹음. href="hello@example.com"은 주소 이름을 가진 페이지로 가는 상대 링크예요.
제목이나 본문에 인코딩하지 않은 공백이나 #. 값을 %20, %23, 또는 encodeURIComponent로 인코딩하세요.
공백에 +를 씀. 더하기 기호로 보여요.
& 대신 ?를 한 번 더 씀. 첫 번째 매개변수만 ? 뒤에 오고, 나머지는 &로 이어요.
텍스트가 "이메일 보내기"뿐임. 웹메일 사용자는 복사할 게 없어요.
tel:에 국내 번호를 씀. 국가 번호를 넣으세요.

자주 묻는 질문

HTML에서 이메일 링크는 어떻게 만드나요?

href가 mailto:와 주소로 시작하는 링크를 쓰세요. <a href="mailto:hello@example.com">hello@example.com</a>처럼요. 클릭하면 독자의 기본 메일 앱에서 새 메시지가 열려요.

mailto 링크에 제목을 넣으려면 어떻게 하나요?

? 뒤에 쿼리 매개변수로 추가하세요. mailto:hello@example.com?subject=Order%20question처럼요. 공백은 %20으로 인코딩하고, 매개변수를 더 넣을 때는 ?subject=Hi&body=Hello처럼 &로 이으세요.

mailto 링크로 여러 사람에게 보내려면 어떻게 하나요?

주소를 쉼표로 구분하세요. mailto:ana@example.com,bob@example.com처럼요. 참조에는 cc=와 bcc= 매개변수를 쓰세요. mailto:ana@example.com?cc=bob@example.com&bcc=cy@example.com처럼요.

HTML에서 전화번호를 클릭할 수 있게 하려면 어떻게 하나요?

국제 형식 번호로 tel: 링크를 쓰세요. <a href="tel:+15551234567">+1 555 123 4567</a>처럼요. 휴대폰에서는 전화를 걸고, 데스크톱에서는 설치된 통화 앱이 있으면 그 앱을 열어요.

mailto 링크를 눌러도 왜 아무 일도 안 일어나나요?

이 링크는 주소를 기본 메일 앱에 넘겨주기만 해요. 독자에게 설정된 메일 앱이 없으면(웹메일을 쓰는 데스크톱에서 흔해요) 쓸모 있는 일이 일어나지 않아요. 복사할 수 있도록 주소를 링크 텍스트로 보여 주세요.