이메일 코딩시의 주의할 점

■ 이메일 코딩시 알아둘 점 

---

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

■ CSS

---

기본

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

center

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

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; 을 주어서 밀착시킨다.