HTML 이메일 개발은 데스크톱 및 모바일 이메일 클라이언트에서 안정적으로 렌더링되도록 방어적인 테이블 기반 레이아웃을 사용해야 합니다.
클라이언트 호환성 주의사항 및 제한된 CSS
피해야 할 CSS 속성
| 속성 및 적용 범위 | 문제가 발생하는 클라이언트 | 안전한 대안 |
|---|---|---|
p 또는 div 태그의 width |
Microsoft Outlook | td 요소에 직접 width 지정 |
p 또는 div 태그의 padding |
Microsoft Outlook | td 셀에 padding 적용 |
margin (모든 형식) |
Outlook, Hotmail | 간격 조절용 테이블 셀 사용 |
background-image |
Outlook Windows desktop | Microsoft VML 태그 사용 |
data-uri 방식 인라인 이미지 |
Webmail clients | 외부 보안 HTTPS CDN에 이미지 호스팅 |
피해야 할 선택자
| 선택자 유형 | 문제가 발생하는 클라이언트 |
|---|---|
| 의사 요소 (::before, ::after) | Outlook, Yahoo, Gmail |
| 인접 및 직계 선택자 (E + F, E > F) | Outlook, Gmail App |
| 속성 선택자 ([href^="https"]) | 구형 웹메일 클라이언트 |
기본 원칙: 모든 CSS는 테이블 셀 td의 style="..." 속성에 인라인으로 작성해야 합니다.
반응형 이메일 기본 템플릿 구조
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Responsive Email</title>
<style type="text/css">
@media only screen and (max-width: 600px) {
.container { width: 100% !important; }
}
</style>
</head>
<body style="margin: 0; padding: 0;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="padding: 20px 0;">
<table class="container" border="0" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
<tr>
<td style="color: #333333; font-family: Arial, sans-serif; font-size: 16px; line-height: 24px;">
이메일 본문 내용이 여기에 들어갑니다.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>