메일링 코딩 CSS Support 가이드

테이블 코딩으로 "인라인스타일"로 줘서 메일작업을 넘겼으나, 

개발 붙이고 아웃룩 테스트를 해봤을 때 다음과 같은 이슈사항이 생겨서 다시 재작업. -ㅁ-;

1. 모든 인라인 스타일 및 width 같은 속성 삭제됨.

2. <td> 안에는 자동으로 <div align=center>가 붙음.

3. colspan 등이 먹지 않음.

4. 닫는 태그들 모두 삭제되어 있음. -ㅁ-;

5. <img>는 잘 나옴.

6. 외부 스타일을 써보면 어떻냐는 개발자의 의견이 있었지만, 클래스 등 css 충돌 가능성이 아주아주 크기때문에 반려.ㅋㄷ

7. 구글, 네이버, 네이트 등 메일에선 인라인스타일을 차단한다는 글도 있었지만, 테스트 결과 그건 사실이 아님.

문제는 이것이 아웃룩 문제인지, 아님 메일을 발송하는 에디터 문제인지 명확히 테스트할 수 없는 환경.;;; 도리도리....

그래도 다시 멘탈을 주섬주섬 챙겨서 재작업~ ^ㅁ^;;

우선은 인라인 스타일 대신 옛날 코딩방식인 속성을 사용해서 맞췄고,

div align 이 자동으로 들어가는 것은 p태그를 넣어서 재정렬 할 수 있도록 했고,

나머지 colspan 등은 다시 문제가 된다면, 디자인 자체를 심플하고 유동적으로 바꾸도록 해야할 듯...

어쨌든 아웃룩 관련 이슈덕분에 메일링 관련 사이트도 정리정리~

CSS Support

1~2. CSS hack required for link colors. See fix for Yahoo! Mail Beta

3~4. Works in some instances if CSS is inlined before or during campaign import

1. By default, minimum font-size is 13px

2~3. text-overflow: ellipsis; does not work

4. text-overflow: ellipsis; does not work in FF

5. word-wrap: normal; not supported

1. Background images not supported

2. Background CSS not supported. Use the 'background' HTML attribute instead

3. Background images not supported

4. Background CSS not supported. Use the 'background' HTML attribute instead

5. background: url('image.jpg') repeat; is supported

1. No in Safari, Yes in FF

2. Outlook.com doesn't support margin or margin-top

3. Padding for p and div tags is not supported

4. Width property works on tables and table cells, but not when applied to div, p and inline elements (eg.span). 

  By default, inline elements are set to 100% width in Outlook '07. Click for full CSS rendering capabilities. 

5~8. IE7: Partial support. Good in IE9, Safari, FF, Chrome

campaign-monitor-guide-to-css-in-email-sept-2011.pdf

자료 출처 : http://www.campaignmonitor.com/css/