이메일 포맷은 표준이 없다. 다양한 이메일 클라이언트에서 정상적으로 보이기 위해선 <div> 태그를 사용하지 않고 <table> <tr> <td>만 이용해서 작성하는게 좋다. 일명 테이블 코딩이라고 불린다. 여백을 지정할 때 보통 margin을 사용하는데, 이 또한 padding 등으로 대체한다. 스타일은 인라인 방식을 사용한다.

DOCTYPE


이메일 클라이언트에게 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>

Head


텍스트와 특수 문자를 올바르게 표시할 수 있도록 문자 인코딩 방식을 UTF-8로 설정한다. DOCTYPEXHTML로 설정했기 때문에 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


<style> 태그에 전역 스타일 등을 포함할 수도 있다.

<head>
	<!-- meta 생략 -->
	<style type="text/css">
		table, td, div, h1, p { font-family: Arial, sans-serif; }
	</style>
	<!-- body 생략 -->
</head>

Body


기본 구조 ⭐️

일부 이메일 클라이언트는 <body>를 제거하기 때문에 이를 대비해 <table> 태그를 컨테이너로 사용한다. 이메일 템플릿의 가장 안전한 가로 너비는 600px다. 최대 800px를 넘지 않도록 작성한다.

<table>은 아래처럼 초기화해서 사용한다. <table> <tr> <td>를 제외한 다른 테이블 관련 태그들은(thead tbody colgroup 등) 사용하지 않는 것이 좋다.

<table border="0" cellpadding="0" cellspacing="0" width="100%"></table>