이메일 포맷은 표준이 없다. 다양한 이메일 클라이언트에서 정상적으로 보이기 위해선 <div>
태그를 사용하지 않고 <table>
<tr>
<td>
만 이용해서 작성하는게 좋다. 일명 테이블 코딩이라고 불린다. 여백을 지정할 때 보통 margin
을 사용하는데, 이 또한 padding
등으로 대체한다. 스타일은 인라인 방식을 사용한다.
이메일 클라이언트에게 HTML 유형을 알려준다. XHTML 1.0 Transitional doctype
을 사용하면 이메일 클라이언트가 유효성을 검사하고 이메일을 렌더링하는데 도움이 된다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>">
<html lang="en" xmlns="<http://www.w3.org/1999/xhtml>" xmlns:o="urn:schemas-microsoft-com:office:office">
<!-- head 생략 -->
<!-- body 생략 -->
</html>
텍스트와 특수 문자를 올바르게 표시할 수 있도록 문자 인코딩 방식을 UTF-8
로 설정한다. DOCTYPE
을 XHTML
로 설정했기 때문에 Content-Type
선언도 포함해야 한다.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="x-apple-disable-message-reformatting" />
<title>타이틀</title>
<!-- style 생략 -->
</head>
<style>
태그에 전역 스타일 등을 포함할 수도 있다.
<head>
<!-- meta 생략 -->
<style type="text/css">
table, td, div, h1, p { font-family: Arial, sans-serif; }
</style>
<!-- body 생략 -->
</head>
일부 이메일 클라이언트는 <body>
를 제거하기 때문에 이를 대비해 <table>
태그를 컨테이너로 사용한다. 이메일 템플릿의 가장 안전한 가로 너비는 600px
다. 최대 800px
를 넘지 않도록 작성한다.
<table>
은 아래처럼 초기화해서 사용한다. <table>
<tr>
<td>
를 제외한 다른 테이블 관련 태그들은(thead
tbody
colgroup
등) 사용하지 않는 것이 좋다.
<table border="0" cellpadding="0" cellspacing="0" width="100%"></table>