이메일 템플릿
이메일 템플릿은 G-mail, naver, daum과 같은 플랫폼에서 이메일을 통해 보이는 웹 구조입니다.
아래와 같은 것이 이메일 템플릿입니다. 저는 이미지처럼 저장해서 보내는 줄 알았는데 HTML 구조로 이루어져 있었네요.
이메일 템플릿 마크업, 스타일
HTML 구조로 되어있지만 일반적인 마크업과 다릅니다. 각 이메일마다 지원하는 태그, 이미지 크기, 폰트 사이즈가 모두 다르기 때문에 일반적인 태그들이 아닌 범용적으로 지원하는 <table> 태그를 이용해 레이아웃을 잡고 그 안에서 마크업, 스타일링을 합니다.
CSS는 인라인 스타일을 사용합니다. 여러 이메일 플랫폼에
<body
style="
margin: 0;
padding: 0;
font-size: 14px;
line-height: 1.5;
font-family: Noto Sans CJK KR, Apple SD Gothic Neo, serif;
color: #222;
background-color: #fff;
"
></body>-
<table>의 기본 속성으로cellspacing,cellpadding값을 0으로 설정해 테두리와 텍스트 안의 공간을 제거했습니다.border값은 기본적으로 0으로 설정되어 작성하지 않았습니다. email template의 width는 600px ~ 800px로 권장되어 사이의 값으로 선정했습니다.<table cellspacing="0" cellpadding="0" width="640px" style="margin: 20px auto" ></table> -
기본적으로
<table>태그의 안에서<thead>,<tbody>,<tfoot>을 이용해 구역을 나눴습니다. 또 이중<table>을 사용해 레이아웃을 구성하지 않고<td>태그 안에서는<div>태그를 이용해 레이아웃을 설정했습니다.<table> <thead> <tr> <th> <!-- 로고와 보낸 날짜.. --> </th> </tr> </thead> <tbody> <tr> <td> <!-- 본문의 제목, 내용, 안내글 --> <!-- div 태그를 이용한 구역 설정 --> <div> <ul> <li>선택 사항 1</li> <li>선택 사항 2</li> </ul> </div> </td> </tr> </tbody> <tfoot> <tr> <td> <!-- 마무리 멘트, 고객센터, 전화, 메일 등 --> </td> </tr> </tfoot> </table>
테스트
vscode의 라이브 서버를 이용해 마크업이 잘 됐는지 확인했다면 마지막으로 실제로 이메일을 보내 테스트를 해봤습니다. 모두 같은 HTML 마크업을 전송했지만 각 플랫폼마다 모두 조금씩 다른 걸 확인할 수 있습니다. 저는 레이아웃이 무너지는지 위주로 테스트를 했습니다.
