이메일 코딩시 주의할 점 ( eDM html )

 

기본적으로 table tr td 만을 가지고 코딩하길 권유하고 그 외 일부 코드는 메일 서비스 회사에서 막아놓는 경우나
각 브라우저마다 기본적인 마진 패딩의 차이가 있으므로  다른 코드를 이용한 마크업을 최소화한다.

css

*기본
css 를 사용하는 방식, 상단에 스타일을 선언하는 방식은 메일 제공업체가 막는 경우가 있으므로,
스타일은 각 코드안에 인라인으로 넣어주자~

*center
메일폼의 제일 바깥에 감싸져 있는 코드에 <div align="center"></dicv> 를 넣줘서 메일을 받는 사람이 메일을 열었을데
메일폼이 가운데 정렬이 되도록 한다.

*background
style="background:~~~" 방식이 안되는 곳이 있으므로 background="~~~" 로 작업을 권장..
background="~~~" 방식은 repeat 기능이나 left top 등의 위치조절기능이 없으므로
텍스트앞에 아이콘이나 불릿이 있는 경우 텍스트가 이미지 폰트인 경우 같이 컷팅,
또는 텍스트가 시스템폰트인 경우 텍스트앞의 아이콘이나 불릿은 img src 로 처리..
background 스타일을 사용할 경우 아웃룩 2007은 지원하지않는 다는 걸 알아야함.

*font-family
개인적으로 이 원인을 빨리 찾지 못해서 굉장히 고생한 부분이다 ㅠ.ㅠ
시스템폰트가 들어간 코드에 폰트패밀리가 들어가지 않은 경우, 브라우저마다 또는 메일제공회사마다
기본으로 선언된 폰트 글꼴이 다르므로 반드시 폰트패밀리를 선언해줘야 한다..
돋움같은 경우, 한글보다는 영어로  style="font-family:Dotum;" 으로 선언하길 권장한다.

*vertical-align
valign="top" 또는 style="vertical-align:top;" 등을 주어서,, 공백을 최소화 한다.

*line-height
시스템폰트로 구성된 문단들은 line-height 선언이 빠지면 각 메일 회사나 브라우저마다 문단안의 텍스트 위 아래
간격이 차이가 생길 수 있으므로 선언해주는 것이 좋다. 이외에도 경험상 시스템폰트가 들어간 곳은 line-height 를
넣주는 것이 좋은 듯하다. 개인적으로 폰트사이즈가 11px 인 경우 line-height 값은 13px로 해주고, 12px 이상은
line-height값을14px로 해준 후에 문단안의 위 아래 여백등은 패딩을 이용해 조절해주었다.

*cell
cellspacing="0" cellpadding="0" 을 사용하거나 style="border-collapse:collapse;" 를 사용하여 경계선의 여백을 없애준다.

*padding
기본적으로 위 아래 td 에 이미지가 있을 경우 padding:0; 을 주어서 밀착시킨다.

출처 : http://blog.naver.com/ph4013/60102554699