메일링 코딩스타일 적용테스트 (외부스타일 제외)
메일링 코딩을 할때 여러분들은 웹표준에 맞춰 코딩을 하는지요?
메일링은 웹페이지로 볼수 없으며, 구조화를 시킬 필요도 없고, 시킬수도 없다는게 제 개인적인 생각입니다.
그래서 몇가지 테스트를 해보았습니다. 사실 꽤 오래전에 테스트를 한건데 이제서야 공유를 합니다.
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 방식은 피하는것이 좋을듯 보여집니다.
추가
글이 유실되서 간신히 원본글(http://webmini-textcube.blogspot.kr/2009/02/css%EB%A9%94%EC%9D%BC%EB%A7%81-%EC%BD%94%EB%94%A9-%EC%8A%A4%ED%83%80%EC%9D%BC.html)을 찾아서 다시 포스팅합니다. 2009년도에 포스팅을 했었고, 2008년도에 테스트를 한 내용입니다. 지금하고 바뀐부분이 좀 있습니다. 그냥 참고만 하시구요.
네이버메일 같은경우 style에 position이 들어가면 자동으로 해당스타일을 삭제를 합니다.
그리고 아웃룩같은경우는 이미지에 map링크가 안되는점과 배경이미지는 기본적으로 보이지 않아서 따로 아웃룩에서 설정해야하니 되도록이면 아웃룩메일에서는 배경이미지 대신 배경색상으로 작업하시는게 정신건강에 좋습니다.
요청하는 분들이 있어서 추가 포스팅해요~
