[eDM] 이메일 정보성 메일 html 만들때 참고

eDM이란 이메일 코딩을 말한다.

이메일 서비스(gmail, naver, daum, outlook등)나 아웃룻의 버전마다 렌더링 되는 화면이 다르다.

테스트를 하며 디자인과 맞춰야 하기 때문에 쉽지 않은 작업이다.

아래는 아웃룩 이메일 템플릿 작업을 하며 경험한 특징들을 공유하고자 정리한 내용이다.

인라인 스타일

스타일 시트를 별도로 사용하지 않고 태그에 인라인 스타일로 작성한다.

table

레이아웃은 div가 아니라 table로 설계해야 한다.
코드가 길어지는 단점이 있지만 대부분의 이메일 서비스들(특히 아웃룩)이 이를 지원하지 않는다.

<table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;"></table>

width, height, align

너비, 높이, 정렬들은 HTML 속성으로 지정해줘야 한다.

<td width="200" height="50" align="center"></td>

image

이미지 태그는 렌더링되면서 이미지 아래에 여백이 생긴다. 이를 없애려면 스타일을 추가한다.

<img src="" style="display:block;border:0">

background

background-image와 그 관련된 속성은 outlook에서 안된다.
부득이하게 백그라운드 이미지가 필요할 경우, 이미지와 컬러를 따로 선언해서 이미지가 보이는 이메일 서비스에서는 이미지가 보이고 아웃룩에서는 컬러가 보이게 작업한다.

template

<!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">
		<title></title>
</head>

<body  leftmargin="0"  topmargin="0">
	<table  width="700"  border="0"  cellpadding="0"  cellspacing="0"  align="center" style="border-collapse:collapse;font-family:'Noto Sans KR',dotum,sans-serif;font-size:16px;word-break:normal;color:#000;letter-spacing:-0.4px;line-height:1.3;background-color:#3D7DD5;background:no-repeat 50% 0 / cover url('');">
		<tbody>
			<tr>
				<td></td>
			</tr>
		</tbody>
	</table>
</body>
</html>

참고

https://www.campaignmonitor.com/css/

CSS Support Guide for Email Clients

A complete breakdown of the CSS support for the most popular mobile, web and desktop email clients on the planet.

www.campaignmonitor.com

https://minimal-dev.tistory.com/14

이메일 eDM HTML 코딩 가이드

이메일 코딩은 보통의 코딩 방식과 다릅니다. 이메일 서비스(아웃룩, 지메일, 네이버 등)마다 아웃룩의 버전마다 렌더링 되는 화면은 상이합니다. 테스트를 하며 디자인과 맞춰야 하기 때문에

minimal-dev.tistory.com

728x90

저작자표시 비영리

'Web > Markup | WEB' 카테고리의 다른 글

[웹접근성] 꾸밈 요소의 이미지 처리 (0)	2022.06.27
[HTML] 태그 (0)	2021.06.28
[SEO] 메타태그 최적화 (0)	2021.06.07
[퍼블리싱] 퍼블리셔 (0)	2021.02.10
파비콘 (0)	2018.05.30

'Web > Markup | WEB' 카테고리의 다른 글

티스토리툴바