이메일 html 아웃룩에서 발생하는 문제 수정방법 line-height

이메일 HTML 작성시 아웃룩을 맞추기 위한 테스트 메일이 실패하는 경우가 상당합니다. 그 중에서 가장 큰 이슈중 하나인 line-height 문제를 해결해 보고자 합니다. 가장 많은 이슈사항이 바로 테이블 태그 또는 a 태그에 line-height가 적용이 안되는 부분입니다...

1. line-height 관련 문제
먼저 outlook 2013 이전 버전에서는 다음의 코드를 사용해 수정이 가능합니다.

mso-line-height-rule: exactly;
위 코드는 ms outlook에만 사용가능한 코드로 해당 속성을 사용한 뒤에 line-height값을 사용합니다.

mso-line-height-rule: exactly; line-height: 110%;

여기서 중요한 사실이 line-height 속성값이 정수가 아닌 퍼센트 단위를 사용해야 하는 것입니다. 아래를 봐주세요.

(O) mso-line-height-rule: exactly; line-height: 110%;
(X) mso-line-height-rule: exactly; line-height: 1.1;

Outlook 2013 부터 수정하는 방법
위 코드를 사용해도 수정이 안되는 경우 line-height 값을 다음과 같이 표기하여 수정이 가능합니다.

(X) mso-line-height-rule: exactly; line-height: 110%;
(X) mso-line-height-rule: exactly; line-height: 1.1;
(O) mso-line-height-rule: exactly; line-height: 15px;
단, 위 속성을 테이블이나 다른 태그에 사용할 경우 그 값이 적용이 안됩니다. 예를 들어 링크가 필요하여 a 태그에 입력할 경우 적용되지 않으니 다른 태그를 사용합니다. 테스트 결과 p태그에서 적용이 잘되었습니다.

단, 아래의 경우처럼 사용시 적용이 안됩니다.
<a><p style="mso-line-height-rule: exactly;line-height:24px; padding: 0!important; margin: 0">Works good!</p></a>

아무래도 인라인 태그에 블럭태그를 사용하였기 때문으로 생각됩니다. 아래처럼 p와 a태그의 위치를 바꿔주면 잘 동작합니다.
<p style="mso-line-height-rule: exactly;line-height:24px; padding: 0!important; margin: 0;"><a>Works good!</a></p>


2. color 적용이 안되는 문제 rgb 값
; 아웃룩에서는 색상 적용시 rgb를 사용해 color: rgb(100, 100, 100)과 같이 설정한 경우 색 적용이 안됩니다. 이때는 #00000처럼 6자리로 사용하시길 바랍니다. 3자리도 가능하지만 6자리가 호환성을 위해 더 나은 결과를 가져옵니다.


3. 사용이 불가능한 태그들 확인할 것. 지원불가 속성 리스트
- float
- margin
- position