이메일용 인라인 스타일

많은 이메일 클라이언트, 특히 2016년 5월 이전의 Gmail 웹과 현재도 여러 모바일 앱은 <style> 블록과 외부 스타일시트를 제거하거나 수정합니다. 인라인 style="..." 속성만이 모든 클라이언트에서 살아남는 것이 보장되는 CSS입니다.

인라인 스타일을 직접 작성하는 것은 유지 관리가 어렵습니다. 일반적인 <style> 태그와 클래스 이름을 사용해 이메일을 작성한 다음, 빌드 시 인라이너(Juice, Premailer, mjml)를 실행하여 각 규칙을 배포 전에 일치하는 요소의 style 속성으로 복사하십시오.

인라인 스타일은 !important를 제외하면 가장 높은 특이도를 가집니다. 인라인 값을 덮어쓰려는 미디어 쿼리는 모든 속성에 !important를 사용해야 합니다. 그렇지 않으면 @media의 문맥과 관계없이 인라인 선언이 우선하기 때문입니다.

인라이너는 개별 요소에 일치하는 규칙만 복사하고, @media 블록은 평탄화할 수 없으므로 <style> 태그 안에 그대로 둡니다. 이렇게 해도 문제가 없습니다. Gmail과 다른 제거 기능은 인라인 스타일을 그대로 두고, <style> 태그를 존중하는 클라이언트는 그 위에 미디어 쿼리를 적용합니다.

일부 클라이언트는 단축 속성에서 문제를 일으킵니다. font: 14px/1.4 Arial을 완전히 무시할 수도 있습니다. 긴 형식(font-family, font-size, line-height)을 사용하면 각 속성이 서로 독립적으로 작동하거나 실패합니다.

많은 클라이언트는 다크 모드에서 색상을 자동으로 반전합니다. 텍스트 컨테이너에 color와 background-color를 명시적으로 설정하면 검은색 배경에 검은색 텍스트가 표시되는 대형 사고를 방지할 수 있습니다. 항상 두 속성을 함께 지정하십시오.

크기 지정에는 px를 사용하십시오. rem, vh, vw는 클라이언트마다 지원이 일관되지 않습니다. 전체 너비 레이아웃에서는 표에 백분율을 사용할 수 있으며, 내부 표와 셀에는 절대 픽셀 너비를 사용하면 클라이언트마다 동일하게 렌더링됩니다.

@font-face를 통한 웹 글꼴은 Apple Mail, iOS Mail, Thunderbird에서 작동하지만 Outlook과 Gmail에서는 작동하지 않습니다. 인라인 값에는 웹 안전 글꼴 스택(Arial, Helvetica, sans-serif)을 사용하고, @font-face는 이를 지원하는 클라이언트를 위한 점진적 향상 기능으로만 사용하십시오.

div의 인라인 background-image는 최신 클라이언트에서 작동하지만 Outlook에서는 무시됩니다. 대체 방식으로 bgcolor를 사용하고 Outlook에는 조건부 VML <v:rect>를 사용하십시오. 그러면 모든 클라이언트에서 완전히 동일하게 표시할 수 없는 경우에도 시각적으로 동등한 배경을 표시할 수 있습니다.

인라인 스타일은 브라우저 미리 보기에서는 올바르게 보이지만 Gmail, Outlook 또는 iOS Mail에서는 다르게 표시될 수 있습니다. 캠페인을 보내기 전에 Litmus, Email on Acid 또는 무료 Mailtrap 미리 보기를 사용하여 주요 클라이언트별로 확인하십시오.

<style> 태그에 작은 초기화 스타일(margin: 0 on body, line-height: 100% on tables, border: none on images)을 추가하여 기본 클라이언트 스타일을 무력화하십시오. <style>이 적용되는 곳에서만 사용하려면 이를 미디어 쿼리로 감싸십시오.

HTML 이메일의 미디어 쿼리에서는 왜 모든 속성에 !important가 필요합니까?

이메일에서는 클라이언트가 스타일을 제거하더라도 유지되도록 인라인 스타일이 필요하지만, 작성한 스타일은 보통 <style>에 두고 빌드 시 인라인화합니다. 미디어 쿼리 안에서는 인라인 스타일보다 우선되도록 !important를 사용하고, 단축 표기보다 전체 속성 표기를 선호하며, color와 background-color를 명시적으로 설정하고, px 단위를 사용하며, 보내기 전에 실제 클라이언트에서 테스트하십시오.