선요약

• 서비스마다 template을 적용하는 방법이 다르다.
• google은 header의 style를 후처리해서 hash id를 따로 부여해주고 스타일링이 적용된다.
• naver는 아예 head 태그를 제거하고 body 태그만 적용해준다. (보안상의 이슈로 head 태그를 아예 없애버리는 듯 하다)

template이 깨지는 현상

선요약에 적혀있는대로, 각 이메일 서비스마다 template을 사용하는 방법이 달라서 위의 이미지같이 특정 서비스에서만 레이아웃이 깨지는 현상이 발생했다. (sendgrid email send 서비스를 사용하고 있다)

해결방법

inline-style

간단하게 inline-style을 적용해서 항상 본문에 적용되게 한다.
단점으로는 css 재사용이 어렵다.

<div style="color: red;"></div>

style tag in body

스타일 태그를 body 안에 집어넣는다.

<style>
	.container {
  		color: red;
  	}
</style>
<div class="container"></div>

추가로 알아둬야 할 것

• <center>와 같이 legacy 태그들은 작동하지 않는 엔진들이 있다.
• 브라우저 호환성이나 서비스 호환성을 체크해야 한다.
• 스팸 필터 회피를 위해서 스팸 키워드들을 기입하지 않아야 한다!