지메일, 핫메일, 야후와 같은 많은 웹 기반 메일 클라이언트는 마크업에서 스타일시트를 없애버리거나 무시해 버린다.
지메일은 <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백그라운드를 이용해 이미지를 보여준다.
- 이미지는 보통 막혀 있기 때문에 이메일 전체 내용을 이미지로 만드는 것은 매우 좋지 않은 생각이다. 보기에는 좋을 수 있지만 접근성은 떨어진다.
메일침프에는 이메일을 성공적으로 보내는 노하우가 많이 담겨 있다. 이메일 템플릿에 대해 더 알고 싶다면 오픈소스 메일침프를 공부해 볼것을 권한다.
반응형
'lang > html' 카테고리의 다른 글
| 반응형 디자인, 개발 툴 (0) | 2014.12.01 |
|---|---|
| scrollReveal.js (0) | 2014.11.29 |
| 웹페이지를 풍성하게 해주는 10가지 HTML5 Tags (0) | 2014.09.30 |
| HTML5 Tutorials 30 (0) | 2014.07.26 |
| modern.IE IE테스트를 위한 MS의 배려? (0) | 2013.04.16 |