2009년 2월 6일 금요일

[CSS]메일링 코딩 스타일

· 메일링 코딩스타일 적용테스트 (외부스타일 제외)


메일링 코딩을 할때 여러분들은 웹표준에 맞춰 코딩을 하는지요?

메일링은 웹페이지로 볼수 없으며, 구조화를 시킬 필요도 없고, 시킬수도 없다는게 제 개인적인 생각입니다.
그래서 몇가지 테스트를 해보았습니다. 사실 꽤 오래전에 테스트를 한건데 이제서야 공유를 합니다.

css 를 부르는 방법은 크게 3가지로 분류 됩니다, (외부스타일, 내부스타일, 인라인스타일)
여기서 외부스타일은 메일제공 사이트와 class 충돌문제가 발생할수 있어 테스트 항목에서 제외시켰습니다.
총 테스트 방법은 3가지(옛날방식, 인라인방식, 내부스타일) 이며, 자주이용하는 메일 9개만 테스트 해보았습니다.


  옛날방식 인라인스타일 내부스타일 비고
Daum O O O  
네이버 O O X 이미지를 첨부파일로 인식, 내부스타일 적용안됨
야후 O O O  
파란 O O O 이미지를 첨부파일로 인식
구글(G메일) O X X 스타일 적용안됨
엠파스 O O O  
네이트 O X X 스타일 적용안됨, 이미지를 첨부파일로 인식
코리아닷컴 O O O 이미지를 첨부파일로 인식
Outlook Express O O O  


● 간단하게 3가지 방식을 설명을 드리자면

- 옛날방식 : 배경이미지나, 폰트사이즈, 컬러등을 css 로 입히는 방식이 아닌 엘리먼트 안에 직접적으로 해당소스를 삽입하는 방법입니다. ex)<td background="http://www.webmini.net/test_bg.gif">
- 인라인스타일 : 배경이나, 폰트사이즈, 컬러등을 해당 엘리먼트 안에 스타일을 주는 방식입니다. ex)<td style="background:url(http://www.webmini.net/test_bg.gif) no-repeat;">
- 내부스타일 : 해당 페이지 안에 style 소스를 선언후 class 로 불러오는 방식입니다. ex) .wrap --> <td class="wrap">

테스트 결과 네이버, 구글, 네이트는 내부스타일과 인라인스타일이 적용 되지 않았습니다.
스타일이 적용되지 않는 이유는 스타일 충돌이 생겨 메일사이트가 깨지는 경우를 대비해서 해당사이트에서 차단한듯 보여집니다.
위에서도 알수 있듯이 공통적으로 동일하게 보여지게 하기 위해선 옛날방식 (table 방식) 으로 진행이 되어야 하며, 스타일 적용이 되지 않는 곳이 있기에 div 방식은 피하는것이 좋을듯 보여집니다.

댓글 7개:

  1. 오아~ 좋은 글 감사드립니다.

    전 테이블세대가아니고 첨부터 div 코딩방식을 배워서 테이블코딩을 잘 못하는데

    메일단 발송코딩할때 마니 어렵습니다 ㅠ.ㅠ

    그런데 메일발송 테스트 html 에 체크하고 그 소스를 그대로

    적고 보내면 되는건가요?! 발송테스트는 어떻게 하면 되나요?!

    답글삭제
  2. @치프 - 2009/02/13 12:36
    메일 발송테스트는 회사마다 보내는 방식이 다를테고 솔루션이 각기 다를수 있습니다.

    저같은 경우는 개인테스트였기 때문에 일반메일에서 만든 html 소스를 그대로 붙혔습니다. 당연히 에디터가 아닌 html에 체크를 하셔야겠죠^^

    답글삭제
  3. @빽짱구 - 2009/02/13 12:56
    아, 그렇군요..

    빠른답변 감사합니다.

    답글삭제
  4. outlook2007에서는 stylesheet가 먹히지 않습니다.

    그래서 단순 테이블코딩으로 이미지를 일일히 짤라서 코딩을 해야 합니다.

    답글삭제
  5. @웹퍼블리셔 - 2009/05/09 12:15
    맞습니다. 그리고 2007에서는 백그라운드 이미지가 적용되지 않습니다. (CSS,html 모두)

    답글삭제
  6. trackback from: [CSS]메일링 코딩 스타일
    옛날방식 인라인스타일 내부스타일 비고 Daum O O O 네이버 O O X 이미지를 첨부파일로 인식, 내부스타일 적용안됨적용안됨 야후 O O OO 파란 O OO O 이미지를 첨부파일로 인식 구글(G메일) O X X 스타일 적용안됨 엠파스 O OO O 네이트 OO X X 스타일 적용안됨,적용안됨, 이미지를 첨부파일로 인식 코리아닷컴 O O O 이미지를 첨부파일로 인식 OutlookOutlook Express O O O 옛날방식이란 이미지 하나씩 다 자..

    답글삭제
  7. 비밀 댓글 입니다.

    답글삭제