[EDM] 아웃룩 가이드

• 아웃룩은 이미지의 margin 과 padding 을 무시한다.

대신 hspace와 vspace를 사용한다.

• 아웃룩에서 텍스트는 자동으로 줄바꿈 되지 않는다.

Td에 아래 스타일을 적용하면 된다.

• 아웃룩은 table cell에 1px의 border를 추가한다.

만약 table cell에 백그라운드를 사용할 때 td 내용 주변에 1px의 하얀 테두리를 발견할 수 있다.

• 간단하게 아래와 같이 스타일로 수정할 수 있다.

또는

• 아웃룩은 때때로 링크 스타일을 무시한다.

아웃룩 2007, 2010은 a태그에 href가 없다면 a태그의 인라인 스타일을 지원하지 않는다.

아래와 같이 수정해야 가능하다.

• 만약 간격이 중요하다면 list 사용은 피해라.

일관된 결과를 위한 안전한 방법은 table을 이용하는 것이다.

• 아웃룩은 때때로 padding을 제거한다.

아웃룩은 p, span 태그의 집합으로 변환된다. 그래서 padding을 유지하고 싶다면 아래처럼 td태그에 적용해라.

위에 태그가 아웃룩에선 아래와 같이 변환된다.

그래서 아래와 같이 td에 padding를 적용하면 된다.

• Line-height를 조절하기 위해 MSO를 사용해라.

Line-height 선언 전에 mso-line-height-rule:exactly를 추가해라. 단 block 요소에서만 작용된다. 오직 microsoft에서만 적용되는 CSS 속성이다.

• 아웃룩은 table을 말 그대로 해석한다.

정확한 rowspan 값을 설정해야 한다.

대부분의 웹 브라우저는 매우 관대하지만 아웃룩은 추가로 없는 row를 해석할 수도 있다.

• 아웃룩은 때떄로 HTML 요소의 넓이와 높이를 무시한다.

고정된 넓이와 높이값의 box 요소들이 정확하게 나타나지 않을 수도 있다. 공간을 채우기 위한 투명 이미지나 table cell의 높이 속성을 이용하는 것도 좋다.

• 아웃룩은 최소 2px 높이의 td를 설정한다.

아웃룩 2007과 2010은 table cell에 최소 2px의 높이를 강요한다. 만약 1px 투명 이미지와 배경색상을 적용한다면 가로 줄이 예상보다 더 두껍게 나올 수도 있다.

• 아웃룩에서의 이미지 백그라운드는 VML을 필요로 한다.

아웃룩에서 이미지 백그라운드는 Vector Markup Language(VML) 없이 잘 작동되지 않는다.

수정하기 복잡한 문제이므로 아래 블로그에서 VML 사용법을 체크해보자. (http://emailbg.net/)

• 아웃룩은 몇몇 div들을 paragraphs로 변환한다.

아웃룩은 종종 div를 p태그로 변환한다. 이유는 알 수 없다.

• 아웃룩은 word rendering engine을 사용한다.

아웃룩 2007은 page breaks와 약간 다른 text boundaries를 사용한다.

HTML 코드의 output이 아닌 출력 목적을 위한 웹 레이아웃으로 구분된 요소를 사용하기 때문에 최대 23.7인치 (약 1,790px)를 넝으면 자동으로 구분선과 새 영역이 생긴다.

제일 좋은 방법은 23.7인치 높이 이하의 다수 테이블로 나누는 것이다.

• 아웃룩에서 긴 이미지들은 잘릴 수 있다.

아웃룩은 1728px보다 더 긴 이미지의 경우 상단 부분을 자른다.

HTML에 정의된 크기의 이미지는 잘못 렌더링 될 수도 있다.

연장된 이미지(바, 테두리, 그라데이션 등)가 제대로 렌더링 되지 않을 수 있다. 모든 그래픽 파일은 속성에 정확한 자신의 치수를 가져야 한다.

• 아웃룩에서 움직이는 GIF 파일은 지원되지 않는다.

아웃룩은 움직이는 GIF 파일의 오직 첫 슬라이드만 보여준다.

감사합니다. ^^

참조 (소소한 일상: 잎새님 블로그http://jynsys.blog.me/220057191697)

원본 (http://www.emailonacid.com/blog/details/C13/tips_and_tricks_outlook_07-13)

https://answers.microsoft.com/ko-kr/msoffice/forum/msoffice_install-mso_other-mso_2007/outlook%EC%97%90-html%EC%86%8C%EC%8A%A4/08b61c51-b4ed-4965-8028-ca4d81dfc62d?messageId=cd44e4f0-207f-4938-a850-d306a10f8785