lang/html

HTML 이메일 템플릿 만들기

C/H 2014. 11. 11. 02:09




지메일, 핫메일, 야후와 같은 많은 웹 기반 메일 클라이언트는 마크업에서 스타일시트를 없애버리거나 무시해 버린다.
지메일은 <style>태그를 제거해서 지메일에서 사용하는 스타일과 충돌할 가능성을 없애버린다.
이메일 클라이언트는 외부로 연결된 스타일시트를 의존할 수 없다.

지메일과 야후는 <body>태그를 지우거나 이름을 바꿔 버리므로 <body>를 대신할 다른 태그를 사용하는 것이 좋다.
일부 클라이언트는 CSS축약 선언을 무시할 수 있으니 축약을 사용하지 않고 풀어서 선언해야 한다.
#header { padding: 20px; }

#header {
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
}

로터스 노트(Lotus Notes)나 아웃룩 2007은 배경 이미지를 제어 할 수 없다.
로터스 노트는 PNG이미지를 보여주지 않는다.

제대로된 이메일 만들기

  • 최소한의 CSS 스타일만 사용하여 가장 단순한 HTML형태로 만든다.
  • 최근 기술 대신 HTML 테이블로 레이아웃을 잡는다.
  • 현란한 글자 모양을 사용하지 않는다.
  • CSS를 최대한 단순하게 적용한다.

그림과 이메일

  • 서버의 이미지에 접근이 가능해야 하고, 이미지의 주소를 바꾸지 말아야 한다. 이메일은 언제 열지 알 수 없기 때문이다.
  • 이미지 보기가 기본으로 꺼져 있기 때문에 의미있는 설명을 alt="" 속성에 넣어야 한다.
  • 이미지는 평범하게 <img> 태그를 이용해 넣어라 많은 이메일 클라이언트가 테이블 백그라운드로 이미지를 넣는 것을 지원하지 않고, 몇몇 클라이언트만 CSS백그라운드를 이용해 이미지를 보여준다.
  • 이미지는 보통 막혀 있기 때문에 이메일 전체 내용을 이미지로 만드는 것은 매우 좋지 않은 생각이다. 보기에는 좋을 수 있지만 접근성은 떨어진다.

메일침프에는 이메일을 성공적으로 보내는 노하우가 많이 담겨 있다. 이메일 템플릿에 대해 더 알고 싶다면 오픈소스 메일침프를 공부해 볼것을 권한다.
반응형