이메일 퍼블리싱 고려사항

이메일 코딩시 주의사항

 

- 이메일은 모바일 우선 고려이므로 최대 폭 600-640px 로 작업하는 것이 좋다. 

- 이메일은 <table> 형태로 구성된다.

- css는 모두 인라인으로 구성되어야한다. 
- 패딩을 쓸수 없을수도 있으니 공백을 넣은 td를 써서 여백을 준다

- 비어있는 <td> 의 width 나 height 값은 지정하지 못할 수도 있으므로 공백태그 &nbsp; 를 꼭넣어준다

- 배경이미지는 사용불가능할 수도 있으니 대체 색상을 지정해주는 것이 좋다.

- 이미지는 원본크기로 나오는 경우가 있을수 있으니 원하는 사이즈의 이미지를 사용하는것이 좋다.(이미지가 클수록 로딩 속도가 느려진다)

  화질을 높이기 위해 큰이미지를 사용한다면,  td 사이즈와 img 태그의 사이즈를 지정해준다. 

<img src="" width="640px" style="width:640px; max-width:640px" />

- 스타일 지정시에는 속성과 style 모두 지정한다. 

     예 > <b style=“font-weight:bold;”></b>

     예 > <td align="center" width=“100px” style=“width:100px; text-align:center”>&nbsp;</td>

 

 

- 반응형을 고려해야하지만, media 태그가 적용되지 않을 수도 있다.

     media 태그에 속성을 설정할때는 모든 값에 !important로 우선순위를 높여준다. 

 

- 버튼을 만들때 a태그에 style=“display: block”을 주고 스타일을 적용하는 경우 적용되지 않을 수 있으니, 원하는 모양이 있다면 이미지를 쓰는것이 좋다. 

- a 태그의 글씨 색상과 밑줄은 css로 지울수 없는 경우도 있다. 

- 본문에 이미지가 모두 생략되는 경우가 있다(대표적으로 아웃룩) 그러므로 최대한 텍스트를 사용하거나 이미지가 안나올 경우를 대비해 이미지 태그에 alt 값을 써주는것도 방법이다. 

-폰트사용을 원한다면 웹폰트를 사용할 수는 있지만 적용된다고 확신할 수는 없다.

 

테이블에 여백과 선을 없애기위한 설정

<table border="0" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-collapse: separate; border-style: hidden; mso-table-lspace: 0pt; mso-table-rspace: 0pt; ">

--> 기본배경색이 검정일 수 있으니 항상 배경색을 설정한다. 

--> 아웃룩 다크모드에서는 흰색배경이 검정으로 자동으로 변경될 가능성도 있다.